13 Replies - 4509 Views - Last Post: 28 January 2013 - 04:58 AM

#1 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

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
Is This A Good Question/Topic? 0
  • +

Replies To: div indicator on navBar

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3397
  • View blog
  • Posts: 9,607
  • Joined: 08-June 10

Re: div indicator on navBar

Posted 28 December 2012 - 03:04 AM

what do you have so far?
Was This Post Helpful? 0
  • +
  • -

#3 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

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.
Was This Post Helpful? 0
  • +
  • -

#4 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

Re: div indicator on navBar

Posted 04 January 2013 - 03:14 AM

anyone can help?
Was This Post Helpful? 0
  • +
  • -

#5 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 215
  • Joined: 25-April 11

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?
Was This Post Helpful? 0
  • +
  • -

#6 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

Re: div indicator on navBar

Posted 04 January 2013 - 04:13 AM

View PostAnthonidas, 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?


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 ;)
Was This Post Helpful? 0
  • +
  • -

#7 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 215
  • Joined: 25-April 11

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?

This post has been edited by Anthonidas: 04 January 2013 - 02:26 PM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3397
  • View blog
  • Posts: 9,607
  • Joined: 08-June 10

Re: div indicator on navBar

Posted 04 January 2013 - 06:31 PM

View PostAnthonidas, on 04 January 2013 - 10:18 PM, said:

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.

sounds like position: fixed;
Was This Post Helpful? 0
  • +
  • -

#9 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

Re: div indicator on navBar

Posted 05 January 2013 - 02:46 AM

View PostAnthonidas, 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?


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 :D 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....
Was This Post Helpful? 0
  • +
  • -

#10 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 215
  • Joined: 25-April 11

Re: div indicator on navBar

Posted 05 January 2013 - 04:28 AM

View PostDormilich, on 05 January 2013 - 02:31 AM, said:

View PostAnthonidas, on 04 January 2013 - 10:18 PM, said:

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.

sounds like position: fixed;


Of course, but this was just a little description how it should be at the end, not his problem... ;) lol

View Posttraverso85, 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
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 :D/> 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....


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.
Was This Post Helpful? 0
  • +
  • -

#11 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

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?
Was This Post Helpful? 0
  • +
  • -

#12 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 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 :yes:
Was This Post Helpful? 0
  • +
  • -

#13 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

Re: div indicator on navBar

Posted 26 January 2013 - 05:04 AM

View PostSpAm101, on 07 January 2013 - 05:21 AM, said:

If it's online, a link to the page would probably be easier to work with :yes:/>

sorry if response only now. have made some code on jsfield, obviusly here work good :D, but in my script the underline flashes during the scroll.
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
Was This Post Helpful? 0
  • +
  • -

#14 traverso85  Icon User is offline

  • New D.I.C Head

Reputation: -6
  • View blog
  • Posts: 36
  • Joined: 02-August 12

Re: div indicator on navBar

Posted 28 January 2013 - 04:58 AM

problem solved ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1