Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 6, 2013, 02:56 PM   #1
Brendon Bauer
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
Trouble with responsive web design on iPhone

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 :\
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Jan 11, 2013, 11:42 AM   #2
woodlandtrek
macrumors member
 
Join Date: Jan 2008
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 is offline   1 Reply With Quote
Old Jan 11, 2013, 11:54 AM   #3
woodlandtrek
macrumors member
 
Join Date: Jan 2008
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)
woodlandtrek is offline   0 Reply With Quote
Old Jan 11, 2013, 04:41 PM   #4
Brendon Bauer
Thread Starter
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
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 Thumbnails
Click image for larger version

Name:	IMG_0293.PNG
Views:	53
Size:	522.4 KB
ID:	389613   Click image for larger version

Name:	IMG_0294.PNG
Views:	38
Size:	508.2 KB
ID:	389614  
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Jan 11, 2013, 05:34 PM   #5
woodlandtrek
macrumors member
 
Join Date: Jan 2008
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)
woodlandtrek is offline   0 Reply With Quote
Old Jan 11, 2013, 05:49 PM   #6
Brendon Bauer
Thread Starter
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
Quote:
Originally Posted by woodlandtrek View Post
...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
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Jan 11, 2013, 06:37 PM   #7
woodlandtrek
macrumors member
 
Join Date: Jan 2008
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.
woodlandtrek is offline   0 Reply With Quote
Old Jan 11, 2013, 07:51 PM   #8
Brendon Bauer
Thread Starter
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
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.
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Jan 14, 2013, 02:21 PM   #9
woodlandtrek
macrumors member
 
Join Date: Jan 2008
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.
woodlandtrek is offline   0 Reply With Quote
Old Jun 18, 2014, 05:06 AM   #10
Jeannemose
macrumors newbie
 
Join Date: Jun 2014
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.
Jeannemose is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Great primer on responsive design fig Web Design and Development 3 Feb 11, 2014 07:08 AM
How many people use MBA13 exclusively for design/web design? dxr808s MacBook Air 4 Jul 11, 2013 12:06 PM
advice on school for graphic design or web design/dev skatementle Web Design and Development 30 Sep 11, 2012 10:03 AM

Forum Jump

All times are GMT -5. The time now is 12:15 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC