Is there a way to use a web image as cursor when hovering over a button?
I tried something like this:
tags$head(tags$style(HTML(" .custom { cursor: url(https://c2.staticflickr.com/2/1907/31794847918_04f9e687e1_b.jpg), auto;
} ")))
which has no effect, and I can't find any other examples on the web how to manage this in R shiny.
library(shiny)
ui <- fluidPage(
actionButton(inputId = 'messagebutton', label = 'click me')
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
This example works for me. I think your image isnt working, but I'm not sure why exactly. It might be too big.
library(shiny)
csscode <- HTML("
#messagebutton {
cursor: url(http://www.javascriptkit.com/ajax.gif), auto;
}
")
ui <- fluidPage(
tags$head(tags$style(csscode)),
actionButton(inputId = 'messagebutton', label = 'click me')
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
Related
I am having a shiny app with some ui elements.
Is there a way to replace some HTML (e.g. div / div content) with an animation effect, similar to what shinyjs::show(anim=T) does?
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::html("someDiv", "changed without animation")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
the shinyjs::html doesn't provide this utility. We can write our own js code and use shinyjs::runjs to run it when button is clicked.
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::runjs("$('#someDiv').fadeOut(500, function(){$(this).text('changed without animation').fadeIn();})")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
This MWE is working:
library(shiny)
library(shinydashboard)
library(shinyMCE)
ui<-dashboardPage(header=dashboardHeader(),
sidebar=dashboardSidebar(),
body=dashboardBody(#uiOutput("body")
tinyMCE("tinyInput","Some html text")
))
server <- function(input, output, session) {
#output$body <- renderUI({tinyMCE('tinyInput',"Some html text")})
}
shinyApp(ui = ui, server = server)
This is how it looks like:
However, if I use the tinyMCE inside renderUI:
library(shiny)
library(shinydashboard)
library(shinyMCE)
ui<-dashboardPage(header=dashboardHeader(),
sidebar=dashboardSidebar(),
body=dashboardBody(uiOutput("body")
#tinyMCE("tinyInput","Some html text")
))
server <- function(input, output, session) {
output$body <- renderUI({tinyMCE('tinyInput',"Some html text")})
}
shinyApp(ui = ui, server = server)
..it does not work properly:
I need to use renderUI because I have several elements to render in the body.
Any suggestion?
As I saw in here.
I added the source of the script in a singleton:
library(shiny)
library(shinydashboard)
library(shinyMCE)
ui<-dashboardPage(header=dashboardHeader(),
sidebar=dashboardSidebar(),
body=dashboardBody(singleton(tags$head(tags$script(src = "//cdn.tiny.cloud/1/5a5deew2z9gml5pwn95iosioop446qny3vyfh994kujzkwu6/tinymce/5/tinymce.min.js", referrerpolicy="origin"))),
uiOutput("body")
#tinyMCE("tinyInput","Some html text")
))
server <- function(input, output, session) {
output$body <- renderUI({tinyMCE('tinyInput',"Some html text")})
}
shinyApp(ui = ui, server = server)
It fixed my problem.
I have two modals. When the first is opened, the background should be grayed out, as is default. But this should not happen with the second one. The code is:
library(shiny)
ui <- fluidPage(
tags$style(type = 'text/css', '.modal-backdrop { display: none }'),
actionButton('modal1', 'Modal1'),
actionButton('modal2', 'Modal2'),
)
server <- function(input, output) {
observeEvent(input$modal1,
showModal(modalDialog(title = "Modal1"))
)
observeEvent(input$modal2,
showModal(modalDialog(title = "Modal2"))
)
}
shinyApp(ui = ui, server = server)
The css code should be connected to the id of the second modal dialog, but it is not possible to include an id in the function 'modalDialog'.
Any ideas about how to apply the css code selectively to only the second modal?
You can add JS code to hide the backdrop after showing the second modal using tags$script just after modalDialog.
library(shiny)
ui <- fluidPage(
actionButton('modal1', 'Modal1'),
actionButton('modal2', 'Modal2'),
)
server <- function(input, output) {
observeEvent(input$modal1,
showModal(modalDialog(title = "Modal1"))
)
observeEvent(input$modal2, {
showModal(
list(
modalDialog(title = "Modal2"),
tags$script("$('.modal-backdrop').css('display', 'none');")
)
)
})
}
shinyApp(ui = ui, server = server)
How do I increase the width of the R Shiny notification popup? Right now it's cutting off longer error messages.
library(shiny)
ui <- fluidPage(
actionButton("test", "Test")
)
server <- function(input, output, session) {
observeEvent(input$test, {
showNotification("You did it! Now make me wider", type = "message")
})
}
shinyApp(ui, server)
You can adjust several aspects of the appearance with css
library(shiny)
ui <- fluidPage(
tags$style(".shiny-notification {color: black; background-color: red; border: 1px solid red;padding: 0 50px 0 50px;}"),
actionButton("test", "Test")
)
server <- function(input, output, session) {
observeEvent(input$test, {
showNotification("You did it! Now make me wider", type = "message")
})
}
shinyApp(ui, server)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I have RShiny code, with which i want to disable/enable number input with checkbox. However, it works only for disable.
library(shiny)
runApp(shinyApp(
ui = fluidPage(
shinyjs::useShinyjs(),
numericInput("test", "Test", 5),
checkboxInput("submit", label="Choose")
),
server = function(input, output, session) {
observeEvent(input$submit, {
shinyjs::disable("test")
})
}
))
How could I fix that?
Your code is mostly correct. The bug is in what you are observing. Your code would work fine if you are using an action button. But for the checkbox, you need to disable the input when the checkbox is unchecked, and enable when checked, and not just observe the event.
library(shiny)
runApp(shinyApp(
ui = fluidPage(
shinyjs::useShinyjs(),
numericInput("test", "Test", 5),
checkboxInput("submit", label="Choose")
),
server = function(input, output, session) {
observeEvent(input$submit, {
if(input$submit == F){
shinyjs::disable("test")
} else {
shinyjs::enable("test")
}
})
}
))