CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptooltiponload
Jane
Jane

Reputation: 816

Bootstrap parallax tooltips and smooth scrolling

I bought a template to use with Bootstrap because I am kind of in a hurry, and I want to edit it a bit so it does what I want to. I created a vertical menu with tooltips, but the tooltips aren't showing. When I use the exact same code in another file it works perfectly, so I think something is blocking it but I don't know why. Does anyone have a clue?

Upvotes: 1

Views: 3920

Answers (1)

jsea
jsea

Reputation: 4047

So, apparently the way localScroll works is that you need to specify the scroll properties on the element containing the links which will scroll to the designated location. Thus, you will want your HTML to change to something like this for your 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 the 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 you need to actually call the localScroll function on those container elements to tell them where the links should lead to like 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 the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the 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, you should remove your onload attribute from the body tag and put anything you want to run upon loading of the document inside the jQuery jQuery(document).ready() function. Since you've already got one going at the bottom, we'll put the code in there.

Instead of creating a new function, all you need to do is put the window.location.hash inside there. However, that alone won't make localScroll work. Luckily, localScroll has a function prepared for listening to the hash of the URL. This is jQuery.localScroll.hash(). Thus, you'll want to change the hash first and then call that like 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 the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the 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 is a JSBin to show it in action. (Don't 1:1 replace your code with the JSBin code since I had to make all the external JS/CSS/image links absolute links to resources on the web instead of keeping them relative links.)

And last but not least, to get the tooltips working, you want the h1 elements to show when you're hovered over the buttons. One might think to put the :hover on the h1; however, that won't work since its current state is hidden. Thus your mouse can never hover over it. One might then think to put it on the a tag since that's the button; however, you won't be able to use selectors to target the h1 from there since a comes after h1 instead of before. Thus you should activate the h1 when the mouse hovers over its parent element, which in this case is the li.

CSS:

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

New JSBin here.

Upvotes: 3

Related Questions