javascript - Glossary with floating alphabet in HTML -
i learning html , need create glossary above. requirements are:
- alphabet must appear on top.
- when click on letter, letter must not underlined more, , when click on letter, recent clicked letter underlined again, new clicked letter not underlined more.
i planning split windows 2 divs:
- divright picture
- divleft consists of 2 smaller div: lefttop alphabet, leftbottom content
still dont satisfy requirements: alphabet part shifted , tried lot of methods mentioned in stackoverflow remove underline after clicking still not work. please give me hint or better code! many thanks! :)
this 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 div in 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> <a href="#b">b</a> c d <a href="#y">y</a> <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 id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>alorem ipsum</b><br> edios 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 id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>blorem ipsum</b><br> edios 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 id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>ylorem ipsum</b><br> edios 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 id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>zlorem ipsum</b><br> edios id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> </a> </p> </div> </div> </div> </div>
to modify underlining of clicked anchor, it's easy jquery.
if don't use it, add between <head> , </head>:
<!-- jquery --> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> add class each letters this:
<a href="#a" class="glossar">a</a> <a href="#b" class="glossar">b</a> then place script before </body>:
<script> $("a.glossar").click(function(){ $("a.glossar").css({"text-decoration":"underline"}); // <-- set anchors underlined. $(this).css({"text-decoration":"none"}); // <-- sets clicked anchor not underlined. }); </script>
-----
edit answer @learner questions. (see comments)
«where place» script:
depends on when want script executed while page renders.
can't tell always place it.
script here, page must have rendered glossar tags before execution of .click() function, wich executed once, on load of page.
attributes inner function glossar tags.
it's inner function makes desired effect on underlinings @ onclick event.
see this answer more details script positioning within page.
«problem shifted glossary when click letter»
don't see problem in your fiddle.
if consider descriptions of last letters, letter z, not aligning on top of window problem:
it's not scripting problem, it's normal html behavior.
page not long enought!
to add couple line returns @ end of page fix this.
<br> <br> <br> <br> <br> <br> <br> <br> or, cleaner solution :
instead of multiple <br> @ end of page, set body style definition this:
body{ margin: 0 0 2000px 0; /* 2000px taller big screens, should enought. ;) */ } margin values in order: top right bottom left.
-----
second edit (see comments)
prior edits still correct. it's addition.
ok see. want fixed top glossary index.
wasn't clear in question.
add these 7 new lines style definition:
.lefttop { /* <-- added "t" here... missing */ border: 1px solid; height: 70px; position: fixed; /* fixes div position */ z-index: 1; /* attributes "layer" index */ top: 0; /* place @ 0px top of window */ left: 0; /* place @ 0px left of window */ width: 100%; /* take 100% width inside it's parent div */ } .leftbottom { border: 1px solid; z-index: 0; /* attributes "layer" index */ margin-top: 70px; /* sets top margin, definition not "under" glossary index */ } higher indexes "on top".
then, updated script i'm proposing below, don't need a tag on definitions.
still need reference it.
place on p elements id.
change "letter" lines from:
<p><a name="a"><b>a</b><br> to:
<p id="a"><b>a</b><br> here updated script, including scrolltop action.
$("a.glossar").click(function(e){ // make definition scroll top. e.preventdefault(); // prevents doing normal behavior of anchor click event target=$(this).attr("href"); // grabs href attribute of clicked anchor targetoffset=$(target).offset().top; // finds position of target in page $("body").scrolltop( targetoffset-70 ); // scrolls body targets offset minus 70px top ( 70px defined glossary height ) // underlining effect on glossary links $("a.glossar").css({"text-decoration":"underline"}); // <-- sets anchors underlined. $(this).css({"text-decoration":"none"}); // <-- sets clicked anchor not underlined. });
Comments
Post a Comment