1

I have different divs and a menuebar which constis out of LI-elements.

<ul>
    <li><a href="#first" id="nav1" title="Next Section">FIRST</a></li>
    <li><a href="#second" id="nav2" title="Next Section">SECOND</a></li>
    <li><a href="#third" id="nav3" title="Next Section">THIRD</a></li>
    <li><a href="#fourth" id="nav4" title="Next Section">FOURTH</a></li>
</ul>

The names of the div are #first to #fourth.

If one of the DIVs (or more) is/ are in the viewport I want to change the color of the bottom-border for the li-element which links to this DIV.

For example: If DIV #third is in viewport the third LI-element (#nav3) should change its bottom-border to green. If it leaves the viewport it should change to white again.

  • Just for the time the DIV is in the viewport. As soon it leaves the viewport I want to undo the color change.

I tried it with jQuery Viewport: http://www.appelsiini.net/projects/viewport

My problem is that I can't figure out how to use this selector - I know it's basic stuff but I really can't figure it out.

$("#third:in-viewport").each(function() {
    $("#nav1, #nav2, #nav4").animate({ borderBottomColor: '#fff' },800);
    $("#nav3").animate({ borderBottomColor: 'green' },800);
});

Would be awesome if somebody could help me with this. Thanks a lot!

user1658080
  • 631
  • 1
  • 7
  • 18
  • use $("#nav1 #nav2 #nav4").animate({ borderBottomColor: '#fff' },800); remove comma between #nav1, #nav2, #nav4. – SanketS Nov 11 '13 at 10:07
  • What about this? http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 Note that when you're element is out of the viewport(because a event), you could also just hide it and check if it's visible. – nkmol Nov 11 '13 at 10:08
  • 1
    @SanketS That is not going to work because `nav1`, `nav2` and `nav4` are not children of each other. – putvande Nov 11 '13 at 10:08
  • how about adding common class to each **** and then use it – Just code Nov 11 '13 at 10:56

1 Answers1

0

I would add a class to your DIVs, something like:

<div id="first" class="item"> // Your code <div>
<div id="second" class="item"> // Your code <div>
<div id="third" class="item"> // Your code <div>
<div id="fourth" class="item"> // Your code <div>

And then something like this in jQuery, to highlight the links:

$(".item:in-viewport").each(function() {
     var item_id = $(this).attr("id");
     // In viewport
     $("a[href=#" + item_id +"]").animate({ borderBottomColor: 'green' },800);     
     // Not in viewport
     $("a").not("a[href=#" + item_id +"]").animate({ borderBottomColor: '#fff' },800);
});
Teknotica
  • 1,096
  • 6
  • 19
  • Thanks, $("#" + item_id).animate({ borderBottomColor: 'green' },800); refers to the DIV which is in the viewport itself - I would need to access the LI-Element which is the "counterpart" of this DIV. I could change the IDs of the LIs to "navfirst", "navsecond", etc. and then $("#nav" + item_id).animate({ borderBottomColor: 'green' },800); but is there better solution? Thanks! – user1658080 Nov 11 '13 at 10:47
  • Thanks - but how can I make the others which are not inviewport disappear? – user1658080 Nov 11 '13 at 12:46
  • Doesn't work - I need to run the script every time when scrolling the page because DIVs further down the page may come into viewport. I tried it with "$(window).bind("scroll", function(event) {...});" Now the border of the second and first link blink. Drives me crazy haha – user1658080 Nov 11 '13 at 14:18
  • So I thought about it. Lets say DIV 1 and DIV 2 are in the viewport. Isn't it then the problem that it takes the first LI, changes its border to green, then changes all other borders to white and the proceeder starts new with DIV 2. It then overwrites the green border to white and changes LI#2 to green. Souldn't the "$("a").not("a[href=#" + item_id +"]").animate({ borderBottomColor: '#fff' },800);" come AFTER the each function is done? So that the each function changes all LIs and afterward, the LIs that haven't been changed get a whit border? – user1658080 Nov 11 '13 at 15:31