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>

Answer 1

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.
});

Glossary with floating alphabet in HTML

Question

1 answers

solution1
0 ACCPTED 2016-05-28 22:19:23

Glossary with floating alphabet in HTML

Question

1 answers

solution1 0 ACCPTED 2016-05-28 22:19:23

solution1
0 ACCPTED 2016-05-28 22:19:23