Responsive jQuery Layout

Glenn Glenn's Blog 0 Comments

When we created our client site VP Speech Language we wanted to make the home page differ to the other pages in layout, but to reunify it in mobile view – in this case the menu needed to shift from the middle of the home page back to the top in mobile view. There are ways of doing this in CSS but adding loads of CSS seemed a less pragmatic way to do it. Our response was to use jquery:-



<script type="text/javascript">
jQuery(document).load(jQuery(window).bind("resize", listenWidth));

   function listenWidth( e ) {
      // if window width responsive and div present on 'home' - choose your own div only present on the specific page
       if(jQuery(window).width()<767 && jQuery(".home-headline").length > 0)
       {
         jQuery("#navbar").remove().insertAfter(jQuery("#branding"));
       }

     else if(jQuery(window).width()>767 && jQuery(".home-headline").length > 0)
       {
         jQuery("#navbar").remove().insertAfter(jQuery("#contentbox"));
         }

     else {
       // silence
       }
   }
// Invoke the resize event immediately
  jQuery(document).ready(listenWidth);
</script>

What the jQuery does is listen to the page width on ‘resize’ and if it is less than 767px (and on a page with a specific div i.e. .home-headline)  it takes the navigation ‘.nav-menu’ and inserts it after a header div (#branding). When the page resizes to more than 767px it then puts it back. A  simple addition of the jQuery document ready declaration on the base to evoke the responsive layout on load and not just window resize. Otherwise when the user opens initially in mobile view (i.e. not resizing the window) the responsive action immediately loads. View it in action on the client home page here:

Further enhancements

We used the  PageLines framework to build the client site and whilst we like it a lot we like to extend its capabilities further. An issue we found is that the responsive Pagelines menu lacked the text tag ‘menu’ next to it, so the code below uses jQuery to Prepend’ the specific words to the menu in the responsive layout.



<script type="text/javascript">
jQuery(document).load(jQuery(window).bind("resize", addMenu));

function addMenu( e ) {
 // add menu

if( jQuery(window).width() < 767
 && jQuery(".nav-collapse.collapse").html().length > 0
 && jQuery(".nav-menu").length == 0){
 jQuery('<span class="nav-menu">menu</span>').prependTo(jQuery('.navbar-content-pad'));
}

 // remove menu if present
 else if(jQuery(window).width()>767 && jQuery(".nav-menu").length > 0) {
 jQuery('.nav-menu').remove();
 }

 else {
 // silence
 }
 }
// Invoke the resize event immediately
 jQuery(document).ready(addMenu);
</script>

You can view this on the same site as the above. Note when the page is responsive below 767px the responsive menu kicks in and the word memu is placed before it.

About the Author
Responsive jQuery Layout Responsive jQuery Layout 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *