Glossary with floating alphabet in HTML

Question

I am learning html and need to create a glossary like above. The requirements are:
- the alphabet must always appear on top.
- when we click on a certain letter, that letter must not be underlined any more, and when we click on another letter, the recent clicked letter is underlined again, the new clicked letter is not underlined any more.

I am planning to split windows into 2 divs:
- divright for the picture
- divleft consists of 2 smaller div: lefttop for the alphabet, leftbottom for the content
But I still dont satisfy the requirements: the alphabet part is always shifted and I tried a lot of methods mentioned in stackoverflow to remove underline after clicking but it still does not work. Please give me a hint or even better with code! Many thanks! :)

this is my code:

    .divright {
        position:fixed;
        margin: 0px;
        float: right;
        width: 200px;
        height: 100%;
        top: 0em;
        right: 0em;
        border: 1px solid green;
    }
    .divleft {
        margin-right: 200px;
        overflow: hidden;
        border: 1px solid blue;
    }
    .leftop {
        border: 1px solid;
        height: 70px;
    }
    /*center a div in another div */
    #innertop { 
        margin-left: 10px;
        width:415px;
        margin: 0 auto;
        border: 1px solid;
    }
    .leftbottom {
        border: 1px solid;
    }
    #innerbottom { 
        padding-left: 10px;
        width:415px;
        margin: 0 auto;
        border: 1px solid
    }
    header {
        font-size: 20pt;
    }
    body {
        margin:0px;
    }
    a:link {
        text-decoration: underlined;
    }
    a:visited {
        text-decoration: none !important;
    }

<div id="parent">
    <div class="divright">
  <img src="http://www.vectorsland.com/imgd/l52363-free-spring-background-76076.jpg" style='width:200px;height:100%'/>
 </div>

 <div class="divleft">
  <div class="lefttop">
   <div id="innertop">
    <header><b>Glossary</b></header><br>   
    <span style='font-size:15pt'><b>
    <a href="#a">A</a>&nbsp;&nbsp;
    <a href="#b">B</a>&nbsp;&nbsp;
    C&nbsp;&nbsp;D&nbsp;&nbsp;
    <a href="#y">Y</a>&nbsp;&nbsp;
    <a href="#z">Z</a></b></span>
   </div>
  </div>
  
  <div class="leftbottom">
   <div id="innerbottom">
    <p><a name="a"><b>A</b><br>
    <b>Alorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br>
    <b>Alorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto
    sit, ut et res adiatem sequasit quia quia peria solest<br>
    </a></p>
    <br>
    
    <p><a name="b"><b>B</b><br>
    <b>Blorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br>
    <b>Blorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br>
    </a></p>
    <br>
    
    <p><a name="y"><b>Y</b><br>
    <b>Ylorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br>
    <b>Ylorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto sit, ut et res adiatem sequasit quia quia peria solest<br>
    </a></p>
    <br>
    
    <p><a name="z"><b>Z</b><br>
    <b>Zlorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br>
    <b>Zlorem ipsum</b><br>
    Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br>
    </a>
    </p>
   </div>   
  </div>
 </div>
</div>

