Can the navigation bar be filled automatically with content that corresponds to the anchors found within the content?

Currently, I am utilizing a Bootstrap frontend for the project at hand.

The task I am tackling involves a significant amount of automatically generated content and code, which greatly simplifies the work process. My goal is to explore the potential of creating a navigational framework based on tags such as the ones shown below:

<h2 id="_foo_bar">Foo Bar</h2>
<h2 id="_metrics_collection">Metrics Collection</h2>

Would it be feasible to populate a structure like the one demonstrated here:

    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
          <li class="sidebar-brand">
              <a href="#_foo_bar">Foo Bar</a>
          </li>
          <li>
              <a href="#_metrics_collection">Metrics Collection</a>
          </li>
        </ul>
    </div>

Is this concept technically achievable?

jqueryhtmlcsstwitter-bootstrap

Answer №1

If you want to enhance your website's navigation, one approach is to iterate through each heading element and add a link to the navigation for each of them... 

$(document).ready(function() {
  
  $("h2").each(function() {
    var text = $(this).text()
    var id = $(this).attr("id")
    var navLink = "<li><a href='#" + id + "'>" + text + "</a></li>"
    $("#nav").append(navLink)
  }) 
  
})
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    
  <ul id="nav">
  
  </ul>

  <h2 id="someId1" class="subject">Some Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, dolore. Repellat similique doloremque nisi, accusamus deleniti magni ut iure. Nesciunt quisquam accusamus, facilis, excepturi saepe repudiandae distinctio. Suscipit ipsam, maxime.</p>
  <h2 id="someId2" class="subject">And Another</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, dolore. Repellat similique doloremque nisi, accusamus deleniti magni ut iure. Nesciunt quisquam accusamus, facilis, excepturi saepe repudiandae distinctio. Suscipit ipsam, maxime.</p>
  <h2 id="someId3" class="subject">And Another One</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, dolore. Repellat similique doloremque nisi, accusamus deleniti magni ut iure. Nesciunt quisquam accusamus, facilis, excepturi saepe repudiandae distinctio. Suscipit ipsam, maxime.</p>

http://jsbin.com/gukoxizaqa/edit?html,js,output

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery AJAX request encountering a syntax error due to an invalid label

I'm having trouble with an ajax call to the server that should return a JSON object. I can't seem to figure out what's wrong, so any help would be greatly appreciated. Here's the snippet of code: $.ajax ({ type : "GET", ...

ajaxjsonjqueryjsonp

Secure your Flask forms with CSRF token validation middleware

I'm handling an html form and want to make sure that all submissions originate from my website. I've noticed others using a key for this in Django, and I'm considering implementing something similar. Is there a recommended approach for achie ...

pythonhtmlflask

Wrapping a table within an article element

My coding structure appears as follows: <article> <header> <hgroup> <h1>Foo </h1> <h2>Bar</h2> <h3>1337</h3> </hgroup> </header> <table> ...

htmlcss

Incorporate a redirect function following an alert using jQuery, AJAX,

Does anyone know how to implement a redirect after displaying an alert message once a form is submitted? $.ajax({ type: "post", data: person, async:false, url: 'https://webapp.example.c ...

jqueryjsonajax

Diverging Width Values Between Chrome and Firefox with Jquery's .width() Method

Currently, I am implementing this JQuery script for my table. $(document).ready(function () { var tableBottom = $(window).height() - $('#compare-table').height(); $(window).scroll(function (event) { var y = $(this).scrollTo ...

jquerycsshtml

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

htmlcssjsonumbracoumbraco7

Embed JavaScript code in the head section of the webpage to guarantee its presence even following a page refresh

We recently obtained an innovative Enterprise Talent Management Solution that is cloud-based. One standout feature allows users to incorporate HTML Widgets with scripts on the primary Welcome Page. The customization options for the Welcome Page UI are qui ...

javascriptjqueryhtmlcsscode-injection

Text input field for username not visible on screen

https://i.stack.imgur.com/2UUQl.png After designing the login page for my current project, I seem to have accidentally hidden the username text input. Can anyone explain why this is happening and provide guidance on how to make it visible again? ...

htmlcss

What is the best way to explain the concept of HTML5?

While reading a question on Stack Overflow, I came across a comment that stated: HTML5 is equal to HTML(5) + CSS3 + JavaScript. This statement truly caught me by surprise. Can it really be argued that HTML5 can be broken down into HTML(5), CSS3, and Ja ...

html

A guide on incorporating Bootstrap Toggle in your PHP project

I'm trying to style a checkbox to look like the ones on If I use this HTML input field: <input checked data-toggle="toggle" type="checkbox">, it resembles the desired design. However, I'm unsure of how to make it function as a real checkb ...

phptwitter-bootstrapcheckboxtoggle

Adjust the viewing area dimensions on a web browser

Recently, while testing a web application page I developed with Selenium, I came across an interesting issue. After using the JavaScriptExecutor in Selenium to get the viewport size, I found that it was different for Chrome, IE, and Firefox. The sizes wer ...

javascripthtmlseleniumselenium-webdriver

The HTML div element is not expanding to the full width of the screen on an iPhone device

Recently, I encountered an issue while testing my website on the iPhone. The footer was not covering the full width, especially on Safari browser. After some digging, I realized that the problem might be caused by an absolutely positioned DIV called #leaf- ...

htmliphoneioscss

Achieving consistent height for Grid items in Material-UI

I'm looking to achieve equal heights for these grid items without distorting them. Here's the current layout: https://i.sstatic.net/6dPed.jpg This is how I would like it to look: https://i.sstatic.net/BJZuf.jpg My challenge is that adjusting ...

cssreactjsresponsive-designmaterial-ui

Ways to trigger a 406 Error (Not Acceptable) using jQuery

Currently, I am implementing error handling in my.js file. This involves making cross-domain calls to another server and utilizing Mustache.js for dynamic HTML templates. $.getJSON(url, function(data, textStatus, xhr) { $.each(data, function(i, data) { ...

jqueryjsonajaxgetjsonmustache

Change the location of an HTML element within the page structure

Let's consider having 3 elements like this: <h1>Hello</h1> <p>hello</p> <h1>Hello</h1> I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexib ...

javascripthtmlcss

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...

jqueryhtmlcss

What happens to CSS specificity when JavaScript is used to change CSS styles?

When JavaScript modifies CSS, what is the specificity of the applied styles? For example: document.getElementById("demo").style.color = "red"; Would this be deemed as inline styling? ...

javascriptcsscss-specificity

Looping through multiple AJAX calls

I have come across numerous questions on this topic, but I am still struggling to find a solution that will make my code function correctly. There is a specific function for calling AJAX that I am unable to modify due to security restrictions. Here is how ...

javascriptjqueryajaxjsonfor-loop

Pressing the button on the form has no effect

I am testing a login screen using NodeJS, but I am facing an issue where the submit button does not redirect to the dashboard screen as intended. What could be missing in the code? The submit button should direct to the dashboard screen that I have created ...

javascripthtmlnode.js

Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript? The desired outcome is a div containing two font awesome icons aligned to the right side. Specifically, I am looking for: - Icon of a pen that reacts on mouse hover - Icon o ...

htmlcssbuttonhover