CODEWITHSUNDEEP
htmlrhyperlinkshinyanchor
hans glick
hans glick

Reputation: 2591

How to point to a specific HTML anchor in Shiny

I got a Shiny App which build a big HTML report. I want browsing the report to be easy for the user. Ideally, I want to "point" to a specific anchor based on user input values.

library(shiny)

ui <- fluidPage(
  htmlOutput("formattedText")
)

server <- function(input, output) {

  output$formattedText <- renderText({
    "<hr><br>Some text bla bla <br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br><a id='anchorid'></a>Point to this anchor<br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>"
  })

}

shinyApp(ui, server)

This code displays the top of the HTML report. How to display the HTML report at the anchor: id = anchorid?

Upvotes: 7

Views: 1616

Answers (3)

ciammarino
ciammarino

Reputation: 154

  1. For each place on your page where you want users to land when they click an anchor, create a tag and give each tag an unique id.

    Personally, I always create an empty tag containing a space ( ). This allows me to position it independently from the surrounding content. Ensuring the content and layout remain separate and unaffected if you have to tweak the positioning of where the anchor lands. Example:

<div id="anchor-id">&nbsp;</div>

  1. Create the anchor tag(s), and match their href property to the id of the tag where you want the page to jump when clicked. Example:

<a href="#anchor-id">go to this place in the page</a>

note: the href property must contain the '#'.

Please see my codepen example as I tried to mirror the code sample you provided.

Upvotes: 0

SeGa
SeGa

Reputation: 9809

To further illustrate @elbrant's answer, I've put that together in a ShinyApp, with Links to 3 anchors and back to the Top.

library(shiny)

ui <- fluidPage(
  htmlOutput("links"),
  htmlOutput("formattedText")
)

server <- function(input, output) {
  output$links <- renderText({
    "<hr><br><span id='top' style='color: red;'>
      <a href='#anchorid0'>Go to anchor0</a><br>
      <a href='#anchorid1'>Go to anchor1</a><br>
      <a href='#anchorid2'>Go to anchor2</a><br>
    </span><br>
    "
  })

  output$formattedText <- renderText({
    "<hr><br><span id='anchorid0' style='color: red;'>Anchor0</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla <br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>

    <hr><br><span id='anchorid1' style='color: red;'>Anchor1</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>

    <hr><br><span id='anchorid2' style='color: red;'>Anchor2</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>"
  })
}

shinyApp(ui, server)

Upvotes: 2

elbrant
elbrant

Reputation: 791

You need to place a corresponding link in your HTML code.

Currently your ShinyApp output produces:

<hr><br><a id='anchorid'></a>Point to this anchor<br>

That won't work because you positioned the link at the point where you want the link to take your site visitors. So, change that line to:

<hr><br><span id="anchorid">Point to this anchor</span><br>

That turns this specific point into your "bookmark". In order to make it work, you need a link for your site visitor to click on. If the link is in the same HTML document, use:

<a href="#anchorid">Go to this anchor</a>

If the link is on a different page, use:

<a href="thispage.html#anchorid">Go to this anchor</a>

The W3C specifications go into more detail.

Upvotes: 8

Related Questions