Solved

show current page on jQuery animated menu

Posted on 2011-03-24
28
889 Views
Last Modified: 2013-11-11
Hi EE

Im using a jQuery animated menu on a small site and would like to be able to show the current
page by having the animated tab show in the down position rather than returning back to its default state after it has been clicked.

Im using jQuery 1.5.1, Easing 1.3

I have done some digging around  and found something called addcurrent, but my jQuery skills are limited and some assitance is grateful.

This is the testpage.
http://www.testing.meadcroft-nursery.co.uk/

If you need anything further from me just ask

Thanks Dan
$(document).ready(function(){
		
	//Remove outline from links
	$("#animatedNav a").click(function(){
		$(this).blur();
	});
	
	//When mouse rolls over
	$("#animatedNav li").mouseover(function(){
		$(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
	//When mouse is removed
	$("#animatedNav li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})


	});
	
});

Open in new window

0
Comment
Question by:Dan_Lapodo
  • 15
  • 13
28 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35213045
You need to test for active and use this script

http://www.jessenicola.com/blog/jquery-set-active-links-current-url

Something like this - you need to give your links an ID, here the home link gets id="home"
I have not tested the script, but the idea is there
$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1];
   if (currentActive =="") currentActive="home"; 
   
   $("#animatedNav a").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });

  $("#animatedNav a").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });
  
  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
    if $(this).hasClass("active") return; // do not do anything on mouseover an active class
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
  
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});

Open in new window

0
 

Author Comment

by:Dan_Lapodo
ID: 35222664
Thanks for the reply and supplying the link

Ok, Ive been spending a day or so now trying to get this script to work, but no joy, this is what I have for the menu, i added the ID to the a tag, and used the script you posted, is this correct?

 <div id="animatedNav">
      <ul>
      <li class="green">
      <p><a id="home" href="/">Home</a></p>
      <p class="subtext"><a href="/index.asp">back to the front page</a></p>
            </li>
      <li i class="yellow">
      <p><a id="aboutus" href="/about-us/">About</a></p>
      <p class="subtext"><a href="/about-us/">about Meadcroft Nurseries</a></p>
            </li>
      <li class="red">
      <p><a id="nursery" href="the-nursery">The Nursery</a></p>
      <p class="subtext">Get in touch</p>
            </li>
      <li class="blue">
      <p><a id="benefits" href="the-benefits">Benefits</a></p>
      <p class="subtext">what makes us different</p>
            </li>
      <li class="purple">
      <p><a id="contact" href="contact-us">Contact</a></p>
      <p class="subtext">contact us for more</p>
            </li>
      </ul>

    </div>

Is there anything else that needs to be added to the script? I had started looking at CSS solution in maybe changing the active state... some more guidance is needed I feel!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35222898
What I posted IS a sort of CSS solution

Do you have the test page somewhere? The page you posted does not have my code on it
0
 

Author Comment

by:Dan_Lapodo
ID: 35223067
test page: http://www.testing.meadcroft-nursery.co.uk/

From what ive read your script gets the URL of the page, so do the file or folder name need to be named identically to that of the ID?

I also found this, but wasn't sure how to implement it, maybe it would be usefull?

http://stackoverflow.com/questions/302955/active-navigation-with-jquery-cant-apply-a-default-class-to-anchor
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35223713
So my script gave the link active.
Now just DO something with the active link :)

So

$("#animatedNav a").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
        $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
      }
   });

0
 

Author Comment

by:Dan_Lapodo
ID: 35225622
Ok I've tried that and still no joy, I think I see the problem though but dont know how to solve it.

The onclick is attached to the a tag, where as the animation is attached to the li. When you click the a link it moves the text down but doesnt activate the animation.

It also needs to remove the active state when another link is clicked as 'home' is constantly active.

I have left the test page with your script as it is so you can see what i mean.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35225875
Can you try to change the a to li here

$("#animatedNav a").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });

  $("#animatedNav a").click(function(){
0
 

Author Comment

by:Dan_Lapodo
ID: 35225968
I have changed them to li instead, now the home tag doesnt respond when the a tag is clicked, however if you click the li of any dropdown it does!

Here is how the script l;ooks at the moment.

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1];
   if (currentActive =="") currentActive="home";

$("#animatedNav li").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });
  $("#animatedNav li").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
 
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});


0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35225986
My code blocks the currently selected menu item from animating.since I thought that was what you wanted. Is that what is happening now?
0
 

Author Comment

by:Dan_Lapodo
ID: 35226106
No affraid not, can you explain this part, is it name dependent on the URL?

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1];
   if (currentActive =="") currentActive="home";


Do I need that my pages are named home.asp, contact.asp etc
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35226174
The active is dependent on the URL

I split on / and look at the last one

If there is none, I call it home since you have http://www.testing.meadcroft-nursery.co.uk/
as home
But
http://www.testing.meadcroft-nursery.co.uk/about
would give an active page of "about" which means the ID needs to go on the LI and not on the link as
id="about"

HOWEVER I can do this:

var currentActive = pathname[pathname.length-1]+"_li";
if (currentActive =="_li") currentActive="home_li";

and you have have id="home_li", id="about_li"

on the LIs and keep the IDs of the links too

0
 

Author Comment

by:Dan_Lapodo
ID: 35226251
So will it remove the extension ie about-us.asp, its still not playing ball....

