javascript - Bootstrap parallax tooltips and smooth scrolling -

i bought template use bootstrap because kind of in hurry, , want edit bit want to. created vertical menu tooltips, tooltips aren't showing. when use exact same code in file works perfectly, think blocking don't know why. have clue?

so, apparently the way localscroll works need specify scroll properties on element containing links scroll designated location. thus, want html change dot menu.

html:

<ul>     <li id="dotlink1">         <h1>first manned flights</h1>         <a href="#top-section">view</a>     </li>     <li id="dotlink2">         <h1>the frameless parachute</h1>         <a href="#section-1">view</a>     </li>     <li id="dotlink3">         <h1>over english channel</h1>         <a id="dotlink3" href="#section-2">view</a>     </li>     <li id="dotlink4">         <h1>about</h1>         <a id="dotlink4" href="#foot-sec">view</a>     </li> </ul> 

then need call localscroll function on container elements tell them links should lead so:

javascript:

<script> jquery(document).ready(function(){     jquery('#topnav, #dotlink1').localscroll(3000);     jquery('#startbtn, #dotlink2').localscroll(5000);     jquery('#dotlink3').localscroll(7000);     jquery('#dotlink4').localscroll(9000);     //.parallax(xposition, speedfactor, outerheight) options:     //xposition - horizontal position of element     //inertia - speed move relative vertical scroll. example: 0.1 1 tenth speed of scrolling, 2 twice speed of scrolling     //outerheight (true/false) - whether or not jquery should use it's outerheight option determine when section in viewport     jquery('#top-section').parallax("50%", 0.1);     jquery('#section-1').parallax("70%", 0.3);     jquery('#section-2').parallax("50%", 0.1);     jquery('#foot-sec').parallax("50%", 0.1); }); </script> 

finally, should remove onload attribute body tag , put want run upon loading of document inside jquery jquery(document).ready() function. since you've got 1 going @ bottom, we'll put code in there.

instead of creating new function, need put window.location.hash inside there. however, alone won't make localscroll work. luckily, localscroll has function prepared listening hash of url. jquery.localscroll.hash(). thus, you'll want change hash first , call so:

javascript:

<script> jquery(document).ready(function(){     window.location.hash = "section-2";     jquery.localscroll.hash();     jquery('#topnav, #dotlink1').localscroll(3000);     jquery('#startbtn, #dotlink2').localscroll(5000);     jquery('#dotlink3').localscroll(7000);     jquery('#dotlink4').localscroll(9000);     //.parallax(xposition, speedfactor, outerheight) options:     //xposition - horizontal position of element     //inertia - speed move relative vertical scroll. example: 0.1 1 tenth speed of scrolling, 2 twice speed of scrolling     //outerheight (true/false) - whether or not jquery should use it's outerheight option determine when section in viewport     jquery('#top-section').parallax("50%", 0.1);     jquery('#section-1').parallax("70%", 0.3);     jquery('#section-2').parallax("50%", 0.1);     jquery('#foot-sec').parallax("50%", 0.1); }); </script> 

here jsbin show in action. (don't 1:1 replace code jsbin code since had make external js/css/image links absolute links resources on web instead of keeping them relative links.)

and last not least, tooltips working, want h1 elements show when you're hovered on buttons. 1 might think put :hover on h1; however, won't work since current state hidden. mouse can never hover on it. 1 might then think put on a tag since that's button; however, won't able use selectors target h1 there since a comes after h1 instead of before. should activate h1 when mouse hovers on parent element, in case li.

css:

nav#primary li:hover h1 {     display:block;     z-index:9999; } 

new jsbin here.