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; }
Related
I have this code in JS:
/*
Video play
=========================== */
$("#ytplayer").css({'opacity':'0','filter':'alpha(opacity=0)'});
$( ".start-video" ).on("click",function(){
$('#ytplayer').fadeTo(900, 1);$( ".video-image" ).fadeOut(800);
return false;
});
$(document).on('click', '.start-video', function () {
$(this).fadeOut(800);
player.playVideo();
return false;
});
And I Have this code in HTML:
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player"></div>
</div>
<button class="start-video"></button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
</div>
I don't know where to paste the iFrame from YouTube. Please help.
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xmVRZr91Qok" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<button class="start-video">Start</button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
All you need to do is to add the iframe tag to your ytplayer Div
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');
});
I am embedding a link into an iframe:
<div class="container hidden" id="timeline" style="position: relative;">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
</div>
It's not occupying the entire window. But it occupies a small rectangle. I played around with other options:
https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
This worked for me:
<!-- Timeline Viewer -->
<div class="container hidden" id="timeline">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" allowfullscreen="true" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
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');
});
Very new to this...
My site http://www.daveknispel.com.au is where I have the issue.
I use jQuery to load html pages into iFrames with a tab system. Their is 2 levels of this, so a similar tab system is used in a html within the iFrame. The problem is when I toggle on the original page the html in the iFrame with the toggle doesn't refresh to its initial state.
Index.html > has |work| |contact| |resume| tabs
within work.html which sits within an iframe on index.html it has a series of images that act as tabs
so if you press a tab say ghostbuster, my ghostbusters portfolio html appears within the frame.
If now you press |work| again I want the iframe to reset to the original work.html
Not sure if this is clear but hopefully.
// JavaScript Document
$("document").ready(function(){
$('#content > div').hide();
$('#content div:first').show();
$('.nav-wrapper ul li:first').addClass('active');
$('.nav-wrapper ul li a').click(function(){
$('.nav-wrapper ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#content > div').hide();
$(currentTab).fadeIn(400).fadeIn('slow');
return false;
});
});
//index.html
<div class="nav-wrapper">
<div class="menu">
<ul>
<li><a class="fill-div" href="#work" onclick="work.html.refresh"><h2>work</h2></a></li>
<li><a class="fill-div" href="#about"><h2>about/contact</h2></a></li>
<li><a class="fill-div" href="#resume"><h2>resume</h2></a></li>
</ul>
</div>
<div id="content">
<div id="work">
<iframe src="work.html" width="860px" height="1380px" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div id="about">
<iframe src="about.html" width="860px" height="1500px" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div id="resume">
<iframe src="resume.html" width="860px" height="1216px" frameborder="0" scrolling="no" seamless></iframe>
</div>
</div>
</div>
//work.html
<div class="nav-wrapper">
<div id="content">
<div class="menu2">
<ul>
<div class="frameProject">
<li><a class="fill-div" href="#metro">
<img src="img/metro.jpg" alt="Metropolitan Hotel">
<h3> Metropolitan Hotel </h3></a></li>
<h4> Web, Print & Digital </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#ghostbusters">
<img src="img/ghostbusters.jpg" alt="Ghostbusters">
<h3> Ghostbusters </h3></a></li>
<h4> Title Sequence </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#uep">
<img src="img/uep.jpg" alt="UEP Pty. Ltd.">
<h3> UEP </h3></a></li>
<h4> Website & Build </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#science">
<img src="img/science.jpg" alt="Science Q and A">
<h3> Science Q and A </h3></a></li>
<h4> Logo Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#gonski">
<img src="img/gonski.jpg" alt="Gonski Review">
<h3> Gonski Review </h3></a></li>
<h4> Infographic Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#mylife">
<img src="img/mylife.jpg" alt="My Life Network">
<h3> My Life Network </h3></a></li>
<h4> Logo & Web Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#gameandwatch">
<img src="img/gameandwatch.jpg" alt="Game and Watch">
<h3> Game and Watch </h3></a></li>
<h4> Design & Programming </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#barnbrook">
<img src="img/barnbrook.jpg" alt="Barnbrook">
<h3> Jonathon Barnbrook </h3></a></li>
<h4> Poster Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#cerberus">
<img src="img/cerberus.jpg" alt="Cerberus">
<h3> Cerberus v Hercules </h3></a></li>
<h4> Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#whenjooturns">
<img src="img/joo.jpg" alt="When Joo Turns">
<h3> When Joo Turns </h3></a></li>
<h4> Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#allstar">
<img src="img/afl.jpg" alt="All Star Karaoke">
<h3> All Star Karaoke </h3></a></li>
<h4> Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#iamlife">
<img src="img/iamlife.jpg" alt="I am Life - Film">
<h3> I am Life Film </h3></a></li>
<h4> Assistant Director </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#owlfarm">
<img src="img/owl.jpg" alt="Owl Farm">
<h3> Owl Farm </h3></a></li>
<h4> Logo Design </h4>
</div>
</ul>
</div>
<div id="metro">
<iframe src="metro.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="ghostbusters">
<iframe src="ghostbusters.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="uep">
<iframe src="uep.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="science">
<iframe src="science.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="gonski">
<iframe src="gonski.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="mylife">
<iframe src="mylife.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="gameandwatch">
<iframe src="gameandwatch.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="barnbrook">
<iframe src="barnbrook.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="cerberus">
<iframe src="cerberus.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="whenjooturns">
<iframe src="whenjooturns.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="allstar">
<iframe src="allstar.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="iamlife">
<iframe src="iamlife.html" width="840px" height="1150px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
<div id="owlfarm">
<iframe src="owlfarm.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
</div>
</div>
</div>
Your solution is a bit convoluted, but here's a way of solving your problem.
// JavaScript Document
$("document").ready(function(){
$('#content > div').hide();
$('#content div:first').show();
$('.nav-wrapper ul li:first').addClass('active');
$('.nav-wrapper ul li a').click(function(){
$('.nav-wrapper ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#content > div').hide();
// Added lines. Reset the iframe src to reload the original contents of the iframe.
var iframe = $(currentTab).find('iframe').get(0);
iframe.src = iframe.src;
$(currentTab).fadeIn(400).fadeIn('slow');
return false;
});
});
This might work:
$( "#tabs" ).tabs( "refresh" );