this is the nav menu now,

      <ul>
      <li class="green">
      <p><a id="home" href="/">Home</a></p>
            </li>
      <li i class="yellow">
      <p><a id="about-us" href="about-us.asp">About Us</a></p>
            </li>
      <li class="red">
      <p><a id="the-nursery" href="the-nursery.asp">The Nursery</a></p>
            </li>
      <li class="blue">
      <p><a id="the-benefits" href="the-benefits.asp">The Benefits</a></p>
            </li>
      <li class="purple">
      <p><a id="contact" href="contact.asp">Contact Us</a></p>
            </li>
      </ul>


And the code;

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1]+"_li";
if (currentActive =="_li") currentActive="home_li";

$("#animatedNav li").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });
  $("#animatedNav a").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
 
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35226304
Hmm I see only one of the changes from a to li. The second is still a') and I do not see the <li id="about_li"
0
 

Author Comment

by:Dan_Lapodo
ID: 35226342
My apologies here is the ammended li;

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1]+"_li";
if (currentActive =="_li") currentActive="home_li";

$("#animatedNav li").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });
  $("#animatedNav li").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
 
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});


And the navigation, I guess this is how you mean;

      <ul>
      <li id="home_id" class="green"><p><a href="/">Home</a></p></li>
      <li id="about-us_id" class="yellow"><p><a id="about-us" href="about-us.asp">About</a></p></li>
      <li id="the-nursery_id" class="red"><p><a id="the-nursery" href="the-nursery.asp">The Nursery</a></p></li>
      <li id="the-benefits_id" class="blue"><p><a id="the-benefits" href="the-benefits.asp">Benefits</a></p></li>
      <li id="contact-us_id" class="purple"><p><a id="contact" href="contact.asp">Contact</a></p></li>
      </ul>


There is still no change though, I hope im following your code correct?
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35226371
Not correct
home_li not home_id.
0
 

Author Comment

by:Dan_Lapodo
ID: 35226400
replaced the _id with _li

still nothing!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35226413
Ok I'll try later
0
 

Author Comment

by:Dan_Lapodo
ID: 35226438
thank you for your help so far, it would be good to get it solved. I'll keep on trying though, maybe I'll get lucky with it. cheers again
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35226476
It was hard to see on my mobile. You forgot to call the animation and I did not realise I had to put the return in the mouseout too


$(document).ready(function() {
  var pathname = window.location.pathname;
  var pathname = pathname.split('/');
  var currentActive = pathname[pathname.length-1]+"_li";
  if (currentActive =="_li") currentActive="home_li"; 
  $("#"+currentActive).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})


  $("#animatedNav li").each(function(){
    var test = $(this).attr('id');
    if (test == currentActive){
      $(this).addClass('active');
    }
  });
  $("#animatedNav li").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
  
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});

Open in new window

0
 

Author Comment

by:Dan_Lapodo
ID: 35226568
Excellent, now its stopping the animation.. there is a glitch however.

When you are on the homepage thats fine, you click on the home a tag and it reloads the page, the animation is down, thats good.
On the rest of them the animation stops only when the li is clicked, not when the a is, this means that you can click the li on all of the tabs and they all stay down together and you cant reset them other than clicking another link.
Also when you click any other nav link the animation is in the default up position, its only home that is in the down position.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35226599
Ok I'll look tomorrow. We can try moving it all to the link instead of the li and see if the event bubbles up
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 35229525
I think this is better (and way shorter ;)

Please
1) add the id="home" to the home link
2) notice that your "about us" has round corners for some reason
$(document).ready(function() {
  var pathname = window.location.pathname;
  var pathname = pathname.split('/');
  var currentActive = pathname[pathname.length-1];
  if (currentActive =="") currentActive="home"; // home page does not have a path

  $("#"+currentActive+"_li").addClass('active').stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})

  $("#animatedNav a").click(function() { // clicking the link
    // remove the active from previous click on the LI
    if (currentActive) $("#"+currentActive+"_li").removeClass("active");
    // add the active class to the parent LI - we are already animating
    currentActive = $(this).attr("id");
    $(currentActive+"_li").addClass("active");
    //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });

  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});

Open in new window

0
 

Author Comment

by:Dan_Lapodo
ID: 35230117
Oh much better, thank you, the animation stops just where it should, I hate to say it but it only works on the home link, not on any of the others. Does your script remove the file extension, is there a way to test what value the other links give back when the url changes?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35230233
Sorry, I did not notice you changed the actual urls. Missed the fact in one of the earlier posts
They used to be
/
/about
and so on.

Change this
  var currentActive = pathname[pathname.length-1];
to
  var currentActive = pathname[pathname.length-1].replace(".asp","");

0
 

Author Comment

by:Dan_Lapodo
ID: 35230282
Works like a charm.. So if i wanted to use, var currentActive = pathname[pathname.length-1];

that would grab the folder name, and each file was index.asp etc

I can see how you earned the Genius status, thanks for your help, much appreciated!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35230418
Thanks for the kind words. jQuery is not yet my strongest point, so this was a learning experience for me too.
I managed to cut down a lot of the script - I realised that I was doing a lot of work for a simple thing.

To answer your last item:

pathname[pathname.length-1];

will grab whatever is after the last /
so
/
would grab nothing (empty string)
/about
would grab
about
and
/about.asp
would grab
about.asp
which is why we need to remove the .asp to get just about.

0
 

Author Closing Comment

by:Dan_Lapodo
ID: 35230434
Excellent work, can't thank enough
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35230518
You are welcome
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Detecting robots? 5 34
jQuery CSS Scroll Issue 3 34
Phone Dialer 5 37
JavaScript function required for form onfocus and onblur 2 21
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now