Jump to content
  • JavaScript Page Navigation for Spotfire


    Introduction

    Sometimes we have tall pages and we need to scroll down to find the section that we want to see. This process can be automated using links and targets. 

    scroll.gif.a0e6a01f32d0f006e80a405c5b39844e.gif

     

    Getting Started

    We can have a text area somewhere in the top to serve as a navigation menu with many triggers. A single trigger might look like this, but any padiv and span tags can work the same way:

     <a id='sec1btn'>Go to section 1</a>
     
    Then we can add an event listener to these elements with javascript to bind the onclick event to the sec1btn
     
    document.getElementById('sec1btn').addEventListener('click', function() {
    	document.querySelector('#section1').scrollIntoView({behavior: 'smooth'})
    })
     
    or directly on the html markup:
     
     <a onclick="document.querySelector('#section4').scrollIntoView({behavior: 'smooth'});">section 4</a>
     
    Then we can add textareas down the page to specify the target section to scroll at.
     
     <div id="section1">this is section 1</div>
     
    If html sanitation is on, we can wrap the unsupported html code with the <code> tag and run a script to parse it:
     
    <code>
      <button onclick="document.querySelector('#section1').scrollIntoView({behavior: 'smooth'});">section 1</button>
      <span  onclick="document.querySelector('#section2').scrollIntoView({behavior: 'smooth'});">section 2</span>
      :
      :
      <a onclick="document.querySelector('#sectionN').scrollIntoView({behavior: 'smooth'});">section N</a>
    </code>
     
    the script to parse the unsupported html code is simple:
     
    //parse code to html
    document.querySelectorAll("code").forEach(e =>{e.innerHTML = e.innerText})
     
    Note: This workaround only works when html sanitization is on. You can tell if html sanitization is on if it shows that some tags are not supported. Please be careful using this workaround because the <code> tag might not be supported in the future.

    References


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...