d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Onepager Navigation Highlighting Problem.. > Fg For Help! :)
12Next
Add Reply New Topic New Poll
Member
Posts: 4,875
Joined: Jun 11 2007
Gold: 71.00
Jan 27 2013 06:08am
Hello, i have got a problem

http://burgart.aquila.uberspace.de/

this is my website (ofc not finished yet.) and i have got following problem: for example if i scroll to the category "work" i want to highlight "work" in the navigation bar... how can i do it? Actually with java script.. right?

I tryd https://github.com/protonet/jquery.inview / http://remysharp.com/2009/01/26/element-in-view-event-plugin/ this and i am sure it should work! But i don't get it to work.. and i dont know why. Can you help and explain me how to use it on my website?

http://www.kerstin-lohner.de/ this is an example how it should be at the end ( maybe with a little more smoother navigation highlightning. :D )


Thanks in advance! :)
Member
Posts: 4,875
Joined: Jun 11 2007
Gold: 71.00
Jan 27 2013 08:19am
Okay... i just tryed it again and it still not work. Can't edit my post here is the source....

http://www.file-upload.net/download-7118658/burgart_source_code.zip.html

Member
Posts: 2,478
Joined: Jan 4 2007
Gold: 7,545.00
Jan 27 2013 10:16am
You need to use anchor tags for the links, not divs/articles.

aka: <a href="#work">WORK</a>
Member
Posts: 4,875
Joined: Jun 11 2007
Gold: 71.00
Jan 27 2013 10:30am
Quote (DirtyRasa @ Jan 27 2013 04:16pm)
You need to use anchor tags for the links, not divs/articles.

aka:  <a href="#work">WORK</a>



I don't have any problem with the navigation scrolling! It scrolls smooth down/up to the category if i press on any navigation point. I have got a problem with the highlighting of the categorys.

By the way.. maybe i found the problem: [17:27:50.250] ReferenceError: $ is not defined @ /// index.html:52



Code
<script defer src="jquery.inview.js"></script>

<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function() {   //// THIS LINE IS NOT DEFINED.

   $('div.inview').bind('inview', function (event, visible) {
 var ueberwachteElemente = $('div.inview');

 ueberwachteElemente.each(function() {
     vis = $(this).data('inview') || false;
     if(vis) {
   activeId = $(this).attr("id");
   activeMenuItem = $('nav a[href$="'+activeId+'"]');
     }
 });
 activeMenuItem.parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');
   });
});
</script>


Why it says $ is not defined?

This post was edited by rania on Jan 27 2013 10:30am
Member
Posts: 2,478
Joined: Jan 4 2007
Gold: 7,545.00
Jan 27 2013 11:43am

This line

Code
$('div.inview');


means it's looking for divs with the class inview.
So change the articles to divs and add an inview class to them.
Member
Posts: 4,875
Joined: Jun 11 2007
Gold: 71.00
Jan 27 2013 12:01pm
<div id="article1" class="inview">
<h2>Photoshoot Effect</h2>
</div>

<div id="article2" class="inview">
<h2>Photoshoot Effect</h2>
.....
</div>


Like this? I allready did... :/
It still doesn't work ... do i need any "inview" class in my css?

This post was edited by rania on Jan 27 2013 12:02pm
Member
Posts: 11,610
Joined: Oct 28 2008
Gold: 1,795.00
Jan 27 2013 01:18pm
Code
a:active
Member
Posts: 4,875
Joined: Jun 11 2007
Gold: 71.00
Jan 27 2013 02:57pm
Member
Posts: 32,925
Joined: Jul 23 2006
Gold: 3,804.50
Jan 27 2013 03:25pm
don't post zip files on this site. stick to pastebin.

another note, something else is not right with your navigation bar on top


This post was edited by carteblanche on Jan 27 2013 03:25pm
Member
Posts: 4,875
Joined: Jun 11 2007
Gold: 71.00
Jan 27 2013 03:37pm
Yeah I know. :) Thanks for the hint. Actually I am just stucking on this highlight problem.. the source code on my Webpage isn't up to date! :O
I am going to post tomorrow everything on pastebin... :)
Go Back To Programming & Development Topic List
12Next
Add Reply New Topic New Poll