div indicator on navBar
Page 1 of 113 Replies - 13295 Views - Last Post: 28 January 2013 - 04:58 AM
#1
div indicator on navBar
Posted 28 December 2012 - 03:00 AM
Hi, have a little problem on mine web site, have made all site in one page, using jQuery plug-in scrollTo, when click on link in top menu, page scroll to called ID, but now have a problem for underline the name on menu corresponding at viewed ID,there is some script for find the position of some ID in page? have try with offset() from top but it dont work good for mine problem because some divs dont go to top....
Thank's Claudio
Thank's Claudio
Replies To: div indicator on navBar
#2
Re: div indicator on navBar
Posted 28 December 2012 - 03:04 AM
what do you have so far?
#3
Re: div indicator on navBar
Posted 28 December 2012 - 03:11 AM
$('nav ul li a').bind('click', function(event){ var $anchor = $(this); $('html, body') .stop().animate({ scrollTop: $($anchor.attr('href')).offset().top - ($('#fisso').height() + 20) }, 1500, 'easeInOutExpo'); event.preventDefault(); });
this is a code that have use for scroll page at link click.
#5
Re: div indicator on navBar
Posted 04 January 2013 - 04:07 AM
perhaps it's me, but i do not understand what your code has to do with your request? perhaps i did not understand at all your request?
what would you like to do exactly? i understand that it should scroll when you click on a link, but where do you want to have underlines?
what would you like to do exactly? i understand that it should scroll when you click on a link, but where do you want to have underlines?
#6
Re: div indicator on navBar
Posted 04 January 2013 - 04:13 AM
Anthonidas, on 04 January 2013 - 04:07 AM, said:
perhaps it's me, but i do not understand what your code has to do with your request? perhaps i did not understand at all your request?
what would you like to do exactly? i understand that it should scroll when you click on a link, but where do you want to have underlines?
what would you like to do exactly? i understand that it should scroll when you click on a link, but where do you want to have underlines?
thanks for response, i have made a menu in html, and with that function in jQuery when i click in one of that voice, page scroll to relative div that have the name of link.
Now i need to check in some mode how of that divs are visible in viewport, becausse over click at menu link i can scroll the page, and have to add a class at relative li of nav that underline that...
Sorry for my bad english.... and thanks

#7
Re: div indicator on navBar
Posted 04 January 2013 - 02:18 PM
Ok, now after having clarified the problem over PM we can look for a solution 
for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down. When he clicks a link, this link should be marked as active and the page should scroll to the right div containing the name specified in the clicked link.
Ok, there are different ways to mark your menu as active after having clicked on it... but as we are in the jQuery section of the forum I ask you: do you know lavalamp? In fact it does exactly what you want to have with your menu.
Here a link: http://archive.plugi...oject/lavalamp2
Here is an other link explaining how it works and with some demos. Have a look to it: http://www.gmarwaha....-jquery-lovers/
For the scrolling part there are also several plugins, here you have some explained: http://smashinghub.c...ect-plugins.htm
Is this helpful, or would you like to write your own scrolling and activating script?

for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down. When he clicks a link, this link should be marked as active and the page should scroll to the right div containing the name specified in the clicked link.
Ok, there are different ways to mark your menu as active after having clicked on it... but as we are in the jQuery section of the forum I ask you: do you know lavalamp? In fact it does exactly what you want to have with your menu.
Here a link: http://archive.plugi...oject/lavalamp2
Here is an other link explaining how it works and with some demos. Have a look to it: http://www.gmarwaha....-jquery-lovers/
For the scrolling part there are also several plugins, here you have some explained: http://smashinghub.c...ect-plugins.htm
Is this helpful, or would you like to write your own scrolling and activating script?
This post has been edited by Anthonidas: 04 January 2013 - 02:26 PM
#8
Re: div indicator on navBar
Posted 04 January 2013 - 06:31 PM
#9
Re: div indicator on navBar
Posted 05 January 2013 - 02:46 AM
Anthonidas, on 04 January 2013 - 02:18 PM, said:
Ok, now after having clarified the problem over PM we can look for a solution
/>
for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down. When he clicks a link, this link should be marked as active and the page should scroll to the right div containing the name specified in the clicked link.
Ok, there are different ways to mark your menu as active after having clicked on it... but as we are in the jQuery section of the forum I ask you: do you know lavalamp? In fact it does exactly what you want to have with your menu.
Here a link: http://archive.plugi...oject/lavalamp2
Here is an other link explaining how it works and with some demos. Have a look to it: http://www.gmarwaha....-jquery-lovers/
For the scrolling part there are also several plugins, here you have some explained: http://smashinghub.c...ect-plugins.htm
Is this helpful, or would you like to write your own scrolling and activating script?

