Grow your CSS skills. Land your dream job.

jQuery navigation problem

  • # January 19, 2010 at 10:01 am

    Hey guys,

    I´m really a jQuery noob and i´ve got a (for me) big problem with my navigation. Everytime i click on a sub-menu and wanna load content stuff the with php, the sub-menu will be closed. Any idea how i let it open? (by the way sorry for my english :D)

    $(".proj").click(function() {
    $("div.sub_proj").toggle("slow");
    $("div.sub_cour").hide("slow");
    $("div.sub_publi").hide("slow");
    $("div.sub_stud").hide("slow");
    $("div.sub_team").hide("slow");
    });

    This is how my navigation works ( I know it´s realy bad to make it this way, but as I said, I´m a real noob at jQuery ).

    <a href="#"><h3 class="proj">Projects</h3></a>

    <div class="sub_proj">

    <p>
    <a href="#">MPEG Query Format</a>
    <br><br>
    <a href="index.php?view=jpsearch">JPSearch</a>
    <br><br>
    <a href="index.php?view=theseus">THESEUS</a>
    <br><br>
    <a href="index.php?view=w3c">W3C Activities</a>
    <br><br>
    <a href ="index.php?view=mpeg7">MPEG-7 Multimedia Database</a>
    </p>

    </div>

    and this is how it looks in my index.php

    if you cant imagine what i mean please visit https://www.dimis.fim.uni-passau.de/iris/ and click on the navigation on the right side and then click on a sub-menu like projects. At publications it works fine because i fill the content with jquery and not with php.

    Rob
    # January 19, 2010 at 11:24 am

    Hey :)

    Firstly – you have this the wrong way round: <a href="#"><h3 class="proj">Projects</h3></a>

    you need to put your inline element (the a tag) inside the block element (the H3 tag). This is what I would do:

    <h3 class="proj"><a href="#">Projects</a></h3>

    Then I would edit the first line of your jQuery to reflect this:

    $(".proj a").click(function() {

    also you will notice if you click another item and there is a little scroll on the page, the page will jump to the top. You can get rid of this by adding a "return false" to the end of your little jQuery…


    $("div.sub_stud").hide("slow");
    $("div.sub_team").hide("slow");

    return false;

    });

    Ok the problem you are facing is that the page is reloading, and so is the script… so you need a way to pass the information on to the next page… you should use $.post, or look into it… but to do it I would rethink your script a little…

    edit: I would also look at reworking your sidebar, you should really make it out of UL’s it would be a lot more useful… and no BRs. for example:

    # January 20, 2010 at 4:04 am

    Hi Robskiwarrior,

    thanks for your annotation :) I´ll try to correct it.

    # January 20, 2010 at 10:42 am

    Hey rob ^^

    do you have an example for the $.post function? Would help me a lot :>

    Rob
    # January 20, 2010 at 6:04 pm

    You could have a look here:

    http://api.jquery.com/jQuery.post/

    :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".