SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question highlight current link? jQuery?

    I would like to know how to make a link on the side menu stay selected when you have clicked on it?

    Please look here to see what I mean:
    http://flesler.webs.com/jQuery.LocalScroll/

    I have no idea how to do this because it is all within the same page..

    Please can someone show me how to make this work? So when I click on a different section on the left that link would stay selected and change when you click on another section

    Thanks in advance

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this maybe:

    Code JavaScript:
    $('#navigation a').click(function(){
      $('#navigation a').removeClass('selected');
      $(this).toggleClass('selected');
    });

    You'd need to create the corresponding class in CSS though:

    Code CSS:
    a.selected {
      color: red;
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now thats genius! Thank you very much!

  4. #4
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Ok I have another question now continuing on from the last answer and using this site as an example:
    http://flesler.webs.com/jQuery.LocalScroll/

    Basically what happens now with JimmyP's code is when you click on a section on the side menu that link stays highlighted which is great. However when you click on an arrow that is in the sections content area it skips to the next section and the sidemenu link is not highlighted anymore.

    What I am wondering is how to get the side menu section link to stay highlighted and correspond to the correct section when an arrow is pressed?

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The scroll script you're using changes the hash in the URL so we can use that to see what need's to be highlighted...

    Try this:

    Code JavaScript:
    function checkHash(){
        var hash = window.location.hash.replace('#', '');
        if (!$('#navigation a[href=#' + hash + ']').hasClass('selected')) {
            $('#navigation a').removeClass('selected');
            $('#navigation a[href=#' + hash + ']').toggleClass('selected');
        }
        setTimeout('checkHash()', 200);
    }
    checkHash();
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi JimmyP,

    Thanks for helping me. The hash script is not working? I have uploaded the site to a test area which can be viewed here
    Soon as this hash script works I can make it live (just need to add real pictures).
    I would also appreciate it if you could comment on the site in general. If you can see any room for improvement then please let me know your thoughts

    If you view the source you will see this:
    Code:
    <script>
    jQuery(function( $ ){
    	$('#gulaab_menu ul li a').click(function(){
    	$('#gulaab_menu ul li a').removeClass('selected');
    	$(this).toggleClass('selected');
    	});
    	});
    	</script>
        <script>
    	function checkHash()
    	var hash = window.location.hash.replace('#', '');
    	if (!$('#gulaab_menu ul li a[href=#' + hash + ']').hasClass('selected')){
    	$('#gulaab_menu ul li a').removeClass('selected');
    	$('#gulaab_menu ul li a[href=#' + hash + ']').toggleClass('selected');
    	}
    	setTimeout('checkHash()', 200);
    	}
    	checkHash();
    	</script>
    The first script above works but the second is not being picked up?

    Any ideas why this is not working?

  7. #7
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I am currently using:
    jQuery(function( $ ){
    $('a.next').click(function(){
    $('#gulaab_menu ul li a').removeClass('selected');
    $('#gulaab_menu ul li a').toggleClass('selected');
    });
    });

    When you click a.next (View Main Courses >>) it makes all of the menu on the left red.. Any ideas how to get this working?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?

  9. #9
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump...

  10. #10
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some more detail on what I want to acheive.. Maybe I haven't explained enough?

    After clicking view main courses you will see Chief Specialities >> and so when you click Chief Specialities I want Chief Specialities to highlight on the left menu.. You will also see << Starters in the Tandoori page so when you click << Starters I want the Starters link on the left menu to highlight..

    Any ideas how to get this working?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Look at the original code.

    Code javascript:
    $('#navigation a').click(function(){
      $('#navigation a').removeClass('selected');
      $(this).toggleClass('selected');
    });

    The class is being removed from all links, and then being toggled only on 'this' link.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    pmw57 - that jQuery works for my first question I am now trying to do something a little bit different.

    Use this site for example:
    http://flesler.webs.com/jQuery.LocalScroll/

    when you click the arrows >>

    i want the next section on the left menu to change color.. So Section 1-b link should turn red once clicked on >> this will give more of an indication to the user of what page they are on..

    How can this be achieved??

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The link that's clicked on has a fragment identifier, such as #section1b

    You could match the appropriate menu link with something like

    Code javascript:
    var fragment = this.getAttribute('href');
    $('#gulaab_menu a[href=' + fragment + ']').toggleClass('selected');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    wwwwow yes it works! that is truly genius! thank you so much!
    i added removeClass so it the class selected is removed from the old link woohoo!
    Code:
    <script>
    jQuery(function( $ ){
    $('a.next').click(function(){
    $('#gulaab_menu ul li a').removeClass('selected');
    var fragment = this.getAttribute('href');
    $('#gulaab_menu a[href=' + fragment + ']').toggleClass('selected');
    });
    });
    </script>
    That is very clever I thank you again! I am very happy!!!!!

    works like a charm!!!!!

    I have one more question and it is not crucial but it would be good to know if this is possible.....
    If you click on this link:
    http://www.gulaab.co.uk/test/menu.php#korma
    how can korma be highlighted on the left hand menu?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    If you're clicking from within the page then the link could activate an appropriate behaviour for you.

    If someone is going to the page though from somewhere outside, there won't be an onclick event to trap, so you'll need to find some other solution.

    One solution is to call a function every second to check for any change to the fragment identifier on the address bar, and perform do the appropriate action when that occurs.

    The setInterval function lets you call a function on a regular basis
    http://developer.mozilla.org/en/docs...ow.setInterval

    Code javascript:
    setInterval(checkForChangedFragment, 1000);

    And the location hash lets you get the appropriate part of the location bar
    http://www.devguru.com/Technologies/...tion_hash.html

    Although, you may want to limit it to just the fragment identifier and not the search part, so to get just the fragment identifier you would use

    Code javascript:
    function checkForChangedFragment() {
        var fragment = location.hash.split('?')[0];
        window.fragId = window.fragId || '';
        }
        if (window.fragId !== fragment) {
            window.fragId = fragment;
            updateMenu(fragment);
        }
    }

    The updateMenu() function I will leave to be implemented later. Perhaps you may want to try your hand at it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    This is definitely way beyond me.. I added the function checkForChangedFragment to the site and in the error console is this message:
    Error: fragment is not defined
    Source File: http://www.gulaab.co.uk/test/menu.php#curry
    Line: 105
    I also put jQuery(function( $ ){ at the start and end but that didnt work either.. Is this even jQuery

    Code:
    <script>
       jQuery(function( $ ){
       setInterval(checkForChangedFragment, 1000);
    function checkForChangedFragment() {
        var fragment = location.hash.split('?')[0];
        window.fragId = window.fragId || '';
        }
        if (window.fragId !== fragment) {
            window.fragId = fragment;
            updateMenu(fragment);
    		}
    });
    </script>
    I played with the setInterval demo and I can see how that works. I have also looekd at this site but I don't know if its relevant:
    http://plugins.jquery.com/node/2148
    http://nix.lv/history/demo.html#2

    I can brain dump how i think the updatemenu should kinda work/look like?
    Code:
    <script>
    updateMenu(fragment){
    if (.history._callback(location.hash.split('#')[1]);
    }
    </script>
    Obviously I am clueless.. This is untested coz I know it is not going to work..

  17. #17
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I just realized that this isn't working in IE.. Ive tried to get it working but no luck.. Can anyone see why it works in FF and now IE?
    Code:
     jQuery(function( $ ){
    	$('a.next').click(function(){
    $('#gulaab_menu ul li a').removeClass('selected');
    var fragment = this.getAttribute('href');
    $('#gulaab_menu ul li a[href=' + fragment + ']').toggleClass('selected');
    	});
    	});
    When you click View Main Courses >> the next option on the land hand menu should highlight.. Do this in IE7 to see it work for next and previous options.. The class selected isn't working in IE.... Does anyone know why??

  18. #18
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    things go BUMP in the night...

    Any ideas why this doesnt work in IE??


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •