navbar of shiny app interferes with navbar of rmarkdown webpage

See also questions close to this topic

• text going out of div when generating with js

  I am showing notifications to user with ajax call in dropdown, everything works fine but my text is going out of div, I tried word-wrap:break-word but it is not working.

  I tried many ways to resolve it but unable to find the solution, here is my code.

  Here I can't use ajax, so I predefined the values.

  $(document).ready(function() {
  
        function notification_li(el) {
          return '<a style="display:inline-flex;" href='+el.absolute_url+' class="dropdown-item notify-item">'
                  +'<img style="max-height:40px;margin-right:15px;" class="img-fluid rounded-circle" src='+el.by_img+'>'
                  +'<div style="width:70%; word-wrap:break-word;"><p style="word-wrap:break-word;">'+toTitleCase(el.by)+': '+toTitleCase(el.verb)+'- |'
                  +toTitleCase(el.title)+' |'
                  +'</p></div>'
                  +'<img style="max-height:45px;" class="img-fluid float-right" src='+el.img+'>'
                  +'</a>'
        }
        function toTitleCase(str) {
          return str.replace(/(?:^|\s)\w/g, function(match) {
          return match.toUpperCase();
        });
        }
  
    $('#notification-drop').unbind().on('show.bs.dropdown', function () {
  
      var dropMenu = $('#dropdownnotifyButton');
      $('#ajax-notifications-container').empty()
  
  	el = {'title':'This is a long title for test adoijadhaiojdkoahdiuadjhiaudoadiuahdioajkadjkj',
  		  'absolute_url':'www.google.com',
  		  'by_img':'https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png',
  		  'by':'Google','verb':'Check out my new developed website',
  		  'img':'https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png'}
      $('#ajax-notifications-container').append(notification_li(el))
  });
  });

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  
  <div class="btn-group" id="notification-drop">
    <span type="button" class="notification-bell" data-url="{% url 'communications:get_notifications' %}" data-target="dropdownnotifyButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img class="img-fluid" src="{% static 'icons/baseline-notifications-24px.svg' %}" alt="">
      <span>2 notifications</span>
    </span>
    <div style="max-width: 520px;" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownnotifyMenu" id="dropdownnotifyButton">
      <h5 class="dropdown-header" style="text-transform:uppercase;">notifications</h5>
      <div class="dropdown-divider"></div>
      <div id="ajax-notifications-container" style="word-break: break-all;width: 520px;">
  
      </div>
      <div id="waitnotiload" style="display:block; text-align:center; padding: 50px;">
        <img style="height:50px;" class="img-fluid" src="{% static 'loading/Rolling-1s-200px.gif' %}" alt="">
      </div>
    </div>
  </div>

  I want that the notification container have max-width with 520px and the text should be in 70% area, if long the automatically break.
• How to add an ID using with the class name in multiple tags?

  For example, we have an HTML tag:

  <div class="box">This is a box</div>
  

  We are using the div tag class name box and add an id="box" in the same div tag. The output is:

  <div id="box" class="box">This is a box</div>
  

  We can achieve the changes with the code below for a single tag:

  document.getElementsByTagName("div")["class", "box"].setAttribute("id", "box")
  

  But if we don't know or we have multiple classes in the HTML element, how to add id to all the tags?

  Example:

  <div class="box">Hello World</div>
  <div class="box--red">Hello World</div>
  <div class="box--blue">Hello World</div>
  <div class="box--green">Hello World</div>
  

  Output should be like below:

  <div id="box">Hello World</div>
  <div id="box--red">Hello World</div>
  <div id="box--blue">Hello World</div>
  <div id="box--green">Hello World</div>
  
• Animate row of a table/list like Airport Info screens

  I looking for a way to animate the rows of my table a bit like this: https://www.youtube.com/watch?v=zlrTJGUfy1g

  I have a table that have 25 rows maximum and I have like 80 rows of data. I want to display the first 25 rows, then display the next 25 rows but with an animation during the modification of the rows.

  Is it possible? Thank you very much.
• Warnings when restoring graphical parameters

  I am writing my first R package and currently working on a function to make a plot using some particular graphical parameters. I want the user defined graphical parameters to get restored after the plot is made but always get same warning messages:

  opar <- par()
  par(oma = c(5, 4, 0, 0) + 0.1, mar = c(0, 0, 1, 1) + 0.1)
  par(opar)
  

  Warning messages:
  1: In par(opar) : graphical parameter "cin" cannot be set
  2: In par(opar) : graphical parameter "cra" cannot be set
  3: In par(opar) : graphical parameter "csi" cannot be set
  4: In par(opar) : graphical parameter "cxy" cannot be set
  5: In par(opar) : graphical parameter "din" cannot be set
  6: In par(opar) : graphical parameter "page" cannot be set
  

  Is there a better way of doing that? I know the suppressWarnings() function but 1. I don't want the messages to get hided and 2. if the function is called two times, a warning message appears:

  > There were 12 warnings (use warnings() to see them)
  
• Fail to authenticate BigQuery with R under the bigrquery package

  I am trying to use set_service_token in the bigrquery package for a non-interactive authentication.

  Here is my code:

  library(bigrquery)
  set_service_token("client_secret.json")
  

  But it kept showing the error message below:

  Error in read_input(file) :
     file must be connection, raw vector or file path

  However, when I simply to read the JSON path, it works:

  lapply(fromJSON("client_secret.json"), names)
  

  $`installed`
  [1] "client_id" "project_id" "auth_uri" "token_uri" "auth_provider_x509_cert_url" "client_secret" "redirect_uris"

  Can anyone help me with this? Thank you very much!
• Plotting mutiple graph in one graph in R with using function

  I am trying to plot a graph in one plot only. I have 4 different plots coming by using a function. This is my code:

  hazard.plot.w2p(beta = beta.spreda, eta = eta.spreda, time = exa1.dat$time, line.colour = "blue")
  hazard.plot.w2p(beta = 1.076429, eta = 26.21113, time = exa1.dat$time, line.colour = "blue")
  hazard.plot.w2p(beta = 5, eta = 32.97954, time = exa1.dat$time, line.colour = "blue")
  hazard.plot.w2p(beta = 2, eta = 32.9795, time = exa1.dat$time, line.colour = "blue")
  

  Here is a function i used to get output:

  hazard.plot.w2p <- function(beta, eta, time, line.colour, nincr = 500) {
    max.time <- max(time, na.rm = F)
    t <- seq(0, max.time, length.out = nincr)
    r <- numeric(length(t))
    for (i in 1:length(t)) {
      r[i] <- failure.rate.w2p(beta, eta, t[i])
    }
    plot(t, r, type = 'l', bty = 'l', 
         col = line.colour, lwd = 2, 
         main = "", xlab = "Time", 
         ylab = "Failure rate", 
         las = 1, adj = 0.5, 
         cex.axis = 0.85, cex.lab = 1.2)
  }
  

  I want to plot all the 4 plots in one plot only.

  Here is a sample data set:

  fail       time
  a          4.55
  a          4.65
  a          5.21
  b          3.21
  a          1.21
  a          5.65
  a          7.12
  
• WordPress - page broken with using iframe with srcdoc value set

  I have been migrating a site over to WordPress which has a lot of FormStack forms contained within iframes. Every time I post the iframe content into the WYSIWYG editor, though, everything after it stops rendering (namely the footer), and there is an extra "> at the end of the form for some reason. The " (end quotation mark) looks different when I inspect with Chrome's dev tools:

  srcdoc="<html></html>“>

  I checked in the WYSIWYG editor and that weird ending quote is NOT there, so I don't know why it's getting generated when the page is rendered. If I put nothing in the srcdoc tag, then everything seems fine -- the footer loads. But then I don't have the iframe content.

  Is there a way to fix this so that the srcdoc value is displayed without messing up the content after it?
