1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jQuery Vericle collapsible meny modification needed

Discussion in 'jQuery' started by abu117, May 2, 2014.

  1. #1
    Please see http://www.daretocompare.ca

    First of all, apologies - I am fairly new at this. I am just starting on this site.

    On the left you will see a menu bar that is using jQuery and is working as expected. However, I would like to make one change. When the page loads, the menus are collapsed. This is great - just what I want. However, when you click on a category, say Automotive, and then click on a sub-category, the menu collapses again. Is there a way to keep the sub menu open after clicking on one of them (staying inside of Automotive) until you click another category ie: cellular phones.

    Any help would be appreciated.

    Abe
     
    Solved! View solution.
    abu117, May 2, 2014 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hello Abe.
    You may want to look deeper into "cookie" and / or "sessionStorage". Then pick and use just one of them, but not both:)
    Either ones should enable your menu to maintain state, in jumping from one page to another.

    Hendra
     
    hdewantara, May 2, 2014 IP
  3. abu117

    abu117 Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thanks for your reply Hendra. But I wouldn't know where to start on that lol. I don't see anything about cookies or sessionstorage in the files supporting this page?
     
    abu117, May 2, 2014 IP
  4. sn3twork

    sn3twork Active Member

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #4
    Hello Abu117,

    From the JQuery Documentation you can make the "Category" for your menu "active" http://api.jqueryui.com/accordion/#option-active

    An easy option for you right now, until you understand session management, is to make the Automotive category active when the Oil Changes, Tires, Detailing, or RV Repair pages are open.
     
    sn3twork, May 2, 2014 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    There are two ways to do. You hide the data and show them on clicking accordingly or load data into that displaying area. There may be other methods but it depends on which one you are going to use.
     
    ketting00, May 2, 2014 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Well, they are not in your files jut yet. They are something for you to read.

    This is one of my best ref. related to cookies I bookmarked long time ago: http://www.quirksmode.org/js/cookies.html. But I'm sure you'll find better ones today. Just try google "read write cookies".
     
    Last edited: May 2, 2014
    hdewantara, May 2, 2014 IP
  7. abu117

    abu117 Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #7
    Appreciate you guys trying to help, but this is just over my head :)

    Here is my current nav.js file:

    $(document).ready(function(){
    $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
    e.preventDefault();
    }

    if(!$(this).hasClass("open")) {
    // hide any open menus and remove all other classes
    $("#nav li ul").slideUp(350);
    $("#nav li a").removeClass("open");

    // open our new menu and add the open class
    $(this).next("ul").slideDown(350);
    $(this).addClass("open");
    }

    else if($(this).hasClass("open")) {
    $(this).removeClass("open");
    $(this).next("ul").slideUp(350);
    }
    });
    });

    Is there something in there I could change to make it work the way I suggested? Open to suggestions :)
     
    abu117, May 6, 2014 IP
  8. #8
    Okay Abe.
    Following code is untested, but just try it. To find which lines are new, compare it to your code.
    $(document).ready(function(){
    
        //some functions from http://www.quirksmode.org/js/cookies.html
        function createCookie(name,value,days){
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
            }
            else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
        }
        function readCookie(name){
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }
       
        //handle future clicks on menu
      $("#nav > li > a").on("click", function(e){
        if($(this).parent().has("ul")){
          e.preventDefault();
        }
        if (!$(this).hasClass("open")){
          // hide any open menus and remove all other classes
          $("#nav li ul").slideUp(350);
          $("#nav li a").removeClass("open");
         
          // open our new menu and add the open class
          $(this).next("ul").slideDown(350);
          $(this).addClass("open");
               
                //save to cookie, which <li> is clicked.
                createCookie('indexToOpenedLi', $(this).parent().index(), 0);
        }
        else{
                $(this).next("ul").slideUp(350);
                $(this).removeClass("open");
            }
      });
    
        //get last <li> clicked saved to cookie and use it to setup menu
        var indexToOpenedLi = readCookie('indexToOpenedLi');
        $('#nav > li').eq(indexToOpenedLi).children('a').click();
           
    });
    Code (JavaScript):
    Hendra
     
    hdewantara, May 6, 2014 IP
  9. abu117

    abu117 Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #9
    Hendra,

    That totally works :) Thank you so so much :)
     
    abu117, May 6, 2014 IP
  10. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #10
    My pleasure... ;)
     
    hdewantara, May 6, 2014 IP
  11. abu117

    abu117 Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #11
    Hendra...me again :)

    All was OK until I added a new menu item (Contact Us)...see this page please: http://daretocompare.ca/index.php

    If you mouse over the link, it shows where it should be going, but nothing happens when clicked upon. My menu structure:

    <nav>
    <ul id="nav">
    <!--Automotive Services and Products -->
    <li><a href="#">Automotive</a>
    <ul>
    <li><a href="oil-changes.php">Oil Changes</a></li>
    <li><a href="tires.php">Tires</a></li>
    <li><a href="auto-detailing.php">Detailing</a></li>
    <li><a href="rv-repair.php">RV Repair</a></li>
    </ul>
    </li>
    <!--Cellular Services and Products -->
    <li><a href="#">Cellular Phones</a>
    <ul>
    <li><a href="#">Cell link 1</a></li>
    <li><a href="#">Cell link 2</a></li>
    <li><a href="#">Cell link 3</a></li>
    </ul>
    </li>
    <!--Contact Page-->
    <li><a href="contact.php">Contact Us</a></li>
    </ul>
    </nav>
    </div>

    Once again I appeal to your vast knowledge (yes, I'm sucking up :) )

    Thanks in advance.

    Abe
     
    abu117, May 7, 2014 IP
  12. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #12
    Hi Abe.

    See http://api.jquery.com/has/

    and it must be related to this block:
    if($(this).parent().has("ul")){
      e.preventDefault();
    }
    Code (markup):
    I also thought that jQuery's has() returns true or false (a Boolean), but it doesn't. It instead returns a set of jQuery objects (an Array). So I think you should refine the if() statement to check the length.
     
    hdewantara, May 7, 2014 IP
  13. abu117

    abu117 Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #13
    Once again, I'm at your mercy....how would I do this? I really don't know what to do here.
     
    abu117, May 8, 2014 IP
  14. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #14
    if($(this).parent().has("ul").length > 0){
    e.preventDefault();
    }


    If I may... just get some sleep and you'll get your full sense back ;)
     
    hdewantara, May 8, 2014 IP
  15. abu117

    abu117 Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #15
    That did it. Thanks so much, again ! And you assume I had any sense to begin with :)
     
    abu117, May 8, 2014 IP
  16. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #16
    Hehe, I was just guessing...
    But seriously, sleep is always the cheapest and best herb.
    Works everytime for me, anytime I lost my senses :)
     
    hdewantara, May 8, 2014 IP