Databases
StackOverflow2013
Postsdbo
POtroubles with jquery menu animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtroubles with jquery menu animation
    text
    copied!<p>I hope you are well!</p> <p>A question on how to clean up the code below. At the moment, it works... almost. The idea is that you can click on any element of the sticky slider on the right, and it will take you to that place in the document - and the little blue ball will follow. You can also scroll and the little blue ball will follow as well.</p> <p>The problems :</p> <ol> <li><p>When I click on a heading below the one where I am, the scrolling works, but the ball does not follow smoothly. How can I get it to go down smoothly, without jerking at each heading?</p></li> <li><p>When I click on a heading above the one where I am, the ball only comes back up to the heading <em>below</em> the one where I am!</p></li> <li><p>The animation does not work at all for the bottom heading "eighth". It also does not work for scrolling - if I scroll to the bottom, the menu stays at heading "seventh".</p></li> </ol> <p>I will be very grateful if you could help! My project is due in two days, and I've been up until 4am every night since the weekend working on it.</p> <p>HTML :</p> <pre><code>&lt;aside&gt; &lt;div id="floating"&gt; &lt;h2 id='nav-title'&gt;&lt;a href='#fb-root'&gt;The Guide&lt;/a&gt;&lt;/h2&gt; &lt;div id='nav-container'&gt; &lt;div id='line-container'&gt; &lt;div id='line'&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id='nav-list'&gt; &lt;ul&gt; &lt;li &gt;&lt;a href="#1" id='1-cat'&gt;First&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#2" id='2-cat'&gt;Second&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#3" id='3-cat'&gt;Third&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#4" id='4-cat'&gt;Fourth&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#5" id='5-cat'&gt;Fifth&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#6" id='6-cat'&gt;Sixth&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#7" id='7-cat'&gt;Seventh&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#8" id='8-cat'&gt;Eighth&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br style="clear:both; font-size:1px;" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/aside&gt; &lt;h1&gt;The Guide&lt;/h1&gt; // stuff here &lt;h2 id="1"&gt;First&lt;/h2&gt; // stuff here &lt;h2 id="2"&gt;Second&lt;/h2&gt; // stuff here &lt;h2 id="3"&gt;Third&lt;/h2&gt; // stuff here &lt;h2 id="4"&gt;Fourth&lt;/h2&gt; // stuff here &lt;h2 id="5"&gt;Fifth&lt;/h2&gt; // stuff here &lt;h2 id="6"&gt;Sixth&lt;/h2&gt; // stuff here &lt;h2 id="7"&gt;Seventh&lt;/h2&gt; // stuff here &lt;h2 id="8"&gt;Eighth&lt;/h2&gt; // stuff here </code></pre> <p>JS :</p> <pre><code>$(document).ready(function() { $("#1-cat").attr("class", "clicked"); $("#nav-title").click(function() { $("#line").animate({ "top": "0px" }, "fast"); if ($("#1-cat").attr("class") != "clicked") { $('#nav-list a').attr("class", ""); $("#1-cat").attr("class", "clicked"); } }); $('#nav-list a').click(function() { var ltop = 40 * parseFloat($(this).attr('id')) - 40; var elementClicked = $(this).attr("href"); var destination = $(elementClicked).offset().top; $('html,body').animate({ scrollTop: destination + 20 }, 600, function() { $("#line").animate({ "top": ltop + "px" }, "fast"); if ($(this).attr("class") != "clicked") { $('#nav-list a').attr("class", ""); $(this).attr("class", "clicked"); } }); }); $('#content h2').waypoint(function(event) { var $el = $(this); $('#nav-list a').attr('class', ''); $('#nav-list a#' + $el.attr('id') + '-cat').attr('class', 'clicked'); var ltop = 40 * parseFloat($('#nav-list a#' + $el.attr('id') + '-cat').attr('id')) - 40; $("#line").animate({ "top": ltop + "px" }, "fast"); }, { offset: '5px' }); }); </code></pre> <p>BONUS : I would <em>love</em> to be able to drag the ball up and down the menu, which would make the document scroll to the heading where I drag the ball to. Mega points to anyone who could give me some tips on how to do that!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload