In my Shiny app, the user mouses over some HTML output which consists of several spans, like this:
<div id="mydiv">
<span id="span1">foo</span>
<span id="span2">bar</span>
</div>
I want to get the ID of the span which the user is currently mousing over as a shiny input$...
I know there are lots of js ways to do it, jquery get element where the cursor is, but I don't know how to integrate with Shiny, e.g. by using shinyjs https://deanattali.com/shinyjs/extend.
Like this, if I correctly understand:
library(shiny)
js <- "
$(document).ready(function(){
$('span').on('mouseover', function(evt){
Shiny.setInputValue('span', evt.target.id);
});
})
"
ui <- basicPage(
tags$head(tags$script(HTML(js))),
tags$div(
tags$span(id = "span1", "foo"),
tags$span(id = "span2", "bar")
),
br(),
verbatimTextOutput("span")
)
server <- function(input, output){
output[["span"]] <- renderPrint({
input[["span"]]
})
}
shinyApp(ui, server)
Related
I am doing some exercises for my students using RMarkdown and a piece of code I was using begore, from Ronak Bhatt, but it is not working corretly anymore. Instead R code in correct format, I am having ```r ... like a text output.
Below I am posting all setting to have a button that hide/unhide the code in html. I really appreciate any help.
Thanks!
In the R Markdown yaml I have:
---
title: "Test"
author: "..."
date: "`r Sys.Date()`"
output:
html_document:
includes:
in_header: scripts/uncover.html
...
---
In knitr setup I have:
```{r setup, include=FALSE}
uncover <- function(before, options, envir) {
if (before) {
id <- options$id
button_string <- paste0("<button onclick=\"uncover('",
id,
"')\">Solução</button>")
div_string <- paste0("<div id = '", id,
"', style = 'display:none'>")
paste(button_string, div_string, sep= "\n")
}
else {
"</div><br>"
}
}
And in script uncover.html I have:
<script>
function uncover(id) {
var x = document.getElementById(id);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Found a solution here. RMarkdown is friendly with HTML and will allow raw HTML in Rmarkdown as long as it's used properly. I didn't use your uncover.html file, because I used other HTML code directly inside Rmarkdown.
---
title: "Test"
author: "..."
date: "`r Sys.Date()`"
output:
html_document:
includes:
in_header: uncover.html
---
<button class="btn btn-primary" data-toggle="collapse" data-target="#BlockName"> Show/Hide </button>
<div id="BlockName" class="collapse">
```{r}
uncover <- function(before, options, envir) {
if (before) {
id <- options$id
button_string <- paste0("<button onclick=\"uncover('",
id,
"')\">Solução</button>")
div_string <- paste0("<div id = '", id,
"', style = 'display:none'>")
paste(button_string, div_string, sep= "\n")
}
else {
"</div><br>"
}
}
```
</div>
I know it has been quite some time, but as I stumbled upon the excellent answer from Daniel when I tried to solve the same problem, I wanted to contribute my adapted solution.
By adding the following code to a code chunk at the beginning of the R markdown document, a new code chunk option called button is added. If it is set, the code chunk is hidden behind a button with a name equal to the value of the button code chunk option.
local({
hook_chunk <- knitr::knit_hooks$get('chunk')
knitr::knit_hooks$set(chunk = function(x, options) {
if (!is.null(options$button)) {
rnd_id <- substr(tempfile("b", "", ""), 2, 9)
paste0(
'<button class="btn btn-primary" data-toggle="collapse" data-target="#',
rnd_id, '">',
options$button, '</button> <div id="',
rnd_id, '" class="collapse">',
x, '</div>')
} else {
x
}
})
})
NAME is the name of the button and ID needs to be a unique identifier. The function therefor generates a random ID for every individual code chunk. I know that this is by no means a good solution… but it works.
The function is a modification of a function in the R Markdown Cookbook section 12.1 Redact Source Code. To achieve the desired effect, the knitr chunk hook is redefined to paste the necessary raw HTML code above and below the actual code chunk if the button option is set.
My question is exactly the same as what Maxime asked in r studio community. I have run into a similar issue with my work.
Since there was no response in that community, I'll repost Maxime's question here.
Hello R users,
I have a lot of hidden menuItems when I launch my shiny App. Some of
them are going to be shown when some buttons are clicked and some
other conditions met.
Everything ran as expected but I would like that the active menuItem
is highlighted on the sidebar. This is the case with the home page
that is never hidden but with all the hidden (from shinyjs package)
menuItems, once I show them, the menuItem is not highlighted when it
is active.
Anyone has a relatively easy solution for that?
Example of what the sidebar codes can look like:
in the UI for the sidebar:
sidebarMenu(id = "tabs",
shinyjs::useShinyjs(),
menuItem("Product Selection", tabName = "product_selection", icon = icon("dashboard")),
shinyjs::hidden(
div(id="Test",
menuItem("Test", tabName = "Test", icon = icon("chart-line"))))
)
in the server for the sidebar action:
observeEvent(input$look, {ID = someID shinyjs::show(id= ID,anim = TRUE)
updateTabItems(session, "tabs", ID) })
Have a nice day,
Maxime
I was wondering wether it was possible to hide a element in shiny rmarkdown from the user and still get the reactive value.
---
title: "My Title"
author: "My Name"
date: "Today"
output:
rmdformats::html_clean:
highlight: kate
runtime: shiny
---
```{r knitr_init, echo=FALSE, cache=FALSE}
library(knitr)
library(rmdformats)
## Global options
options(max.print="75")
opts_chunk$set(echo=FALSE,
cache=TRUE,
prompt=FALSE,
tidy=TRUE,
comment=NA,
message=FALSE,
warning=FALSE)
opts_knit$set(width=75)
```
```{r setup, include=FALSE}
library(tidyverse)
library(shinyjs)
```
```{r name, echo=FALSE, cache=FALSE}
inputPanel(
selectizeInput(inputId = "Name", label = "Choose Name", choices=c("Rachel","Mike"), selected="Mike"),
numericInput(inputId = "Cluster", label = "Choose Cluster", min = 1, max=10, value = 1 ,step = 1)
)
renderText(paste("Hallo:",input$Cluster))
```
What I got is this rmarkdown: Picture 1
See Hallo: 1, what shows, that renderText get the reactive value from input$Cluster. Is it possible to somehow hide this numericInput, that it looks like this: Picture 2
I've tried shinyjs with different settings but it was no good.
At least two options here:
1. Use plain CSS
<style>
#Cluster {
display :none;
}
</style>
This way you will have to delete the label for the numericInput.
2. Use jQuery to select the parent div containing label and input field
<script>
$(document).ready(function() {
$('#Cluster').parent('div').css('display', 'none');
});
</script>
Here we just hide the whole container.
Put either of those right underneath your YAML header.
I have a list of a few hundred Twitter oembed URLs but I don't know how to implement the GET requests of a list of ids in a view.
Edited - OP was using URLS, not ids.
<div class="tweets">
{% for id in ids %}
<script language="JavaScript" type="text/javascript">
$(".tweets").append(<div id="tweet" tweetID={{ id }}>)
</script>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<script>
window.onload = (function(){
var tweet = document.getElementById("tweet");
var id = tweet.getAttribute("tweetID");
twttr.widgets.createTweet(
id, tweet,
{
conversation : 'none', // or all
cards : 'hidden', // or visible
linkColor : '#cc5443', // default is blue
theme : 'light' // or dark
})
.then (function (el) {
el.contentDocument.querySelector(".footer").style.display = "none";
});
});
</script>
{% endfor %}
</div>
I'm trying to loop through a list of tweet ids and embed them. How do I make the JQuery loop through to create a div for each list item?
RapydML and Rapydscript
are what I was looking for. First, I created a nodeenv env. Now, I'm rewriting the above code in pythonic javascript and pythonic html.
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.