for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down. When he clicks a link, this link should be marked as active and the page should scroll to the right div containing the name specified in the clicked link.
Ok, there are different ways to mark your menu as active after having clicked on it... but as we are in the jQuery section of the forum I ask you: do you know lavalamp? In fact it does exactly what you want to have with your menu.
Here a link: http://archive.plugi...oject/lavalamp2
Here is an other link explaining how it works and with some demos. Have a look to it: http://www.gmarwaha....-jquery-lovers/
For the scrolling part there are also several plugins, here you have some explained: http://smashinghub.c...ect-plugins.htm
Is this helpful, or would you like to write your own scrolling and activating script?
thanks for response.... i don't know lava lamp, now let see what is, but for now have resolved with this script that i have made
function nav(){ $('header nav ul li a').removeClass('attivo').each(function(index){ var section = $(this).attr('href'); if($(window).scrollTop() >= ($(section).offset().top)-80){ $('header nav ul li a').removeClass('attivo'); $('header nav ul li a[href='+section+']').addClass('attivo'); } if($(window).scrollTop() + $(window).height() == $(document).height()){ $('header nav ul li a').removeClass('attivo'); $('header nav ul li a:last').addClass('attivo'); } }) }
and call the function in the on load function at scroll, it work , that's important

now have to fix this little problem....
#10
Re: div indicator on navBar
Posted 05 January 2013 - 04:28 AM
Dormilich, on 05 January 2013 - 02:31 AM, said:
Of course, but this was just a little description how it should be at the end, not his problem...

traverso85, on 05 January 2013 - 10:46 AM, said:
thanks for response.... i don't know lava lamp, now let see what is, but for now have resolved with this script that i have made
and call the function in the on load function at scroll, it work , that's important
/> but have a little problem that have to resolve, when scroll or click in nav it add relative class good, but whe scroll remvoe class and re add at scroll stop....
now have to fix this little problem....
function nav(){ $('header nav ul li a').removeClass('attivo').each(function(index){ var section = $(this).attr('href'); if($(window).scrollTop() >= ($(section).offset().top)-80){ $('header nav ul li a').removeClass('attivo'); $('header nav ul li a[href='+section+']').addClass('attivo'); } if($(window).scrollTop() + $(window).height() == $(document).height()){ $('header nav ul li a').removeClass('attivo'); $('header nav ul li a:last').addClass('attivo'); } }) }
and call the function in the on load function at scroll, it work , that's important

now have to fix this little problem....
Ok this does the thing, but it should not be in the onload event. Instead it should be in the click and scroll event, as you would like to update your nav-bar when clicking/scrolling somewhere, wouldn't you? So your code is ok but in the wrong event.
#11
Re: div indicator on navBar
Posted 05 January 2013 - 04:46 AM
i have put it in scroll event that is in on load function... not god?
#12
Re: div indicator on navBar
Posted 07 January 2013 - 05:21 AM
If it's online, a link to the page would probably be easier to work with

#13
Re: div indicator on navBar
Posted 26 January 2013 - 05:04 AM
SpAm101, on 07 January 2013 - 05:21 AM, said:
If it's online, a link to the page would probably be easier to work with
/>

sorry if response only now. have made some code on jsfield, obviusly here work good

have added a another sidebar nav, that have some function of top bar, chenge color of li a for section of page are viewing; here is the link.
http://jsfiddle.net/...rso85/d2HaW/25/
Thanks, Claudio
Page 1 of 1