Bootstrap Tabs with LazyLoading iFrames

by freedawirl

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="https://maps.google.com/maps/api/js?sensor=true&amp;libraries=drawing,geometry"></script>
<script src="http://www.capmetro.org/js/script.js?v=20141023"></script>
<script src="http://www.capmetro.org/planner/js/noTrace.js"></script>
<script src="http://www.capmetro.org/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="http://www.capmetro.org/css/main.css">
<link rel="stylesheet" href="http://www.capmetro.org/css/sched-styles.css">
<div class="container">
    <div class="row">
        <div class="span12">
            <ul class="nav nav-tabs" id="myTabs">
              <li class="active"><a href="#home" data-toggle="tab">Schedules Test</a></li>
              <li><a href="#dpa" data-toggle="tab">DPA</a></li>
              <li><a href="#rn" data-toggle="tab">Antwon</a></li>
            </ul>
            
            <div class="tab-content">
              <div class="tab-pane active" id="home">





<input id="map1st" type="hidden" value="0">
<input id="intUser" type="hidden" value="1">


<ul id="ttsvc" class="tab sMode">
<!-- DESIRED method
	<li class="selected">MetroBus</li>
	<li>MetroRapid</li>
	<li>MetroRail</li>
	<li>UT Shuttles</li>
-->
<!-- clunky WORKAROUND for browser history requirement -->
	<li class="selected"><a>MetroBus</a></li>
	<li><a href="/schedmap/?svc=1" target="_top">MetroRapid</a></li>
	<li><a href="/schedmap/?svc=2" target="_top">MetroRail</a></li>
	<li><a href="/schedmap/?svc=3" target="_top">UT Shuttles</a></li>

	<li class="aux"><a href="/parkandride" target="_top">Park & Rides</a></li>
	<li class="aux"><a href="/schedulebook.aspx" target="_top">Schedule Book</a></li>
	<li class="aux"><a href="/service-area.aspx" target="_top">Service Area</a></li>
	<li class="aux"><a href="/ada-maps.aspx" target="_top">ADA Corridors</a></li>
	<li class="aux"><a...

CSS

/* Styles for screen sizes gte 800px, like desktops */
/* This section has selectors that will have responsive properties in the media query section */

body {
	font-family:arial,helvetica,sans-serif;
	margin: 0px;
	padding: 0px;
}

#pgHdr {
	display:none;
}
#pgHdr button {
	background-color:#eee;
	border:1px solid #ccc;
	border-radius:9px;
	cursor:pointer;
	margin:10px;
	padding:6px 0;
	width:100px;
	font-weight:bold;
}
#btnBack {
	float:left;
}
#btnMain {
	float:right;
}

#leftPane {
	margin:6px 0 0 8px;
	width:580px;
	float:left;
}

#rteBtn {
	margin-top:21px;
	font-size:12pt;
	clear:both;
}

#routeMenu {
	font-size:10pt;
}

#rteTitle {
	background-color: #DEF;
	margin-bottom:-4px;
	font-size:12pt;
	min-height:20px;
}


#ttdir {
	border-bottom: 1px solid black;
	background-color: #DDEEFF;
	margin-top: 16px;
	height:27px;
	position: relative;
  z-index: 10;
}

#tableBox {
	min-height:450px;
}

/* BRT table content */
.timetable * {
	font-size:10pt;
}

#rightPane {
	margin: 5px 0 0 20px;
	float:left;
	display:inline-block;
	/* display:none; */
	/* border:2px solid red; */
}
#map {
	/*width:390px;*/
	width:375px;
	height:566px;
	/*height:550px;
	position:absolute;
	top:68px;
	*/
}
#mapToggle {
	margin:-44px 0 0 0;
	border:none;
	background:none;
	float:right;
	position:relative;
	/* z-index:100; */
	display:none;
}
#mapToggle p {
	margin-top:-3px;
	font-size:7pt;
}
#servalrt {
	width:470px;
}
#imgWait {
	position:absolute;
	z-index:1000;
	background-color:#666;
	padding:10px;
	opacity:0.9;
	filter:alpha(opacity=90);
	border-radius:4px;
	display:none;
	/* left:430px; */
	top:300px;
}


/* MEDIA QUERY - START */

/* Styles for screen sizes less than 800px, like tablets */
@media screen and (max-width: 800px) {
	@media (orientation:portrait) {
		/* body {background-color:#F99} */ /* light red */
		#leftPane, #rightPane {
			width:95%;
			margin:6px 0 6px 20px;
		}
		#leftPane {
			float:none;
			/* position:relative; */
		}
		#rightPane...

JavaScript

$('#myTabs').bind('show', function(e) {  
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if($(paneID+" iframe").attr("src")=="")
    {
        $(paneID+" iframe").attr("src",src);
    }
});