Question

I have a very basic jQuery script that slides a title from bottom to top after the page loads. The problem I’m having now is that I need to make this title to only slide if the user is on the ‘main page’. If the user then clicks on any sub-pages I need the title to remain to the top of the page.

Example: wordpress website with a few pages on which I have galleries. When a user enters a page -> animate title. When the user is browsing the gallery -> static title.

This is the jQuery script:

jQuery(document).ready(function () {
jQuery(".animate").addClass("move"); 
});

You can see the website in question here.

// later edit: Thanks everyone for helping! I forgot to mention that I have multiple URLs, there are multiple pages. Is there a way I can get the “current URL” of the page and then append to it the extra bit which will always be the same i.e. /?pid=xx ?

Example: I need to animate the title on pages with this format:

mywebpage/custom_name/

Then, on pages with this format, I need to keep the title static:

mywebpage/custom_name/?pid=xx

Following the answers bellow I made this script:

if(window.location.href == 'http://www.noahd.net/demo-upwall/residential/rooftop-garden/'){
    jQuery(document).ready(function () {
        jQuery(".animate").addClass("move"); 
    });
} else {
    jQuery(document).ready(function () {
        jQuery(".portfolio-title-wrap").removeClass("animate").addClass("top"); 
    }); 
}

This script works only for the /residential/rooftop-garden/ page. Under residential I have another 10 pages. And then I have another 6 pages starting from root, like /commercial/ or /objects which also have 6-10 sub-pages.

How can I adapt the above script to work on those pages and sub-pages but not on the sub-sub-pages?

Answer 1

You can decide behavior of your page based on url.

code:

if(window.location.href== mainapplicationurl){

    // slide code
}
else{
      // put title on top

}

After edit of question. you can decide pages based of count of ‘/’ in url( will work only if url format is consistent).

var count = window.location.href.split("/").length;
jQuery(document).ready(function () {
   if( count < 7 ){        
        jQuery(".animate").addClass("move"); 
   } else {        
        jQuery(".portfolio-title-wrap").removeClass("animate").addClass("top"); 
    }
});