0

I am building a responsive website for just basics such as Desktop, tablet and mobile phone. I have a horizontal menu using a list and for mobile only I have it switch to the three lines menu icon. When clicked a menu overlay panel comes up.

The problem is when I brought the jQueryfiles in needed for the mobile overlay panel the horizontal menu on the other screen sizes stopped working. I tried using jQuery to make a conditional statement if the screen width was under 321 then the script for the jQuery mobile would be called at that point using the getScript. But it doesn't seem to recognize this. Can anyone tell me how to fix this problem. I fairly new at responsive and jquery mobile design.
Thanks

In the header:

<script src="Scripts/jquery-1.11.1.min.js"></script>

<script src="Scripts/jquery.mobile-1.4.2.min.js"></script>



<script>

$(document).ready(function() {
    if ( $(window).width() < 321) { 

      $('#wrapper').css('background-color' , '#ccc');

     /* $.getScript("Scripts/jquery.mobile-1.4.2.min.js");*/
    }
    else {
      $('#wrapper').css('background-color' , '#fff');
    }

 })
 </script>

My horizontal menu:

 <nav id="headerNav" class="lefty">
        <ul>
           <li><a href="index.html">Home </a></li>
          <li><a href="meal.html">Meals</a></li>
          <li><a href="Sandwiches.html">Sandwiches</a></li>
        </ul>
 </nav>

My mobile menu:

 <div id="myPanel" data-role="panel" data-swipe-close="true" 
  data- dismissible="true"  data-position="right">
   <ul id="mobileNavigation">
          <li><a href="index.html">Home </a></li>
          <li><a href="meal.html">Meals</a></li>
          <li><a href="Sandwiches.html">Sandwiches</a></li>

   </ul>
 </div>

Solutions: leave out the jQuery Mobile file

out of the header by itself and instead use either of these:

1. 

$(document).ready(function() {
    if ( $(window).width() <= 320) { 
    $.getScript("../Scripts/jquery.mobile-1.4.2.min.js");
    }



})
</script>

2. 

if (screen.width <= 960) {
   var head    = document.getElementsByTagName('head')[0];
   var script  = document.createElement('script');
   script.type = 'text/javascript';

   script.src  = '/../Scripts/jquery.mobile-1.4.2.min.js';
   head.appendChild(script);
}

</script>
Mosaic
  • 1
  • 2

1 Answers1

0

Check this answer

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}
Community
  • 1
  • 1
user3611630
  • 137
  • 7
  • My code up above does target the mobile screen for changes because the change to the background gray works. However something is wrong with the getScript line of code it isn't calling the jquery.mobile-1.4.2.min.js . I need to have this in the script jquery section but not by itself in the header. Is something wrong with that line of code. Right now I commented it out. – Mosaic Aug 01 '14 at 16:30
  • Turns out my solution was correct my problem is I wasn't testing it properly. I was using a firefox add on that shows different screen sizes when I tested in Multiscreen in Dreamweaver it works. – Mosaic Aug 01 '14 at 18:05