Trouble with responsive web design on iPhone

Brendon Bauer · Jan 6, 2013

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 :\

woodlandtrek · Jan 11, 2013

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>

woodlandtrek · Jan 11, 2013

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)

Brendon Bauer · Jan 11, 2013

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;     
     			  }
     			  
}

woodlandtrek · Jan 11, 2013

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)

Brendon Bauer · Jan 11, 2013

woodlandtrek said:
...it delays execution of that code until all the resources for the page have loaded...

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

woodlandtrek · Jan 11, 2013

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.

Brendon Bauer · Jan 11, 2013

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.

woodlandtrek · Jan 14, 2013

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.

Jeannemose · Jun 18, 2014

jQuery plugin

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

Search

Search

Trouble with responsive web design on iPhone

Brendon Bauer

macrumors 6502

woodlandtrek

macrumors member

woodlandtrek

macrumors member

Brendon Bauer

macrumors 6502

Attachments

woodlandtrek

macrumors member

Brendon Bauer

macrumors 6502

woodlandtrek

macrumors member

Brendon Bauer

macrumors 6502

woodlandtrek

macrumors member

Jeannemose

macrumors newbie

Our Staff