I have tried to implement the solution proposed here:
Not following URL Path Protocol
to separate all my plots in different files.
So basically I have radio buttons and based on user choice a different html file is loaded:
else if (input$chap == "4" & input$cat == "2") {
output$uiStub <- renderUI(tagList( # a single-output stub ui basically lets you
fluidPage( # move the ui into the server function
fluidRow(
column(12,
includeHTML("./html/mediapar.html")
)
),
uiOutput("pageStub") # loaded server code should render the
) # rest of the page to this output$
))
}
My problem is that every time a different file refresh (only one part of the page) the focus of page is lost and user has to scroll down again and again to get to the end of page where the choice can be made again and the plot shown.
fluidRow( style = "background-color:#FFFAFA00;",
box(
width = 12,
solidHeader = TRUE,
header = TRUE,
background = NULL,
ui <- uiOutput("uiStub")
)
Is there any workaround for this situation?
Kind Regards
Related
I have created a shiny dashboard using the 'flatly' shiny theme. However, the theme makes my navbar headings turn green when I hover over them. I would prefer them to turn orange instead. I have tried modifying this with custom html code but nothing changes.
The code I have attempted is:
ui <- navbarPage(theme = shinytheme('flatly'), collapsible = TRUE,
HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;" class="active" href="#">World Happiness Dashboard</a>'), id="nav",
tags$head(tags$style('.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
color:orange;
}')),
windowTitle = "World Happiness Dashboard",
the best approach to solve your issue will be to do an inspection with browser dev tools on the element you want to change.
at dev tools you will be able to override css properties to your custom and see if it works.
take note at the name of the element (name of the tag where the element is, provably a div), and use it on your css code to override it.
Here what you need:
https://developer.chrome.com/docs/devtools/
It's quite easy to achieve with the sass package. Here is a step-by-step approach:
Create a SASS file and call it something like my-style.sass
In the SASS file, add the things you want to change. You'll need to do some digging around in the browser, as suggested by #raOliveira, but for your case, you probably want to add the following:
.navbar-default:hover .navbar-nav>li>a:hover
color: orange
.navbar-default .navbar-brand:hover
color: orange
Add the folder www if you don't have it already.
Run this code in the start of your app.R file or in your global.R file:
library(sass)
sass(
sass_file("my-style.sass"),
output = "www/my-style.css"
)
This will create a custom CSS based on the SASS file you created.
Reference the CSS in your shiny UI:
tags$head(
tags$link(href = "my-style.css", rel = "stylesheet", type = "text/css")
)
Reproducible Shiny code
library(shiny)
library(sass)
sass(
sass_file("my-style.sass"),
output = "www/my-style.css"
)
ui <- navbarPage(
title = "test",
theme = shinythemes::shinytheme('flatly'),
collapsible = TRUE,
tags$head(
tags$link(href = "my-style.css", rel = "stylesheet", type = "text/css")
),
tabPanel("Plot"),
tabPanel("Summary"),
tabPanel("Table")
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
Output:
The tabs and the title are orange when I hover them:
I have a simple shiny application (app1) where when the user clicks on the action button (action 1), it is taking to another shiny application(app 2) in another tab.
But there is also another action button (action 2) in app2. So when the user clicks on action 2, it should take him to the previous page(app1). Can we do this?
library(shiny)
ui <- fluidPage(
actionButton("aid","Click here")
)
server <- function(input, output, session) {
observeEvent(input$aid{
#### open another link(shiny application) in the browser (different tab)
})
}
shinyApp(ui, server)
very easy, we don't need any server expression, do this:
library(shiny)
ui <- fluidPage(
actionButton(
"aid", "Click here",
onclick = 'window.open("https://www.google.com", "_self")'
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
change the link to Google to your app1 link.If you want to open in another tab, remove the "_self".
or this can also work: onclick = 'location.href = "https://www.google.com";'
I want to add a logo to the browser window in the same way as all browser windows are usually displayed:
titlePanel allows to add easily images to the application title, by using:
titlePanel(title = div(img(src="myAppImage.jpg"), "My App Name")
It is also possible to add the title that should be displayed by the browser window with windowTitle as a parameter.
However, it does not work when adding an image to the browser window. I tried:
titlePanel(title = div(img(src="myAppImage.jpg"), "My App Name"), windowTitle = div(img(src="myBrowserImage.png"), "My Browser Name")). But this gives the following browser name: <img src ...>
What is the correct way of writing it?
Not inside the titlePanel but you can add following inside the ui:
tags$head(
tags$link(rel = "icon", type = "image/png", sizes = "32x32", href = "/myBrowserImage.png"))
Also you should put the image inside www folder.
As #phago29 indicated, one way to write it is:
useShinyjs(),
## Window title
tags$head(
tags$link(rel = "icon", type = "image/png", sizes = "32x32", href = "myBrowserImage.png")),
# App title ----
titlePanel( title = div(img(src="myAppImage.png"), 'myAppTitle'), windowTitle = "myBrowserTitle" ),
# Rest of the UI
)
With the png images in a subfolder called "www".
I came across this problem when building a Shiny application in R. In the application, an action button is used to trigger a hidden download button. This would allow me to observe the action button event, react to that event, and then trigger the download process.
However, when I set the display attribute of the download button to hidden the href target of the button, which typically targets something like "session/1c47..ef8/download/download_show?w=", was missing.
Below is a smaller Shiny application which reproduces the problem.
shinyApp(
ui = fluidPage(
tags$head(
tags$style(HTML(".hide { display: none; }")),
tags$script(HTML('
Shiny.addCustomMessageHandler("trigger-button", function(message) {
document.getElementById(message.button_id).click();
});
'))
),
div(
class = "disable",
downloadButton("download_shown", "Shown"),
div(
class = "hide",
downloadButton("download_hidden", "Hidden")
)
),
br(),
actionButton("trigger_shown", "I can trigger the visible button!"),
actionButton("trigger_hidden", "I can trigger the hidden button!")
),
server = function(input, output, session) {
output$download_shown <- downloadHandler(
filename = "sample.txt",
content = function(file) {
cat("I'm visible!\n", file = file)
}
)
output$download_hidden <- downloadHandler(
filename = "sample2.txt",
content = function(file) {
cat("I'm hidden!\n", file = file)
}
)
observeEvent(input$trigger_shown, {
session$sendCustomMessage(
"trigger-button",
list(button_id = "download_shown")
)
})
observeEvent(input$trigger_hidden, {
session$sendCustomMessage(
"trigger-button",
list(button_id = "download_hidden")
)
})
}
)
In the application, the two action buttons trigger their corresponding download button. Triggering the visible download button causes a correct download of the file sample.txt. Triggering the hidden download button causes a download of an HTML file, the webpage, instead of the sample2.txt file. Furthermore, if you inspect the HTML generated you can see that the download_hidden download button has an href attribute with no target.
Is there anything in the HTML spec that dictates a hidden element
cannot have an href target? This seems highly unlikely and none of my
searching has turned up any -one or -thing confirming this.
Internally does Shiny ignore elements which are hidden?
In the mean time, does anyone have a suggestion for hiding the button
without using hidden or display: none;?
Thank you in advance.
display:none; causes any element to be not rendered. Therefore, it will not take any space in the document. Therefore, it will not receive any (real) pointer-events.
I would not even count on its ability to receive programmatically triggered pointer events, as I expect at least a few major browsers to interfere, in the name of general browsing safety principles.
If you want your element to be a valid target for user interaction (real or programmatic), I suggest using...
opacity: .01;
...on it. This way it will be rendered. If you don't want it to occupy any space in the content flow, consider applying position:absolute to it.
I have discovered the solution thanks to this issue over on GitHub.
Shiny, by default, suspends objects which are hidden. So, by hiding a downloadButton the corresponding downloadHandler is suspended. I am still unsure how Shiny uses downloadHandler to register a download, but however the process works, it is not triggered if, as I said, the corresponding downloadButton is hidden.
The solution is to use the outputOptions function provided by Shiny. From the help page for outputOptions,
suspendWhenHidden, when TRUE (the default), the output object will be suspended (not execute) when it is hidden on the web page. When FALSE, the output object will not suspend when hidden, and if it was already hidden and suspended, then it will resume immediately.
By specifying suspendWhenHidden = FALSE after defining the downloadHandler we can prevent the href problem described in the original question.
Below is a revised, working version of the small Shiny application included in the original question.
shinyApp(
ui = fluidPage(
tags$head(
tags$style(HTML(".hide { display: none; }")),
tags$script(HTML('
Shiny.addCustomMessageHandler("trigger-button", function(message) {
document.getElementById(message.button_id).click();
});
'))
),
div(
class = "disable",
downloadButton("download_shown", "Shown"),
div(
class = "hide",
downloadButton("download_hidden", "Hidden")
)
),
br(),
actionButton("trigger_shown", "I can trigger the visible button!"),
actionButton("trigger_hidden", "I can trigger the hidden button!")
),
server = function(input, output, session) {
output$download_shown <- downloadHandler(
filename = "sample.txt",
content = function(file) {
cat("I'm visible!\n", file = file)
}
)
outputOptions(output, "download_shown", suspendWhenHidden = FALSE)
output$download_hidden <- downloadHandler(
filename = "sample2.txt",
content = function(file) {
cat("I'm hidden!\n", file = file)
}
)
outputOptions(output, "download_hidden", suspendWhenHidden = FALSE)
observeEvent(input$trigger_shown, {
session$sendCustomMessage(
"trigger-button",
list(button_id = "download_shown")
)
})
observeEvent(input$trigger_hidden, {
session$sendCustomMessage(
"trigger-button",
list(button_id = "download_hidden")
)
})
}
)
Remember to place calls to outputOptions after assigning corresponding reactive expressions to output, otherwise outputOptions will raise an error.
We are building a MediaWiki to deliver content for a conference. There are only a few committee editors so we set $wgRawHtml=true. This enabled us to put iframe tags between html /html tags to properly display googlemaps so they work as expected there. However, we would like to include something like:
<html>
<iframe width="100%" height="600" scrolling="auto" frameborder="1" src="http://oursite.com/index.php?option=com_content&view=article&id=92&Itemid=84">
</iframe>
</html>
to display any of several hundred pages (by changing Itemid value) which contain the formatted text Php output already residing in our Joomla-based site. When I try this (or any other src) I see the frame in MediaWiki, but no content. Is there a way to make this work?
I suspect that there's a permissions or extension problem somewhere. I have access control groups, but they all function as expected (readonly folks, writers, users). My localsettings.php only has
$wgDBname = blah;
$wgSitename = blah;
$wgLocalInterwiki - $wgSitename;
# Skin/logo settings
#$wgDefaultSkin = 'blah';
#$wgLogo = "$wgStylePath/common/images/wiki.png";
# Authentication configuration
#$wgLDAPUseLocal = true;
#$wgLDAPDisableAutoCreate = array( "cauth" => true );
$wgEnableUploads = true;
$wgGalleryOptions = array (
'imagesPerRow' => 4, // Default number of images per-row in the gallery
'imageWidth' => 120, // Width of the cells containing images in galleries (in "px")
'imageHeight' => 120, // Height of the cells containing images in galleries (in "px")
'captionLength' => 20, // Length of caption to truncate (in characters)
'showBytes' => true, // Show the filesize in bytes in categories
'mode' => 'traditional', // One of "traditional", "nolines", "packed", "packed-hover", "packed-overlay"
);
###########
# and because I only have a few editors I have included html
###########
$wgRawHtml = true;
$configdate = gmdate( 'YmdHis', #filemtime( __FILE__ ) );
$wgCacheEpoch = max( $wgCacheEpoch, $configdate );
# Whitelisted pages
#$wgWhitelistRead = array( "Main Page", "Special:Userlogin" );
Aha! While trying different browsers I noticed that an old IE warned me about mixed secure/insecure elements on the page. Since the wiki is on a university site it is https:// which seems to be stopping the iframes from loading the src! Voila! If I include a secure source it loads. So now I either have to use secure source or unsecure the wiki serving. Thanks ancap!