Welcome to Stack Overflow! Your question will be easier to answer if you can create a Minimal, Complete, and Verifiable example. [How to create a Minimal, Complete, and Verifiable example?](http://stackoverflow.com/help/mcve) — Cel Skeggs, May 28 '16 at 22:00
I guess you are using javascript. Could you add it to your question ? — dtlvd, May 28 '16 at 22:02
@CelSkeggs Is that what we're supposed to comment in all newb questions? — Joe Thomas, May 28 '16 at 22:16
@wateriswet Not necessarily. I commented that because it seemed that, if they took it seriously, it might either solve their problem or help others solve their problem more effectively. It's not standard language or anything, if that's what you're asking. — Cel Skeggs, May 28 '16 at 22:19
@CelSkeggs: thank for your idea, I planned to use jfiddle but i can not put 3 links into the post. According to Louys's hint, the problem with underline link is solved. Could you help me to solve problem with shifted Glossary part when we click a letter ? I try to simplify my code here: https://fiddle.jshell.net/tjz5tsjz/ — learner, May 29 '16 at 10:33
@dtlvd: no, I have not used javascript yet. But according to Louys's hint i added it into my code. Could you please help me to solve problem with shifted Glossary when we click a letter ? https://fiddle.jshell.net/tjz5tsjz/ — learner, May 29 '16 at 10:35
@learner : I've seen the jsfiddle you did with the help of Louys. The problem of underline is solved then ? If I understood well, your new problem is to fix the text joined to the letter clicked at the top of the text section ? — dtlvd, May 29 '16 at 18:53

score 0 · Accepted Answer · edited May 23 '17 at 12:24

To modify the underlining of a clicked anchor, it's easy with jQuery.

If you don't already use it, add this between <head> and </head>:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

Add a class to each letters like this:

<a href="#a" class="glossar">A</a>&nbsp;&nbsp;
<a href="#b" class="glossar">B</a>&nbsp;&nbsp;

Then place this script just before </body>:

<script>
$("a.glossar").click(function(){
        $("a.glossar").css({"text-decoration":"underline"});    // <-- Set all the anchors to be underlined.
        $(this).css({"text-decoration":"none"});    // <-- Sets the clicked anchor to NOT be underlined.
});
</script>

-----
EDIT to answer @learner questions. (see comments)

«Where to place» your script:

It depends on when do you want the script to be executed while the page renders.
So I can't tell you where to always place it.

For this script here, the page must have rendered all the glossar tags before execution of the .click() function, wich is executed only once, on load of the page.

It attributes the inner function to all glossar tags.
It's that inner function that makes your desired effect on underlinings at the onclick event.
See this answer for more details about script positioning within the page.

«Problem with shifted Glossary when we click a letter»

I don't see any problem in your Fiddle.
If you consider that the descriptions of the last letters, like the letter Z, not aligning on top of the window is a problem:

It's not a scripting problem, it's normal HTML behavior.
Your page is just not long enought!

To just add a couple line returns at the end of your page will fix this.

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

OR, which is a cleaner solution :

Instead of multiple <br> at the end of the page, you could set body style definition like this:

body{
    margin: 0 0 2000px 0;    /* 2000px is taller than most big screens, should be enought. ;)  */
}

Margin values are in this order: top right bottom left.

-----
SECOND EDIT (see comments)
Prior edits are still correct. It's an addition.

Ok I see. You want a fixed top glossary index.
This wasn't clear in your question.

Add these 7 new lines to your style definition:

.lefttop {              /* <-- added a "t" here... Was missing */
    border: 1px solid;
    height: 70px;
    position: fixed;    /* Fixes this div position */
    z-index: 1;         /* Attributes a "layer" index */
    top: 0;             /* Place it at 0px from top of the window */
    left: 0;            /* Place it at 0px from left of the window */
    width: 100%;        /* Take 100% width inside it's parent div */

}
.leftbottom {
    border: 1px solid;
    z-index: 0;         /* Attributes a "layer" index */
    margin-top: 70px;   /* sets a top margin, so the A definition will not always be "under" the glossary index */
}

Higher indexes are "on top".

Then, with the updated script I'm proposing below, you don't need a tag on the definitions.
But you still need a reference to get to it.
Place it on the p elements as an id.

Change all "letter" lines from:

<p><a name="a"><b>A</b><br>

to:

<p id="a"><b>A</b><br>

Here is an updated script, now including a scrollTop action.

$("a.glossar").click(function(e){
    // Make definition scroll to top.
    e.preventDefault();                     // Prevents from doing the normal behavior of an anchor click event
    target=$(this).attr("href");        // Grabs the href attribute of the clicked anchor
    targetOffset=$(target).offset().top;    // Finds the position of the target in the page
    $("body").scrollTop( targetOffset-70 );      // Scrolls the BODY to the targets offset minus 70px from the top ( 70px is your defined glossary height )

    // Underlining effect on glossary links
    $("a.glossar").css({"text-decoration":"underline"});    // <-- Sets all the anchors to be underlined.
    $(this).css({"text-decoration":"none"});    // <-- Sets the clicked anchor to NOT be underlined.
});

thank a lots Louys. I just have learnt HTML for a few days, i still don't touch jquery yet :) although I know that is a very strong library. I need to design an offline interface so I have downloaded that jquery version to a local directory and change the path to link jquery. However, when i put above javascript code before , it does not work. But when i put it just before , it works well. Could you tell me a little bit about the position of the javascript code and the hint for problem with shifted Glossary when we click a letter? My new code: https://fiddle.jshell.net/tjz5tsjz/ — learner, May 29 '16 at 10:29
No, that is not what I mean Louys. I mean when we click on letter "Y", the block "Glossary" will be shifted into above, and we can not see that block any more. Now I need: when we click letter "Y", we will see both blocks: block "Glossary" still remain on top and lower block begins with letter "Y" as normal behaviour. Pls see this http://i.stack.imgur.com/U09wv.png & http://i.stack.imgur.com/JrwO8.png — learner, May 29 '16 at 18:05
I edited my answer for this new requirement... Which WAS in the original question, but unclear. ;) — Louys Patrice Bessette, May 29 '16 at 19:13
thank a lots Louys. You are so enthusiastic, I am sorry I am new member and I don't have enough reputation to upvote your answer. :( btw, when i add your new code, the windows does not shift into the desire letter anymore. I don't know why https://fiddle.jshell.net/tjz5tsjz/1/ — learner, May 29 '16 at 19:54
I edited. I was misusing the `.scroll()`. Typed it by heart the first time. ;) Also, notice the `.lefttop{` class in your style definition. It was missing one 't'. — Louys Patrice Bessette, May 29 '16 at 21:02

Glossary with floating alphabet in HTML

1 Answers1