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
I am using the hugo-academic theme for a webpage. Is it possible to have a widget's menu link (from the homepage) also be a dropdown menu
like this?
So when I am scrolling down the main page (homepage) it would highlight the widget I am seeing at the moment (as a hugo academic page would do), but at the same time, it is a drop-down menu in case I want to go to more specific webpages.
Here is an example if you want to put the "projects" widget in the home. You only need to put in the sub-menu url an # to link your widget
[[main]]
name = "Projects"
url = "#projects"
identifier = "projects"
weight = 1
[[main]]
name = "Project 1"
url = "#projects1"
parent = "projects"
weight = 1
[[main]]
name = "Project 2"
url = "#projects1"
parent = "projects"
weight = 2
If you have a widget_page "Project", you need to put the root project and then the #
url = "projects/#project1"
You can see my repo for an example: github.com/valentinaandrade/movid-site
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.
I am trying to create nodes which will change colour when the mouse hover over it.
I used R (igraph) to plot the nodes and to generate a network.
I then create a html template using the cat().
However, I am not sure how to link a css sheet to create the hover button which should lie on top of the nodes.
require(igraph)
htmlfile = file.path('~/Dropbox/Cambridge/PhD/ICAR/AIG/Map/html/', "page1.html")
cat("<html><h1>My first HTML page from R</h1>",file = htmlfile)
cat("\n<br>Hello Web World!", append = TRUE, file = htmlfile)
set.seed(1)
E.circuit.2 <- graph_from_literal(1--2:3:4:5, 2--3,3--2, 4--5)
E.circuit.2
coordinates <- layout_with_dh(E.circuit.2)
coordinates
plot(E.circuit.2)
cat('\n<p><img src="map.png", align="center"></p>', append = TRUE, file = htmlfile)
cat("\n</html>", append = TRUE,file = htmlfile)
If i understand correctly you only have to add:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
after your <html> tag. Where you change mystyle.css to the stylesheet you would like to use.
I am creating an image dynamically on the page using dataURL,
var aImg = document.createElement('img');
aImg.setAttribute('src', dataURL);
aImg.setAttribute('alt', 'pic');
aImg.setAttribute('width', '438px');
aImg.setAttribute('height', '267px');
aImg.onclick = (function() {
//download the image object
})();
I am not sure what to do to download this image object that is a PNG image.
Can someone give hints?
If you want the image to be displayed the follwing should be fine :
aImg.src = YOUR_URL
if you want to save it on to the file , you shoud redirect and let the browser take care of the rest. JS redirect can be done as follows :
window.location.replace(dataURL)
If you want the browser to give a pop-up saying "Save File" check out this link : http://muaz-khan.blogspot.in/2012/10/save-files-on-disk-using-javascript-or.html