Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › jQuery Question

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 14, 2010 at 3:56 pm #29629
    benkenobi77
    Participant

    So, my menu is working but I have a question about having a jQuery function only load on the initial page view. Right now my little menu load up movement loads everytime you click an item because it refreshes the instance of header.php (in WP) and of course executes the load and all of the menu animation after. So –

    1) How do I change this so when the site first loads that little menu transition but it never happens again.

    2) How can you do this in a broader sense? Like have the background or sidebar do a transition into place when the user comes to the site but upon further navigation the site stays the same?

    Thanks in advance for any help.

    MY LINK: http://abrahamkinney.com/isgood/

    MY JS:

    Code:
    $(function() {
    var d=300;
    $(‘#main_nav a’).each(function(){
    $(this).stop().animate({
    ‘marginTop’:’-42px’
    },d+=150);
    });

    $(function() {
    $(‘#main_nav > li’).hover(
    function(){
    $(‘a’,$(this)).stop().animate({
    ‘marginTop’:’-5px’},170);
    },
    function(){
    $(‘a’,$(this)).stop().animate({
    ‘marginTop’:’-42px’},170);

    });
    });
    });

    MY CSS FOR THE MENU:

    Code:
    #main_nav{
    width: 720px;
    height: 60px;
    list-style: none;
    z-index: 900;
    margin: 0 0 0 225px;
    padding: 0;
    position: absolute;
    }

    #main_nav li{
    width: 97px;
    height: 73px;
    margin-left: 5px;
    float: left;
    display: inline;
    }

    #main_nav li a{
    width: 97px;
    height: 73px;
    margin-top: -5px;
    padding-top: 48px;
    color: #CCC;
    font-size: 95%;
    text-align: center;
    display: block;
    text-decoration: none;
    }

    #main_nav li.page-item-4 a {background: url(images/menubutton_home.png) no-repeat;}
    #main_nav li.page-item-2 a {background: url(images/menubutton_about.png) no-repeat;}
    #main_nav li.page-item-12 a {background: url(images/menubutton_contact.png) no-repeat;}
    #main_nav li.page-item-8 a {background: url(images/menubutton_web.png) no-repeat;}
    #main_nav li.page-item-14 a {background: url(images/menubutton_print.png) no-repeat;}
    #main_nav li.page-item-10 a {background: url(images/menubutton_photo.png) no-repeat;}
    #main_nav li.page-item-6 a {background: url(images/menubutton_illustration.png) no-repeat;}

    MY HTML/PHP (WordPress) FOR THE MENU:

    Code:
    July 19, 2010 at 10:04 am #79947
    dcp3450
    Participant

    you can use the class from the body when on the home page:

    <body class="home page page-id-4 page-template page-template-default">

    you can do something like:

    if($(‘body[class$="home"]’))
    {
    …
    }

    This checks the class attribute to see if home is listed. if so only the code inside the if statement will execute.

    July 19, 2010 at 10:04 am #79948
    dcp3450
    Participant

    side note:

    your header being at the top like that makes me want to keep scrolling up.

    July 21, 2010 at 1:10 pm #80168
    benkenobi77
    Participant

    thanks for the input.

    1) Would it work to put a body class on the menu and remove that class after the first cycle through or would that class just get put back on once the header is refreshed?

    2) Set a cookie and if the cookie is set do not do the menu fade in?

    Where else would my header go? Not sure what you mean by the header at the top part.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.