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
Something like this maybe:
$('#navigation a').click(function(){
$('#navigation a').removeClass('selected');
$(this).toggleClass('selected');
});
You’d need to create the corresponding class in CSS though:
a.selected {
color: red;
}
Now thats genius! Thank you very much!
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?
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:
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();
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:
<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?
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?
anyone?
bump…
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?
Look at the original code.
$('#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.
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??
The link that’s clicked on has a fragment identifier, such as #section1b
You could match the appropriate menu link with something like
var fragment = this.getAttribute('href');
$('#gulaab_menu a[href=' + fragment + ']').toggleClass('selected');
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!
<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!!! :D:D:D
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?
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
setInterval(checkForChangedFragment, 1000);
And the location hash lets you get the appropriate part of the location bar
http://www.devguru.com/Technologies/ecmascript/quickref/location_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
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.
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 
<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?
<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…
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?
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??
things go BUMP in the night…
Any ideas why this doesnt work in IE??