• How to determine when a child iframe element is within the visible area of a scrolling div?

  I have a scrolling div that may or may not contain one or more iframes who's contents should only be loaded when the iframe is either partly/fully visible between the parent div's scroll area's top and bottom. However, when there are iframes in the div and when I inspect my web-page in Chrome, I see that the iframe's offsetTop values don't change as the parent div's scroll-bar is scrolled upward or downward. Also, I see that the offsetParent of the iframes references the body element rather than the scrolling div that actually contains the iframes.

  Here is a simple web-page that shows the basic div and nested iframe structure that I'm talking about:

  <!DOCTYPE html>
  <html>
    <body>
      <!-- Scrolling div -->
      <div id="scroller" style="height:316px; width: 322px; overflow-y:scroll;">
        <!-- 5 iframes that each contain an img tag that is ignored -->
        <iframe><img id="img" src="1.png"></iframe><br />
        <iframe><img id="img" src="2.png"></iframe><br />
        <iframe><img id="img" src="3.png"></iframe><br />
        <iframe><img id="img" src="4.png"></iframe><br />
        <iframe><img id="img" src="5.png"></iframe><br />
      </div>
      <script>
        //
        // Assign an onScroll function to the scroller div that monitors the div's
        // scrolling ...
        //
  
        function scrollerDivScrolling() {
          var div = scrollerDivScrolling.div;
  
          //
          // The following code only changes the div's background color when the
          // div's scroll-bar is scrolled: white when less-than or 50px or
          // yellow when more 50px.
          //
  
          if( div.scrollTop > 50 ) {
            div.style.backgroundColor = "yellow";
          }
          else {
            div.style.backgroundColor = "white";
          }
  
          //
          // This is code needs to check each of the iframe's position to
          // see if the iframe is displayed partially/fully between the
          // parent div's scroll area's top and bottom, and if so then the
          // iframe's content is set to the html statement(s) that are
          // between to iframe's opening and closing tags.  If the iframe's
          // position is either completely above top of the parent div's
          // scroll area or completely below the parent div's scroll area,
          // then remove the contents.
          //
  
        }
        scrollerDivScrolling.div          = document.getElementById( 'scroller' );
        scrollerDivScrolling.iframes      = scrollerDivScrolling.div.getElementsByTagName( 'iframe' );
        scrollerDivScrolling.div.onscroll = scrollerDivScrolling;
  
        // Initialize the iframes with in the scroller div to 'show' their contents ...
  
        for( var i = 0, iframes = scrollerDivScrolling.iframes, l = iframes.length, iframeDoc = null; i < l; ++i ) {
  
          iframeDoc = iframes[ i ].contentWindow.document;
          iframeDoc.open();
          iframeDoc.write('Test' + ( i + 1 ) );
          iframeDoc.close();
  
        }
      </script>
    </body>
  </html>
  

  As shown in the above code, the iframes are actually loaded with "Test " followed by a number, rather than the image tag statement that is within the individual iframe tags, but this isn't an issue, as I know how to do this already. More importantly, the scrollerDivScrolling() function that handles scrolling the div doesn't actually change the content of each iframe depending on its position relative to the parent div's scroll-area's top and bottom, because I haven't figured out which properties of each iframe I need to use.
• Adyen's Secured Fields doesn't render

  I'm trying to use Adyen's Secured Fields to encrypt shopper's sensitive data https://docs.adyen.com/developers/checkout/api-integration

  The inputs are supposed to render as iframes on the page, but I'm getting the following error.

  iframe error

  Libray embed in the <head>

  <script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSecuredFields.1.3.3.min.js"></script>
  

  Form

  <form class="flex-center position-ref h-100" action="{{ route('pay.credit') }}" method="post" id="adyen-encrypted-form">
              @csrf()
              @method('POST')
  
              <div class="cards-div">
  
                  <div class="js-chckt-pm__pm-holder">
                      <input type="hidden" name="txvariant" value="card" />
                      {{--<div class="form-group">--}}
                          {{--<div class="form-control">--}}
                              <label>
                                  <span class="input-field" data-cse="encryptedCardNumber"></span>
                              </label>
                          {{--</div>--}}
                      {{--</div>--}}
                      <div class="form-group">
                          <div class="form-control">
                              <label>
                                  <span class="input-field" data-cse="encryptedExpiryMonth"></span>
                              </label>
                          </div>
                      </div>
                      <div class="form-group">
                          <div class="form-control">
                              <label>
                                  <span class="input-field" data-cse="encryptedExpiryYear"></span>
                              </label>
                          </div>
                      </div>
                      <div class="form-group">
                          <div class="form-control">
                              <label>
                                  <span class="input-field" data-cse="encryptedSecurityCode"></span>
                              </label>
                          </div>
                      </div>
                      <div id="pmHolder" class="js-chckt-pm__pm-holder">
                          <input type="hidden" name="txvariant" value="card">
                          <input type="hidden" name="encryptedCardNumber" id="card-encrypted-card" value="">
                          <input type="hidden" name="encryptedExpiryMonth" id="card-encrypted-month" value="">
                          <input type="hidden" name="encryptedExpiryYear" id="card-encrypted-year" value="">
                          <input type="hidden" name="encryptedSecurityCode" id="card-encrypted-code" value="">
                      </div>
  
                      <button type="submit" class="btn btn-success btn-lg btn-block">Pagar</button>
                  </div>
              </div>
  
          </form>
  

  Origin key at the bottom of <body>

  <script type="text/javascript">
              var csfSetupObj = {
                  rootNode: '.cards-div',
                  configObject : {
                      originKey : "pub.v2.8015418815230181.aHR0cDovL2FkeWVuLmJldGE.KfETYJbalDv9FEZ04R8azVjBqUreC611yhD-ZFMwZKI0"
                  }
              };
              var securedFields = csf(csfSetupObj);
          </script>
  
• Plotting based on Radio Buttons in R Shiny dashboard

  This is my code:

  ui <- fluidPage(
    radioButtons("dist", "Distribution type:",
                 c("Sepal.Length" = "Length",
                   "Sepal.Width" = "Width",
                   "Petal.Length" = "Length")),
    plotOutput("distPlot")
  )
  
  server <- function(input, output) {
    output$distPlot <- renderPlot({
      dist <- switch(input$dist,
                     "Length" = plot(iris$Sepal.Length),
                     "Width" = plot(iris$Sepal.Width),
                     "Length" = plot(iris$Sepal.Length))
  
      plot(dist)
    })
  }
  
  shinyApp(ui, server)
  }
  

  What am I doing wrong?

  Also, I would like to have a par(mfrow=c(1,2)) plot for each button. How can I do this?

  Any help?

  Thanks
• Custom progress bar in Shiny

  I have a .gif file I'd like to use instead of basic withProgress bar, but I see no straightforward way to use it.

  So, the question is – how do I create a custom progress bar? Couldn't figure out if I can use Progress for this task.

  edit: with some css (though I'm no css-wizard) I got it to somewhat work, but the first time the progress bar appears - image is shown late, when the withProgress is almost done. The text message provided to withProgress shows as needed.

  css file sourced in UI:

  .shiny-progress-container{
      padding-top:10%;
      top: -5px;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent!important;
      text-align: center;
      color:black;
  }
  .shiny-progress-container .progress-text{
      position:relative;
      margin:auto;
      background-color: transparent;
      text-align: center!important;
  }
  .shiny-progress-container .progress-text .progress-message{
      background-image: url(loading.gif);
      background-repeat: no-repeat;
      background-size: 140px;
      background-position: 50% -0;
      padding-top: 150px;
      width: 400px;
  }
  .shiny-progress-container .shiny-progress:first-child .progress-text {
      background-image: url(loading.gif);
      background-repeat: no-repeat;
      background-size: 140px;
      background-position: 50% -0;
      padding-top: 150px;
      width: 400px;
  }
  
  .shiny-progress-container .shiny-progress:last-child  .progress-text {
      width: 400px;
  }
  
• Interacting with selectize.js options in Shiny

  Let's say I have the following shiny app:

  library(shiny)
  
  shinyApp(
    ui=fluidPage(
      selectizeInput(
        inputId = "foo",
        label   = NULL,
        choices = c("a", "b"),
        options = list(
          create = TRUE
        )
      )
    ),
    server=function(input, output, session){
  
    }
  )
  

  It is a pretty simple app in which I have a dropdown list generated with selectize.js. The create option will allow the user to input a custom selection as input (something different than a or b).

  If the user type something, it will display the following:

  I would like that, when the user clicks on "Add c...", the app would save a file in the app repertory named c.txt containing the string "hello". The documentation of selectize.js suggests the create option can take either a boolean or a function as its argument so, I was guessing intuitively that writing something like

  create = function(input){write("hello", paste0(input, ".txt"))}
  

  instead of create = TRUE would work, but it is not.

  Anyone could help me with this?
• Rstudio/markdown/Word: no size options for tiff figures?

  I'm using RStudio/markdown and want to produce a Word-document. I have a tiff-graphic which I want to include in the document. Since the figure appears quite small in the Word-document I want to resize it:

  ```{r , fig.align="center", echo=FALSE, out.width = "600px"}
  knitr::include_graphics("./03_figures/graph.tiff")
  ```
  

  But this gives the following output:

  Output created: test.docx
  Warnmeldungen:
  1: In hook_plot(x[i], reduce_plot_opts(options)) :
    Chunk options fig.align, out.width, out.height, out.extra are not supported       
    for Word output
  

  I tried also other options: fig.width = 1, fig.height=2 which gives me similar warnings.

  I wonder how can I change the size of a tiff-figure using parameters.

  The size options works if I use html output and png-file. Tiff-files couldn't be loaded by the html (but this is another issue).
• R Markdown: Markdown workspace to R workspace

  Maybe it's an easy question but I didn't find an answer yet. I want to export the workspace that it's created when I knit the RMarkdown script to the workspace in R to continue working over this workspace. Is there any way to do this or I should run my chunks line by line in the R console to build a similar workspace as RMarkdown workspace?

  Thanks a lot.
• how to include a function in R Markdown

  for the report of an assignment I want to include functions like this one in my report, but there appears to be some error and I cannot find it. The function runs in the console but R markdown says: Error in parse(text = x, srcfile = src) : :7:11: unexpected '}' 6: + x <- x/2 7: } ^ calls: ... -> parse_all -> parse_all.character -> parse

  This is the function: {r echo=FALSE} collatz <- function(x){ + steps <- c(); + stepCounter <- 0; + while(x>1){ + if(x%%2==0){ + x <- x/2 + } else { + x <- 3*x+1 } + stepCounter <- stepCounter+1 + steps[stepCounter] <- x} + print(paste(c("steps:", steps), collapse=" ")) + print(paste("number of iterations:",stepCounter))}