css Question posted in
Some basic documentation can be found here.

Css – How to click on a button to go to a specific div inside a panel?

I want to click on the button ‘Yellow’ and go directly to the yellow div of Panel 2.

And the same for the others buttons.

This is my code:

library(shiny)
library(bslib)

# module

curso_one_UI <- function(id) {
  ns <- NS(id)
  tagList(
    
    div(
      id = ns('red'),
      style = 'background: red; width:100vw; height: 100vh',
      h1('Red'),
    ),
    
    div(
      id = ns('green'),
      style = 'background: green; width:100vw; height: 100vh',
      h1('Green'),
    ),
    
    div(
      id = ns('blue'),
      style = 'background: blue; width:100vw; height: 100vh',
      h1('Blue'),
    ),
    
    div(
      id = ns('yellow'),
      style = 'background: red; width:100vw; height: 100vh',
      h1('Yellow'),
    ),
    
    
    
  )
}

curso_one_Server <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      
    }
  )
}

# Main App

ui <-  
  page_navbar(
    title = "Navigation Example",
    id = "main_navbar",
    
    nav_panel(
      title = "Cursos",
      id = "explorar_page",
      actionButton(inputId = 'panel1', label = 'Go to Red'),
      actionButton(inputId = 'panel2', label = 'Go to Green'),
      actionButton(inputId = 'panel3', label = 'Go to Blue'),
      actionButton(inputId = 'panel4', label = 'Go to Yellow')
      
    ),
    nav_panel(
      title = "Panel 2",
      id = "artigos",
      curso_one_UI('cursos')
    )
  )
 

server <- function(input, output, session) {
  observeEvent(input$panel1, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2 ")
  })
  
  observeEvent(input$panel2, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2")
  })
  
  observeEvent(input$panel3, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2")
  })
  
  observeEvent(input$panel4, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2 ")
  })
  
}

shinyApp(ui, server)

How can I do this using only shiny package?

I think I need to use concepts as anchor tags for example, but how can I do this?

Tags:

2

Answers


  1. 0

    Here, I corrected your code. Now it works! You had trailing spaces in the updateNavbarPage(session, "main_navbar", selected = "Panel 2 ") for both buttons Red and Yellow and so Shiny could not recognize the navigation panel you were pointing to:

    library(shiny)
library(bslib)

# module

curso_one_UI <- function(id) {
  ns <- NS(id)
  tagList(
    
    div(
      id = ns('red'),
      style = 'background: red; width:100vw; height: 100vh',
      h1('Red'),
    ),
    
    div(
      id = ns('green'),
      style = 'background: green; width:100vw; height: 100vh',
      h1('Green'),
    ),
    
    div(
      id = ns('blue'),
      style = 'background: blue; width:100vw; height: 100vh',
      h1('Blue'),
    ),
    
    div(
      id = ns('yellow'),
      style = 'background: red; width:100vw; height: 100vh',
      h1('Yellow'),
    ),
    
    
    
  )
}

curso_one_Server <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      
    }
  )
}

# Main App

ui <-  
  page_navbar(
    title = "Navigation Example",
    id = "main_navbar",
    
    nav_panel(
      title = "Cursos",
      id = "explorar_page",
      actionButton(inputId = 'panel1', label = 'Go to Red'),
      actionButton(inputId = 'panel2', label = 'Go to Green'),
      actionButton(inputId = 'panel3', label = 'Go to Blue'),
      actionButton(inputId = 'panel4', label = 'Go to Yellow')
      
    ),
    nav_panel(
      title = "Panel 2",
      id = "artigos",
      curso_one_UI('cursos')
    )
  )


server <- function(input, output, session) {
  observeEvent(input$panel1, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2")
  })
  
  observeEvent(input$panel2, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2")
  })
  
  observeEvent(input$panel3, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2")
  })
  
  observeEvent(input$panel4, {
    updateNavbarPage(session, "main_navbar", selected = "Panel 2")
  })
  
}

shinyApp(ui, server)

    enter image description here

    I hope it helps!

    Login or Signup to reply.
  2. 0

    An example using an onclick event for the yellow case.

    • $('.nav a:contains("Panel 2")').tab('show'); switches to the second panel,

    • and

      $('html, body').animate({
    scrollTop: $('#cursos-yellow').offset().top
});

      scrolls to the yellow area.

    enter image description here

    library(shiny)
library(bslib)

# module
curso_one_UI <- function(id) {
  ns <- NS(id)
  tagList(
    div(id = ns('red'),
        style = 'background: red; width:100vw; height: 100vh',
        h1('Red'),),
    
    div(id = ns('green'),
        style = 'background: green; width:100vw; height: 100vh',
        h1('Green'),),
    
    div(id = ns('blue'),
        style = 'background: blue; width:100vw; height: 100vh',
        h1('Blue'),),
    
    div(id = ns('yellow'),
        style = 'background: yellow; width:100vw; height: 100vh',
        h1('Yellow'),),
  )
}

curso_one_Server <- function(id) {
  moduleServer(id,
               function(input, output, session) {
                 
               })
}

# Main App
ui <- page_navbar(
  title = "Navigation Example",
  id = "main_navbar",
  
  nav_panel(
    title = "Cursos",
    id = "explorar_page",
    actionButton(inputId = 'panel1', label = 'Go to Red'),
    actionButton(inputId = 'panel2', label = 'Go to Green'),
    actionButton(inputId = 'panel3', label = 'Go to Blue'),
    actionButton(
      inputId = 'panel4',
      label = 'Go to Yellow',
      onclick = c(
        "$('.nav a:contains("Panel 2")').tab('show');",
        "$('html, body').animate({",
        "  scrollTop: $('#cursos-yellow').offset().top",
        "});"
      )
    )
  ),
  nav_panel(title = "Panel 2",
            id = "artigos",
            curso_one_UI('cursos'))
)

shinyApp(ui, (...) {})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search