SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast athena's Avatar
    Join Date
    Apr 2002
    Location
    Vancouver, Canada
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery collapse/expand issue

    Hi,
    I'm experimenting with using jquery to alter the main navigation from (what will be) a traditional dropdown menu to an expanding/collapsing menu when the screen width is at a mobile-view level.

    This is the dev site... http://tinytim.adwin.ca/

    And this is the code...
    Code:
    <script type="text/javascript">
        var $j = jQuery.noConflict();    
    
        $j(document).ready(function() {                        
          if($j(window).width() < 650) {                              
          // run this only if screen is less than 650px wide
            $j('.menu-item a').addClass('expand'); 
            $j('.sub-menu').addClass('collapse'); 
            $j(".collapse").hide();
            jQuery(".expand").click(function()
            {
              jQuery(this).toggleClass("active").next(".collapse").slideToggle(50);
            });
          }
        });
    
        $j(window).resize(function() {
          if ($j(window).width() < 650) {
            // do something 
            $j('.menu-item a').addClass('expand'); 
            $j('.sub-menu').addClass('collapse'); 
            $j(".collapse").hide();
            jQuery(".expand").click(function()
            {
              jQuery(this).toggleClass("active").next(".collapse").slideToggle(50);
            });
          } else {
            $j(".sub-menu").css("display", "block");              
          } 
          });
    </script>

    The colour of the background changes as a way of tracking the activity of the media queries. Blue/Yellow represent a "mobile" view and Pink/Green is the "desktop" view.

    Now technically the code as it stands now works because if you simply load the browser at a particular width it will generate the right menu display. However if you scale the browser width from big to small or from small to big and back to small and then click on one of the expanding menu items (either "Design Services" or "Web Services"), it glitches all over the place.

    I'm curious if anyone might have a suggestion on how to make it properly work after resizing.


    Thanks!

  2. #2
    SitePoint Enthusiast athena's Avatar
    Join Date
    Apr 2002
    Location
    Vancouver, Canada
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind. I've opted to abandon this layout option.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •