Setup a page

Create a full scrolling page.

multiPage(..., opts = list(), menu = NULL)

Arguments

...	any element.
opts	a list of options, see details.
menu	named vector of menu links.

Details

use the menu parameter on one "side" (multiLeft or multiRight) only; No need to specify it twice, it would breaks things as it is a CSS id, see examples.

Valid opts:

• verticalCentered - boolean - vertically centering of the content within sections.

• scrollingSpeed - numeric - speed in milliseconds for the scrolling transitions.

• easing - character string, http://jqueryui.com/ easing, i.e.: easeInQuart

• sectionsColor - character vector, i.e.: c("blue", "red")

• navigation - boolean - if set, it will show a navigation bar made up of small circles.

• navigationPosition - character string, takes none, left, or right

• navigationColor - character string, i.e.:"black"

• navigationTooltips - character vector, i.e.: c("Tooltip 1", "Tooltip 2")

• loopBottom - boolean - defines whether scrolling down in the last section should scroll to the first one or not.

• loopTop - boolean - defines whether scrolling up in the first section should scroll to the last one or not.

• css3 - boolean - defines whether to use JavaScript or CSS3 transforms to scroll within sections. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to true and the browser doesn't support CSS3, a jQuery fallback will be used instead.

• paddingTop - defines the top padding for each section with a numerical value and its measure, i.e.: 5em

• paddingBottom - defines the bottom padding for each section with a numerical value and its measure , i.e.: 10px

• keyboardScrolling boolean - defines if the content can be navigated using the keyboard

• touchSensitivity - numeric - defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section, i.e.: 5

• responsiveWidth - a class ms-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

• responsiveHeight - a class ms-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

• responsiveExpand - boolean - when responsive mode is fired (by using the responsiveWidth or responsiveHeight options) it turns auto scrolling off and expands each left and right side into a full-width section placing one after another. Then the page can be scrolled normally. https://github.com/alvarotrigo/multiscroll.js/wiki/Responsive-Expand-Extension

See also

https://github.com/alvarotrigo/multiscroll.js.

Examples

if(interactive()){
# Run de demo
demo("muliPage", package = "fullPage")

# OR
library(shiny)

options <- list(
  sectionsColor = c("#4BBFC3", "#7BAABE", "#d3d3d3", "#000")
)

ui <- multiPage(
  opts = options,
  menu = c("Multi Scroll" = "multiscroll",
           "Plots" = "plots",
           "Full Section plots" = "fullplots",
           "Images" = "images"),
  multiLeft(
    align = "right",
    multiSection(
      menu = "multiscroll",
      h1("Multi")
    ),
    multiSection(
      menu = "plots",
      multiContainer(
        h1("Plot ->"),
        numericInput(
          "max",
          "Maximum",
          min = 50,
          max = 250,
          value = 10
        )
      )
    ),
    multiSectionPlot(
      menu = "fullplots",
      "fullPlot"
    ),
    multiSection(
      menu = "images",
      h1("Image ")
    )
  ),
  multiRight(
    align = "left",
    multiSection(
      h1("Page()")
    ),
    multiSection(
      plotOutput("plot")
    ),
    multiSection(
      multiContainer(
        h1("<- Full Section plot"),
        sliderInput(
          "number",
          "Data points",
          min = 50,
          max = 250,
          value = 10
        )
      )
    ),
    multiSectionImage(
      img = "https://alvarotrigo.com/multiScroll/imgs/tiger.jpg",
      side = "right",
      h1("Background")
    )
  )
)

server <- function(input, output){

  output$plot <- renderPlot({
    par(bg = "#7BAABE")
    hist(rnorm(100, 20, input$max))
  })

  output$fullPlot <- renderPlot({
    par(bg = "#d3d3d3")
    hist(rnorm(input$number, 20, 250))
  })
}

shinyApp(ui, server)
}