Hello, i just wanted to describe some toughts im having on responsive menus

first of all, i saw this post http://drupal.org/node/1191762 and there was a lot of implementation and best practices discussion.
then i saw this issue http://drupal.org/node/1191762. might be what i need but not sure what was fixed.

So im making a responsive menu this way : narrow-normal - wide users will see a normal drop down menu made with the menu block module. but mobile users will se a nice vertical accordion of the same items, since hovers do not work properly on cellphones.

what i needed to make is to implement a small javascript to make the menu markup behave like an accordion. found something quick on google and then figured out how to implement it. There is a function in/themes/omega/omega/js/omega-mediaqueries.js that writes the current layout class on the body tag, and added my code on it like this:

    var setCurrentLayout = function (index) {
    index = parseInt(index);
    previous = current;
    current = Drupal.settings.omega.layouts.order.hasOwnProperty(index) ? Drupal.settings.omega.layouts.order[index] : 'mobile';
    if (previous != current) {      
      $('body').removeClass('responsive-layout-' + previous).addClass('responsive-layout-' + current);      
      $.event.trigger('responsivelayout', {from: previous, to: current});			
				if (current =="mobile"){
     $('ul.menu li ul.menu').hide();
     $('ul.menu li.nolink span').click(function(e){
          if($(this).parent().hasClass('current')) {
               $(this).parent()
                   .removeClass('current');									 
                   /*.next('ul.menu li ul.menu').slideUp();*/
									 $('ul.menu li ul.menu').hide();
          } else {
               $(document).find('.current')
                    .removeClass('current');
                    /*.next('ul.menu li ul.menu').slideUp();*/
										$('ul.menu li ul.menu').hide();
              $(this).parent()
                    .addClass('current');
										
                    /*.next('ul.menu li ul.menu').slideDown();*/
										$('ul.menu li ul.menu').show();
          }
          e.preventDefault();
      });			
				}else{
				  $('ul.menu li ul.menu').show();	
					}			
    }
  };

That worked as expected... most of the time. when i resize the screen too fast it wont work. but at least if i load it from phones it will show the accordion menu.

what happens is, that im hacking the core and im not sure how to implement something like this on my subtheme js files, or if i should be doing this at all. I would appreciate some insights or ideas if you have been triying to implement something similar, thanks

Comments

bc’s picture

bc CreditAttribution: bc commented
Status: Active » Closed (works as designed)

Ivan,

You can bind to the jQuery global event 'responsivelayout':

jQuery('body').bind('responsivelayout', function() { /* handle event */ } );

The global event is defined in omega-mediaqueries.js with $.event.trigger. Because it's global, you can bind a listener to any object in the DOM.

Hope this helps :)

-ben

2pha’s picture

2pha
Primary language English
CreditAttribution: 2pha commented

I was trying to check for the responsive classes on the body when the page loaded, but couldn't get my javascript behavior to run after the responsive classes were applied.
I bound a function to the responsivelayout event instead.

Thanks Ben

willhowlett’s picture

willhowlett CreditAttribution: willhowlett commented

I'm really stuck on this. Is anyone able to explain it in baby talk for me?

Let's assume I have a simple inline jQuery script in a tpl file. How would I make its execution conditional on the current width of the browser?

e.g.

<script>
    jQuery("#block").click(function (event) {

    // if wider than narrow
        jQuery("#block").addClass('open);

    // else do nothing

    }
</script>

Maybe I'm thinking about it completely wrong? Any advice much appreciated.

2pha’s picture

2pha
Primary language English
CreditAttribution: 2pha commented

@willhowlett
try something like this

jQuery('#block').click(function(event){
  if(jQuery('body').hasClass('responsive-layout-wide') || jQuery('body').hasClass('responsive-layout-normal')){
    // width greater than narrow so do stuff
  }
});
willhowlett’s picture

willhowlett CreditAttribution: willhowlett commented

Knew I was overthinking it! That works perfectly, and honestly I could have sworn I tried that! (actually I think I tried by using a selector ( ('body.responsive-layout-wide') etc.) rather than a straight up 'if or'.

Thanks loads. So useful getting an extra pair of eyes (and a brain!)