Trouble with responsive web design on iPhone

Discussion in 'Web Design and Development' started by Brendon Bauer, Jan 6, 2013.

  1. macrumors 6502

    Joined:
    May 14, 2007
    Messages:
    343
    Location:
    Good 'ol USofA
    #1
    Back with another question...

    I have a responsive web design set up so that when scaling the browser window down (or viewing on a mobile device: iPhone) the navigation menu changes to something more manageable. The problem is that this works on every page except for one, and even then it works in desktop browsers when scaling the window size down to iPhone sizes, but it does not work on the iPhone.

    You can see the problem here: http://www.summitnorthwest.org/responsive/sermons/

    When viewed in chrome, safari, IE and making the window extremely narrow, you'll see the menu change as it should. When viewing it on an iPhone, you'll notice it changes but does not inherit the styling that it should. Compare that page with another page (http://www.summitnorthwest.org/responsive/) to see the difference in how the iPhone should and should not render it.

    I have narrowed it down to this:

    In order for the mediaElement player to work, I need to include jQuery.js. But doing this is what causes the problem. If I move the .js call to below the navigation, things go back to normal (except I then have a non-functioning mediaElement.

    Code:
    <?php include("../assets/includes/header.php") ?>
    
    	<!-- Basic Page Needs
      	================================================== -->
    	<meta charset="utf-8" />
    	<title>Summit Northwest Ministries</title>
    	<meta name="description" content="">
    	<meta name="author" content="">
    	
    <?php include("../assets/includes/styles.php") ?>
    
    <!-- Media Player -->
    <script src="mediaElement/jquery.js"></script>
    <script src="mediaElement/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="mediaElement/mediaelementplayer.css" />
    <!-- /End Media Player -->
    
    </head>
    <body>
    
    <?php include("../assets/includes/nav.php") ?>
    
    <!-- ============================================== -->
    
    
    <!-- Super Container -->
    <div class="super-container full-width" id="section-content">
    
    	<!-- 960 Container -->
    	<div class="container">
    	
    			<div class="sixteen columns">
    				<h3 id="mp3player">Sermon Player</h3>
    			</div>
    		<div class="sixteen columns">
    			<div class="eight columns alpha" style="margin:15px 0 15px 0">
    					
    					<audio id="player" src="../../sermons/blank.mp3" type="audio/mp3" controls="controls" width="100%">		
    					</audio>	
    					
    					<script>
    					$('audio,video').mediaelementplayer();
    					</script>
    					
    					<script>
    						new MediaElement('player', {
    					    // shows debug errors on screen
    					    enablePluginDebug: false,
    					    // remove or reorder to change plugin priority
    					    plugins: ['flash','silverlight'],
    					    // specify to force MediaElement to use a particular video or audio type
    					    type: '',
    					    // path to Flash and Silverlight plugins
    					    pluginPath: '/responsive/sermons/mediaElement/',
    					    // name of flash file
    					    flashName: 'flashmediaelement.swf',
    					    // name of silverlight file
    					    silverlightName: 'silverlightmediaelement.xap',
    					</script>
    			</div>
    			<div class="eight columns omega">
    				<blockquote>Begin listening by clicking "Play Sermon" under a date below, or download the mp3 and listen later!</blockquote>
    			</div>
    		</div>
    I can't seem to figure out how to resolve the problem :\
     
  2. macrumors member

    Joined:
    Jan 21, 2008
    Messages:
    63
    #2
    What would happen if you left the javascript files at the bottom of the page and changed this
    Code:
    <script>
    	$('audio,video').mediaelementplayer();
    </script>
    to this:
    Code:
    <script>
    $(document).ready(function() {
    	$('audio,video').mediaelementplayer();
     });
    </script>
     
  3. macrumors member

    Joined:
    Jan 21, 2008
    Messages:
    63
    #3
    A few other possibilities:

    -On that page you are including JQuery 1.7 above the media element and jquery 1.6.2 at the bottom. You should just have one jquery per page.

    - You are missing the closing }) on line 198 for the new MediaElement (this should also be moved into the .ready() statement I mentioned above)
     
  4. macrumors 6502

    Joined:
    May 14, 2007
    Messages:
    343
    Location:
    Good 'ol USofA
    #4
    Thanks for the reply! I'm glad you found those missing brackets... had been driving me crazy and I couldn't seem to find them. Thank you!!

    As for the multiple jQuery calls, I had been pondering this for awhile because several js calls are at the very end of the page, yet I needed jQuery called before the media element, otherwise it would not work.

    To fix that, I added some php code to not include the jQuery in the footer if we're on this page, and I left the call to jQuery in the header on this one page. Not very elegant, but did the job. So now we're down to one call in the header now (on this page... everywhere else the js is called in the footer).

    As for the menu, I'm really not sure. I tried the (document).ready as you suggested and at first I thought that did it, but reloading the page on iOS a few times went back to the old behavior. What's odd is that I am starting to wonder if it is more of a problem with how the responsive navigation menu is handled. A few times I have had it work fine on this page on iOS (maybe when the page loaded a lot slower?) but 99.9% of the time when I load the page it does not work.

    Sometimes I move the javascript calls around (before the styles are called, after, in the body of the page, footer, etc) and it seems to have worked for one page load, but then upon refreshing it goes back to plain old drop-down list. Basically I really wouldn't know where to start to debug that...

    I've attached pictures of what it should and should not look like on a small enough mobile device.

    Essentially this is what is happening in styles.css:

    Code:
    /* ======================================================= */
    /* Responsive Nav Queries - Swaps normal Nav with a dropdown menu with the #responsive-nav ID */
    /* ======================================================= */
    
    #responsive-nav{display: none; float: right;}
    #responsive-nav li{clear: both;} 
    
    /* @media only screen 
    and (max-width: 960) {
      .navigation ul.sf-menu  { display: none; }
      #responsive-nav, .chzn-container, .chzn-container div { display: inline-block !important; }
    } */
    
    @media only screen and (max-width: 767px) {
    	
      .navigation ul.sf-menu { display: none;} 
      
      #section-tophat span.subscribe, #section-tophat span.tagline,
      ##section-sub-footer span.copyright, #section-sub-footer span.colophon,
      {float: none; text-align: center;}
      
      header .navigation{margin-top: 10px;}
      
      .flex-direction-nav{display: none;}
      
      #responsive-nav { display: inline-block !important; width: 100% !important; margin-top: 5px;}
      
      #responsive-nav .chzn-container{width: 100% !important;}
      
      #responsive-nav .chzn-container-single .chzn-single, #responsive-nav .chzn-container-single .chzn-single div {padding: 4px 9px;}
      
      #logo, #tagline p, ul.social, ul.social li{text-align: center;}
      
      #tagline p{font-size: 24px; line-height: 28px; padding: 0 10 22px 11px;}
      
      ul.social{margin-bottom: 18px !important;}
      
      a.button.pagination{width: 90% !important;}
      
      ul.social li{
      	float: none; display: inline; 
    			   -moz-opacity:1.0 !important;	    		  
         filter: alpha(opacity=100) !important;
         			    opacity:1.0 !important;
    	}	 
    	
      .flex-control-nav { /* default opacity */
    			  -moz-opacity:0;
         filter: alpha(opacity=0);
         			   opacity:0;     
         			  }
         			  
    }
     

    Attached Files:

  5. macrumors member

    Joined:
    Jan 21, 2008
    Messages:
    63
    #5
    What the $(document).ready(function() { //enter code here}); does is it delays execution of that code until all the resources for the page have loaded. Doing this will allow your jquery file to be at the bottom of the page without causing a problem (and it's a good practice because that script will pause the rendering of your page until it executes).

    In your code, $('audio,video').mediaelementplayer(); is now waiting for the page to load, but the code
    Code:
    new MediaElement('player',...
    is being executed right away as the browser encounters it. You'll want to put this in the same tags as above.

    Also, on line 46, you have a partial closing </a> tag. See http://validator.w3.org to see if there are other errors (many of these will not affect the rendering of your pages, but it's good to see where your page deviates from standards)
     
  6. macrumors 6502

    Joined:
    May 14, 2007
    Messages:
    343
    Location:
    Good 'ol USofA
    #6
    That is what I understood as well, but now you can see what happens in this scenario. The jQuery javascript is at the bottom of the page (I left the media element javascript and stylesheet in the header), but now the mediaelementplayer is not working. I amended the script to include the rest of the code you suggested:

    Code:
    <script>
    	$(document).ready(function() {	
    		$('audio,video').mediaelementplayer();
    
    		new MediaElement('player', {
    			// shows debug errors on screen
    			enablePluginDebug: false,
    			// remove or reorder to change plugin priority
    			plugins: ['flash','silverlight'],
    			// specify to force MediaElement to use a particular video or audio type
    			type: '',
    			// path to Flash and Silverlight plugins
    			pluginPath: '/responsive/sermons/mediaElement/',
    			// name of flash file
    			flashName: 'flashmediaelement.swf',
    			// name of silverlight file
    			silverlightName: 'silverlightmediaelement.xap'
    		});
    	});
    </script>
    Thoughts? And yes, validation is probably a good idea. Thanks again :eek:
     
  7. macrumors member

    Joined:
    Jan 21, 2008
    Messages:
    63
    #7
    Hmm. This script is dependent on jquery, so it needs to be placed after jquery is loaded.
    Code:
    <script src="mediaElement/mediaelement-and-player.min.js"></script>
    Can you move this into the footer or move jquery into the header? If not, I guess we're back where we started.
     
  8. macrumors 6502

    Joined:
    May 14, 2007
    Messages:
    343
    Location:
    Good 'ol USofA
    #8
    I moved that script call into the footer below the call to jQuery to see what happens. Looks like it still doesn't want to initiate the mediaelementplayer. Irritating that the "$(document).ready(function() {" code isn't holding it off long enough... On a positive not, it looks as if the responsive menu is now working 100% of the time on the iPhone as far I can see.

    Hmmmmmm.
     
  9. macrumors member

    Joined:
    Jan 21, 2008
    Messages:
    63
    #9
    Sorry for the poor suggestion earlier. Jquery needs to be loaded before you can call $(document).ready(), as $ is an alias for jquery. As the code is now, jquery has not loaded at that point, so you get a "$ is not defined" javascript error on line 183.
     
  10. macrumors newbie

    Joined:
    Jun 18, 2014
    Messages:
    1
    #10
    jQuery plugin

    I have used a jQuery plugin for intelligent, dynamic layouts that can’t be achieved with CSS alone. You can hide and reveal item elements easily with jQuery selectors and re-order item elements with sorting.
     

Share This Page