RinteRface / fullPage

📄 fullPage.js, pagePiling.js and multiScroll.js for shiny
https://fullpage.rinterface.com
Other
111 stars 12 forks source link

Section jump with scrollbar=TRUE in fullPage() options #20

Open mariezufferey opened 1 year ago

mariezufferey commented 1 year ago

I am facing the following issue : in R Shiny App designed with the fullPage R package with a scrollbar (I really need this because in my ''true'' app the content of the 2nd section is very long), which has a fileInput in the 2nd section, when I click for uploading a file, it weirdly jumps back to the 1st section ! And this only happens when scrollbar=TRUE in the option list of fullPage(). So here my questions

1) you have an explanation why it happens ? 2) how can I circumvent this ? I have tried some javascript code (see here below) called when the input file button is clicked (not sure that it would be the most elegant way), but so far nothing works...

library(shiny)
library(fullPage)

# SOME TRIALS TO CIRCUMVENT THE ISSUE WITH JS CODE 
# BUT NO ONE WORKS
JS <- paste0("$(document).on('click', '#", "pict", "', function(){
             /* wait(5); */ /* adding wait doesn't work' */
             $.fn.fullpage.moveSectionDown(); /* brings me to 3d section...*/
             });")
# JS <- paste0("$(document).on('click', '#", "pict", "', function(){$.fn.fullpage.silentMoveTo('part2');});")
# JS <- paste0("$(document).on('click', '#", "pict", "', function(){$.fn.fullpage.moveTo(2);});")

ui <- fullPage(
  shinyjs::useShinyjs(), 
  shiny::tags$head(
    shiny::tags$script(
      JS
    )
  ),
  center = TRUE,
  opts = list(
    sectionsColor = c("#C3F3EC","#FE9199","#FFADB2"),
    scrollBar=TRUE #### <<< THIS MAKES JUMPING BACK TO 1st SLIDE WHEN CLICK TO LOAD FILE
    ),
  menu = c(
    "part1" = "part1",
    "part2" = "part2",
    "part3" = "part3"
  ),
  fullSection(
    menu = "part1"
  ),
  fullSection(
    menu = "part2",
    fileInput(paste0("pict"), "image",accept = c('image/png'))
  ),
  fullSection(
    menu = "part3"
  )
)
server <- shinyServer(function(input, output) {
})
shinyApp(ui, server)

Any help would be greatly appreciated