0

I have a web page made of 6 different sections, and a fixed navbar with the titles of each section. When scrolling through the page, the user sees one section, and then the next, etc.

I'd like to make it so that when the user is over a section, the related title in the navbar would go bold, much like in this website where it changes color: http://www.psychologue-paris16.com/

Does anyone know how to do this?

Here's my navbar:

<nav class="navbar navbar-expand-lg navbar-light text-black fixed-top">
  <a class="navbar-brand" href=""><strong>Hélène Levy-Borrel</strong></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor03">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#therapy">Title 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#consult">Title 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#modalities">Title 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#method">Title 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#background">Title 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#contact">Title 6</a>
      </li>
    </ul>
  </div>
</nav>

And my homepage:

<%= render 'jumbotron' %>

<div class="content">
  <%= render 'Section 1' %>
  <%= render 'Section 2' %>
  <%= render 'Section 3' %>
  <%= render 'Section 4' %>
  <%= render 'Section 5' %>
  <%= render 'Section 6' %>
</div>
dbugger
  • 15,868
  • 9
  • 31
  • 33
colinebrlt
  • 15
  • 4
  • Have you looked for similar problems on stackoverflow? https://stackoverflow.com/questions/16625972/change-color-of-bootstrap-navbar-on-hover-link ... I'm assuming you're using bootstrap, but this should work anyway – Jad Dec 28 '20 at 10:38
  • I have, but it's not quite I'm looking for. I don't want to change the color when hovering over the link, I would like to change the color and make the link bold when hovering the section related to the link. I hope what I'm saying is making sense :-) – colinebrlt Dec 30 '20 at 15:52
  • I can think of ways to do this in JavaScript, but not in pure CSS, do you need a pure CSS version? – Jad Dec 30 '20 at 16:35
  • Not at all, JavaScript would work as well if you have any ideas – colinebrlt Jan 01 '21 at 15:35

1 Answers1

1

this does use jquery, but it works quickly and well in almost all circumstances.

my sorttable.js :

var asc = 0;
function sort_table(table, col) {
    $('.sortorder').remove();
    if (asc == 2) { asc = -1; } else { asc = 2; }
    var rows = table.tBodies[0].rows;
    var rlen = rows.length;
    if (!table.tHead) { rlen--; }
    var arr = new Array();
    var i, j, cells, clen;
    // fill the array with values from the table
    // does not like empty rows, so check your haml!
    for (i = 0; i < rlen; i++) {
        cells = rows[i].cells;
        clen = cells.length;
        arr[i] = new Array();
        for (j = 0; j < clen; j++) { arr[i][j] = cells[j].innerHTML; }
    }
    // sort the array by the specified column number (col) and order (asc)
    arr.sort(function (a, b) {
        var retval = 0;
        var col1 = a[col].toLowerCase().replace(',', '').replace('$', '').replace(' usd', '')
        var col2 = b[col].toLowerCase().replace(',', '').replace('$', '').replace(' usd', '')
        var fA = parseFloat(col1);
        var fB = parseFloat(col2);
        if (col1 != col2) {
            if ((fA == col1) && (fB == col2)) { retval = (fA > fB) ? asc : -1 * asc; } //numerical
            else { retval = (col1 > col2) ? asc : -1 * asc; }
        }
        return retval;
    });
    for (var rowidx = 0; rowidx < rlen; rowidx++) {
        for (var colidx = 0; colidx < arr[rowidx].length; colidx++) { table.tBodies[0].rows[rowidx].cells[colidx].innerHTML = arr[rowidx][colidx]; }
    }

    hdr = table.rows[0].cells[col];
    if (hdr.children.length == 0) {
        obj = hdr
    } else {
        obj = hdr.children[0]
    }
    if (asc == -1) {
        // $(hdr).html($(hdr).html() + '<span class="sortorder">▲</span>');
        $(obj).html($(obj).html() + '<span class="sortorder">▲</span>');
    } else {
        //$(hdr).html($(hdr).html() + '<span class="sortorder">▼</span>');
        $(obj).html($(obj).html() + '<span class="sortorder">▼</span>');
    }
}

in the html view:

= javascript_include_tag "sorttable"
:javascript
  function sortTable(n) {
    sort_table(document.getElementById("indextable"), n);
  }
%table.table.table-striped.table-bordered.table-hover.table-sm#indextable
  %thead
    %tr
      %th Select
      %th{onclick: "sortTable(1)"} Sample
      %th{onclick: "sortTable(2)"} Method
      %th{onclick: "sortTable(3)"} Compound
      %th Chart
  %tbody
    <your contents here>
Jad
  • 1,257
  • 12
  • 19