Develop Reference

How to set iframe take the height of content inside that, in a tabbed plane?

I have a tabbed plane in which, onclick it calls a seperate iframe.Initially I have used a fixed height of 1000px. I want to set the height of iframe to the height of content inside it?How can I implement it?
<div class="container-fluid text-center">
<div class="col-sm-12" style="margin-top:120px">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill"
href="#projectOverview">OVERVIEW</a></li>
<li><a data-toggle="pill" href="#projectPosts">POSTS</a></li>
<li><a data-toggle="pill" href="#projectThreads">THREADS</a></li>
<li><a data-toggle="pill" href="#projectMembers">MEMBERS</a></li>
<li><a data-toggle="pill" href="#projectTasks">TASKS</a></li>
</ul>
</div>
<div class="tab-content col-sm-12">
<div id="projectOverview" class="tab-pane fade in active">
<iframe src="projectOverview.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">
</iframe>
</div>
<div id="projectPosts" class="tab-pane fade">
<iframe src="projectPosts.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">
</iframe>
</div>
<div id="projectThreads" class="tab-pane fade">
<iframe src="projectThreads.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">
</iframe>
</div>
<div id="projectMembers" class="tab-pane fade">
<iframe src="projectMembers.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">
</iframe>
</div>
<div id="projectTasks" class="tab-pane fade">
<iframe src="projectTasks.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">
</iframe>
</div>
</div>
</div>

You can use this.contentWindow.document.body on the iframe to get the body of the content (assuming same domain and no sandboxing, etc.) and do something like:
$('iframe').on('load', function() {
$(this).css('height',
this.contentWindow.document.body.offsetHeight + 'px');
});

JQuery hide/show content of multiple divs on click

I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010

The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>

Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>

Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});

Intel XDK template app and iFrames not working

I'm trying to open iFrames within the different tabs of the app. The problem that is happening is that if I place an iFrame in the first tab(page of app), I cannot access any of the tabs below it. But if there is text such as <p>Bla Bla</p> it works fine. If I put the iFrame in the last tab, all of the above work fine. I'm new to html5 cross platform apps, and very new to intel XDK. Thanks in advance.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Grid View App template</title>
<!--
This template can be used for photo app with grid view that will open detail view, for applications like Photo App or Instagram app.
-->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
<link rel="stylesheet" type="text/css" href="appframework/icons.css" />
<script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
<!-- phantom library, needed for XDK "legacy" container api calls -->
<script src="intelxdk.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for XDK "legacy" container CORS -->
<script src="xhr.js"></script>
<script>
var onDeviceReady=function(){ // called when Cordova is ready
if( window.Cordova && navigator.splashscreen ) { // Cordova API detected
$.ui.launch();
navigator.splashscreen.hide() ; // hide splash screen
}
} ;
document.addEventListener("deviceready", onDeviceReady, false) ;
</script>
<script>
$.ui.autoLaunch = false;
$.ui.backButtonText = "Back";
$(document).ready(function(){
$.ui.launch();
});
</script>
<style>
/* CSS responsive square grid */
.grid-photo {margin:3px -7px;}
.grid-photo:after {content:'';display:block;clear:both;}
.grid-photo li {position: relative; display:block; float:left; width: 10%; padding-bottom: 10%;}
.grid-photo .grid-photo-box {position: absolute;left: 3px;right: 3px;top: 3px;bottom: 3px; background-color: rgba(128,128,128,0.2);}
.grid-photo img {width:100%;height:100%}
#media only screen and (max-width : 1024px) {
.grid-photo li {width: 12.5%; padding-bottom: 12.5%;}
}
#media only screen and (max-width : 768px) {
.grid-photo li {width: 16.6%; padding-bottom: 16.6%;}
}
#media only screen and (max-width : 480px) {
.grid-photo li {width: 25%; padding-bottom: 25%;}
}
#media only screen and (max-width : 320px) {
.grid-photo li {width: 33.3%; padding-bottom: 33.3%;}
}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<!--Grid View Page-->
<div class="panel" title="Title" id="gridview" selected="true">
<header>
<h1>Title</h1>
</header>
<div class="grid-photo">
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
<li><div class="grid-photo-box"><img src="" /></div></li>
</div>
<a id="more" class="button block">Load More</a>
</div>
<!--Detail View Pages for each grid items-->
<div class="panel" title="Item 1" id="item1">
<p><iframe width="100%" height="600px" frameborder="0" src="http://www.google.com" /></p>
</div>
<div class="panel" title="Item 2" id="item2">
<p>This is detail view for Item 2</p>
</div>
<div class="panel" title="Item 3" id="item3">
<p>This is detail view for Item 3</p>
</div>
<div class="panel" title="Item 4" id="item4">
<p>This is detail view for Item 4</p>
</div>
<div class="panel" title="Item 5" id="item5">
<p>This is detail view for Item 5</p>
</div>
<div class="panel" title="Item 6" id="item6">
<p>This is detail view for Item 6</p>
</div>
<div class="panel" title="Item 7" id="item7">
<p>This is detail view for Item 7</p>
</div>
<div class="panel" title="Item 8" id="item8">
<p>This is detail view for Item 8</p>
</div>
<div class="panel" title="Item 9" id="item9">
<p>This is detail view for Item 9</p>
</div>
<div class="panel" title="Item 10" id="item10">
<p>This is detail view for Item 10</p>
</div>
<div class="panel" title="Item 11" id="item11">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 12" id="item12">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 13" id="item13">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 14" id="item14">
<p>This is detail view for Item 14</p>
</div>
<div class="panel" title="Item 15" id="item15">
<p>This is detail view for Item 15</p>
</div>
<div class="panel" title="Item 16" id="item16">
<p>This is detail view for Item 16</p>
</div>
<div class="panel" title="Item 17" id="item17">
<p>This is detail view for Item 17</p>
</div>
<div class="panel" title="Item 18" id="item18">
<p>This is detail view for Item 18</p>
</div>
<div class="panel" title="Item 19" id="item19">
<p>This is detail view for Item 19</p>
</div>
<div class="panel" title="Item 20" id="item20">
<p>This is detail view for Item 20</p>
</div>
<div class="panel" title="Item 21" id="item21">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 22" id="item22">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 23" id="item23">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 24" id="item24">
<p>This is detail view for Item 14</p>
</div>
</div>
</div>
</body>
</html>

The problem is related to simple HTML syntax.
Just close the iframe tag and it will work.
I.E.:
<iframe width="100%" height="600px" frameborder="0" src="http://www.google.com"></iframe>
The previous behavior is due to missing closure tag (all the rest of your code was "trapped" inside the previously opened IFRAME).

Jquery mobile snap.js is not working if using data-prefetch="true"

Hi i am new for jquery mobile . I need to add snap.js to my app in order to archive slide menu function.Afer googling i decide to use snap.js. https://github.com/jakiestfu/Snap.js/
Please see my code below
page1.html
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' data-prefetch="true" href="page2.html">Sign in</a>
page2.html
<body>
<div data-role="page" data-title="Panel fixed positioning" id="landingPage" class="snap-content" >
<div data-role="header" data-position="fixed">
<div id="branding">Smart Realtor</div>
Menu
Logout
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<!-- coverstory -->
<div class="coverstory">
<img src="images/cover_story_img.jpg" alt="" class="scale-with-grid"/>
<div class="textbox">
<h1>Cover Story</h1>
<p>Latest pre-launch properties & new launch properties for sale in Kuala Lumpur & Selangor, Malaysia. Our site shows you new property launches for investment .....</p>
</div>
</div><!-- /coverstory -->
<div class="clear"></div>
<!-- main button -->
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-calendar ui-nodisc-icon" id="calendarBtn" ><br>Appointment<br><br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-file-text-o ui-nodisc-icon" id="co-brokingBtn"><br>Co-broking<br>
Agreement</a>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="advertise_group.html" rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-comment ui-nodisc-icon" id="pagroupBtn" ><br>Property Advertisement<br>(Group)</a>
</div>
<div class="ui-block-b">
<br>Property Advertisement<br>(Agent)
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-title="fixed positioning" >
<div data-role="navbar" data-iconpos="top">
<ul>
<li>More Menu</li>
</ul>
</div>
</div>
</div>
<div id="menu" class="panel_bg snap-drawers">
<div class="snap-drawer snap-drawer-left">
<a href="profile.html"><div class="profile_wrapper">
<img src="images/profile_pic.jpg">
<h2>John Smith</h2>
<p>GCS Property Agent</p>
<p class="smalltxt">View Profiles</p>
</div> </a>
<div class="clear"></div>
<ul class="side_navi">
<li class="list-divider" >DISCOVER MORE</li>
<li><img src="css/png/bookmark.png" alt="" class="ui-li-icon ui-alt-icon"/>News & Noteworthy</li>
<li><img src="css/png/book.png" alt="" class="ui-li-icon ui-alt-icon"/>Customer Contact Lisiting</li>
<li><img src="css/png/laptop.png" alt="" class="ui-li-icon ui-alt-icon"/>Team Leader Monitoring</li>
<li><img src="css/png/home.png" alt="" class="ui-li-icon ui-alt-icon"/>Property Listing</li>
<li><img src="css/png/user.png" alt="" class="ui-li-icon ui-alt-icon"/>Tenant Listing</li>
<li><img src="css/png/calendar.png" alt="" class="ui-li-icon ui-alt-icon"/>Appointment Management</li>
<li><img src="css/png/usd.png" alt="" class="ui-li-icon ui-alt-icon"/>Home Loan Calculator</li>
<li class="list-divider" >Miscellaneous </li>
<li><img src="css/png/gears.png" alt="" class="ui-li-icon ui-alt-icon"/>Setting</li>
<li><img src="css/png/envelope.png" alt="" class="ui-li-icon ui-alt-icon"/>Feed Back</li>
</ul>
</div><!-- /panel -->
</div>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('landingPage'),
disable: 'right'
});
</script>
</body>
Everything if working fine if i change the hyperlink to use rel="external"
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' rel="external" href="page2.html">Sign in</a>
Any solution if i want to use data-perfetch="true" inside my hperlink?

Bootstrap side tabbed pane

Hi all I am trying to get an iframe of 500x200 to be on the right side of the tabs.
If the amount of tabs is more than the 200 height then id like to be able to have them be scrollable. Could someone point me in the right direction?
I'l eventually put the iframe in a panel and have the panel the size of col-lg-9 to fill the rest of the space.
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked" id="myTabs">
<li class="active">Home</li>
<li>DPA</li>
<li>Antwon</li>
<li>SSS</li>
<li>Ad</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>test</p>
</div>
<div class="tab-pane" id="dpa" data-src="http://www.google.ie">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
<div class="tab-pane" id="sss" data-src="http://www.reddit.com/">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="ad" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('#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);
}
});
</script>

So, something like this?
#myTabs {float:left; height:200px; overflow:auto; }