Deep link to advanced popup examples, iframe re-work

Author: toddparker

docs/pages/popup/index.html

@@ -151,8 +151,10 @@ <h3 class="ui-title">Are you sure you want to delete this page?</h3>
 			<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="../../_assets/images/colorful-city.jpg" alt="Colorful city">
 		</div>
 
-		<p>Learn how to work with scalable images, iframes and videos in popups here:</p>
-		<a href="popup-images.html" data-ajax="false" data-role="button" data-icon="arrow-r" data-iconpos="right">Advanced popup examples</a>
+		<p>Learn how to work with advanced popup techniques: scalable images, iframes and videos in popups here:</p>
+		<a href="popup-images.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Scaling images</a>
+		<a href="popup-iframes.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Map + video iframes</a>
+		<a href="popup-panel.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Overlay panels</a>
 
 		<h2>Calling the popup plugin</h2>
 
@@ -338,7 +340,7 @@ <h2>Note: Chaining of popups not allowed</h2>
 		<p>The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a <code>data-rel="popup"</code> inside a popup will not do anything at all.</p>
 		<p>This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify <code>data-native-menu="false"</code>.</p>
 
-		<div align="right"><a href="popup-images.html" data-ajax="false" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="false" align="right">Advanced popup examples</a>
+
 		</div>
 
 	</div><!--/content-primary -->

docs/pages/popup/popup-iframes.html

@@ -27,18 +27,21 @@ <h1>Popup iframes</h1>
 
 	<div data-role="content" class="ui-body">
 		<div class="content-primary">
+			
+			<h2>Working with iframes in popups</h2>
+			
+			<p>You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.</p>
 
-			<h2 class="ui-title">Advanced popup examples</h4>
-		
-			<div data-role="controlgroup" data-type="horizontal" data-mini="true">
-				<a href="popup-images.html" data-role="button" data-transition="fade">Images</a>
-				<a href="popup-iframes.html" data-role="button" data-transition="fade" class="ui-btn-active">Iframes</a>
-				<a href="popup-panel.html" data-role="button" data-transition="fade">Panel</a>
-			</div>
+			<h2>Video example</h2>
 
-			<h2>Sizing iframes</h2>
+			<p>Here is an example of a 3rd party video player embedded in a popup:</p>
+				<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Launch video player</a>			
 
-			<p>This is the markup of the first example that contains an iframe with a video. The popup will have a 15 pixels padding because of class <code>ui-content</code> and a one pixel border because the framework will add class <code>ui-body-d</code> to the popup.</p>
+				<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
+					<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless></iframe>
+				</div>
+				
+			<p>The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class <code>ui-content</code> and a one pixel border because the framework will add class <code>ui-body-d</code> to the popup.</p>
 
 <pre><code>
 &lt;div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content"&gt;
@@ -47,10 +50,10 @@ <h2>Sizing iframes</h2>
 
 &lt;/div&gt;
 </code></pre>
-			
-			<p>When using an iframe inside a popup it is important to initially <strong>set the width and height attributes to 0</strong>. This prevents the page to break on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use <code>attr()</code> to set the zero values upon the <code>pageinit</code> event.</p>
 
-			<p>Bind to the <code>popupbeforeposition</code> event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function <code>scale()</code> is used to scale down the iframe to fit smaller screens. Expand the section below to view the code of this function.</p>
+			<p>When using an iframe inside a popup it is important to initially <strong>set the width and height attributes to 0</strong>. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use <code>attr()</code> to set the zero values upon the <code>pageinit</code> event.</p>
+
+			<p>Next, bind to the <code>popupbeforeposition</code> event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function <code>scale()</code> is used to scale down the iframe to fit smaller screens. Expand the section below to view the code of this function.</p>
 
 			<div data-role="collapsible" data-content-theme="d">
 				<h3><code>scale()</code></h3>
@@ -114,14 +117,18 @@ <h3><code>scale()</code></h3>
 });
 </code></pre>
 
-			<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button">Video</a>			
 
-			<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
-				<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless></iframe>
-			</div>
+			<h2>Map example</h2>
+			<p>In the second example, an iframe is used to display <strong>Google Maps API</strong>. Using an iframe prevents issues with the controls of the map.</p>
+			
+			<a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Open Map</a>
 
-			<p>In the second example an iframe is used to display <strong>Google Maps API</strong>. Using an iframe prevents issues with the controls of the map. This is the markup of the popup including a right close button:</p>
+			<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
+				<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
+				<iframe src="map.html" width="480" height="320" seamless></iframe>
+			</div>
 
+			<p>This is the markup of the popup including a right close button:</p>
 <pre><code>
 &lt;div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"&gt;
 
@@ -223,12 +230,7 @@ <h3><code>map.html</code></h3>
 });
 </code></pre>			
 
-			<a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button">Map</a>
-
-			<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
-				<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
-				<iframe src="map.html" width="480" height="320" seamless></iframe>
-			</div>
+			
 
 		</div><!--/content-primary -->