I am trying to switch iframes in html which contains video references. Kindly help me with this. Actually i want to check the value i pass through textarea and then according to that value i want to switch frames.
HTML
<iframe id="i1" name="iframeswitch" src="nice-to-meet-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i3" name="iframeswitch" src="your-name.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i2" name="iframeswitch" src="deaf-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i4" name="iframeswitch" src="you-work-where.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
i made these iframes display:none; in my css. and i want them to be displayed in a div named virtual.
javascript
<script>
function myFunction() {
var text=document.getElementById('me').value;
if(text="nice to meet you")
{
document.getElementById('i1').style.display="block";
}
else if(text="are you deaf")
{
document.getElementById('i2').style.display="block";
}
else if(text="what is your name")
{
document.getElementById('i3').style.display="block";
}
else if(text="where you work")
{
document.getElementById('i4').style.display="block";
}
else
{}
}
</script>
Your code is a great example why not to use inline CSS, imagine one day you find out your iframe should be width:600px; instead of 500 ...harsh time.
You don't need 4+ iframes, but only one.
<input id=me type=text>
<iframe id=myIframe scrolling=no frameborder=0>Get a Browser</iframe>
CSS:
#myIframe {
float : left;
position : relative;
height : 350px;
width : 500px;
margin-left : -25px;
}
Now, having only one iframe you can build an Object with your associations:
var text2src = {
"nice to..." : "nice.html",
"want some" : "want.html",
"good night" : "night.html"
};
and on input change you can than modify the iframe src:
var me = document.getElementById("me");
var ifr = document.getElementById("myIframe");
me.oninput = function(){
var val = this.value.toLowerCase();
if(text2src.hasOwnProperty(val)) ifr.src = text2src[val];
};
Related
I have a bit of code that automatically starts a video after clicking on an overlay image. The trouble is that the after clicking, the entire page moves up to the top while video plays further down the page. What is the cause and how can I prevent that from happening and allow the video to play where it is originally clicked?
Here is a link to the codepen (scroll down to see video): https://codepen.io/NewbCake/pen/qMMQZo
It depends on Jquery and Fitvids
Thank you for any help!
HTML
<section>
<div class="video-intro">
<div class="image">
<div class="play-button btn"></div>
<a href="#" id="btn_play" class="btn">
<img src="http://placekitten.com/960/540" alt="play video" />
</a>
</div>
<iframe src="https://player.vimeo.com/video/66991893?api=1&title=0&byline=0&portrait=0&color=57c0d4" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
CSS
section {
display:grid;
grid-template-columns:10vw 500px;
margin-top:300px;
}
/* video intro */
.video-intro {
grid-column: 2 ;
box-shadow:0px 0px 7px #ddd;
margin:0 auto 50px !important;
width:90%;
position:relative;
max-width:960px;
.image {
position:absolute;
top:0;
left:0;
z-index:20;
img {
width:100%;
height:auto;
}
JS
$(function(){
var $parent = $('.video-intro'),
$f = $parent.find('iframe'),
$image = $parent.find('.image'),
f = $f[0],
url = $f.attr('src').split('?')[0];
window.addEventListener('message', function(e){
var d = JSON.parse(e.data);
}, false);
$('.btn').click(function(){
var $t = $(this);
runCommand('play');
$image.hide();
});
function runCommand(cmd){
var data = {method : cmd};
f.contentWindow.postMessage(JSON.stringify(data), url);
}
// fitvids
$('.video-intro').fitVids();
});
Try using javascript: instead of # :
<a href="javascript:" id="btn_play" class="btn">
i am trying to open different iframe windows by assigning iframe src to a variable ,
when the page initially loads it should show only two buttons on the page , when i click on the button , an iframe should get loaded depending on which button is pressed , i tried doing something like this to create buttons and creating iframes , but it is not working
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="whatnext">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x = "Hello!";
function showX() {
var whatnext;
if b1.onclick==true
whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"
elseif b2.onclick=true
whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;"
}
</script>
and another piece of trial is
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x ;
function showX() {
src="https:http://stackoverflow.com";
}
b1.onclick = function() {
x = "http://stackoverflow.com;
showX();
};
b2.onclick = function() {
x = "www.sitepoint.com";
showX();
};
</script>
You just need to change the src attribute of the iframe on click. I added the src to the buttons usind the data attribute.
Here is the example http://jsfiddle.net/8wLm42ns/2/
The HTML
<button class="loadiframe" id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button class="loadiframe" id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
jQuery
$('.loadiframe').on('click', function(){
var src = $(this).data('src'),
width = $(this).data('width'),
height = $(this).data('height');
$('#frame').css({
width: width,
height: height
}).attr('src', src);
});
For javascript solution try this http://jsfiddle.net/8wLm42ns/3/
The HTML
<div class="loadiframe">
<button id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
</div>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
javaScript - add in head section
function iframeChange() {
var buttons = document.querySelector(".loadiframe"),
iframe = document.getElementById('frame');
buttons.addEventListener("click", function (e) {
iframe.src = e.target.dataset.src;
iframe.width = e.target.dataset.width;
iframe.height = e.target.dataset.height;
});
}
window.onload = iframeChange;
Try this solution, at click on a button you load the webpage on a specific iframe, no jquery required.
JSBIN here
http://jsbin.com/gebelatomiya/1/
<!doctype html>
<html>
<head>
<script>
function loadFrame (elm){
var frame1 = document.getElementById('frame1');
frame1.src = elm.dataset.src;
}
</script>
</head>
<body>
<button id="b1" data-src="http://www.w3schools.com" onClick="loadFrame(this)">Button 1</button>
<button id="b2" data-src="http://www.sony.com" onClick="loadFrame(this)">Button 2</button>
<iframe id="frame1" scrolling="no"></iframe>
</body>
</html>
I didn't initially expect to need to call in anything but Iframes but clearly I was wrong. here is my code and you can see why its breaking its the script inside the script-/script whats a way to get around this?
$ad_blocks =
array(
array(
'<iframe data-aa="16301" src="//ad.a-ads.com/16301?size=728x90" seamless frameBorder="0" scrolling="no" style="width:728px; height:90px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe>',
'<iframe data-aa="16302" src="//ad.a-ads.com/16302?size=468x60" seamless frameBorder="0" scrolling="no" style="width:468px; height:60px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe>',
'<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>',
),
array(
'<div><script type="text/javascript" src="http://ads1.qadabra.com/t?id=290bf071-762b-4000-9599-32f9a3daf628&size=728x90"></script></div>',
'<div><script type="text/javascript" src="http://ads1.qadabra.com/t?id=d7f3bbc3-9ef1-4558-98a1-4c8051e2dc99&size=468x60"></script></div>',
'<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>',
),
);
//Get a random ad block, and store it in $rotate.
$random_key = mt_rand(0, count($ad_blocks) - 1);
$rotate = $ad_blocks[$random_key];
//These units contain the ad codes for the three sizes.
$ad_size1 = $rotate[0];
$ad_size2 = $rotate[1];
$ad_size3 = $rotate[2];
?>
<div class="col-lg-7">
<div class="A-Ads-Container">
<script>
//This function makes sure the code is executed after page is loaded.
if ($(window).width() >= 768) {
$('.col-lg-7, .A-Ads-Container').html('<?=$ad_size1?>');
} else if (($(window).width() < 800) && ($(window).width() >= 500)) {
$('.col-lg-7, .A-Ads-Container').html('<?=$ad_size2?>');
} else {
$('.col-lg-7, .A-Ads-Container').html('<?=$ad_size3?>');
}
</script>
</div>
</div>
Though I'm not sure exactly what you're trying to accomplish, you are weaving tags, and this will cause unpredictable behavior. For example, this array element
<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>
should instead be
<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe></div>
Notice the order of the closing div and iframe tags.
I want to remove the script which i wrote that nakes the use of the class i.e. UiUx3DSSVFlow. Without hardcoding this internal class, how to make use of their parent #thumbs?
I should not any more make use of the specific classes in my script. In the future those classes could change to any other class name. I need the same functionality in another way without using the internal class names
HTML:
<!--Thumbs Image-->
<div id="thumbs">
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{
border:1px solid red;
width:100%;
}
#thumbs div{display:inline-block; }
#larger{
border:1px solid black;
width:100%;
}
#larger div{display:inline-block; }
jQuery:
function thumbs(i,incr){
var num_thumbs=2;
if(i===null){
i=$("#thumbs").prop('data-index'),
i+=num_thumbs*incr;
}
i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
$("#thumbs").prop('data-index',i);
$('#thumbs .UiUx3DSSVFlow').hide();
$('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
var that=this;
$('.t'+that[0]).click(function(){
thumbs(null,that[1]);
});
});
$('.tprev').click();
http://jsfiddle.net/T657N/33/
jsFiddle demo
review your HTML, CSS knowledge before jumping into JS!
You cannot have multiple ID inside one document!
A div element (as it's by default a block element) does not need the width:100%;
display: inline-block is best suitable and xbrowser for <span> elements, for other browsers you'll need to use some sort of hax like:
display:inline-block;
*display:inline;
zoom:1;
HTML:
<div id="thumbs">
<div>
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{border:1px solid red;}
#thumbs div{display:inline;}
jQuery:
var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;
function display(){
c= c===-1? tDivsN-1 : c%tDivsN;
$tDiv.hide().eq(c).show();
}
display();
$('.tprev, .tnext').on('click',function(e){
e.preventDefault();
var myCLass= $(this).hasClass('tnext') ? c++ : c--;
display();
});
I have an iframe in a page and i want to get the current url for that iframe and update an input text with that url.
I found that i can get the url for the iframe using
document.getElementById("iframe_id").contentWindow.location.href
<iframe id="iframe" name="iframe" src="" width="100%" height="100%" style="border-width: 0px; border-color:#ffffff; border-style: solid;" scrolling="no" border="0" class="auto-style1" frameborder="0" marginheight="0" marginwidth="0"> </iframe>
<script type="text/javascript">
var link = document.getElementById("iframe").contentWindow.location.href ;
document.Show.link.value = link;
</script>
<strong>link for the iframe :</strong>
<input name="link" type="text" size="100" />
<a onclick="document.all.iframe.src=''" href="url" target="iframe">LINK</a>
that didnt work.
I dont know how to use it and update input text with that url every time the ifram's url changes
iframe url may change if some one clicks on link inside it
best regards,
Your iframe code is wrong. There it comes :
<iframe id="iframe" src="url_of_your_iframe" ... ></iframe>
<input type="text" id="input" />
<script type="text/javascript">
(function() {
document.getElementById('input').value = document.getElementById('iframe').src;
})();
</script>
That's it.
Edit : wait, your iframe's url changes when? how?
NOTE: You cannot access elements of an IFRAME (including contentWindow) if page within the IFRAME belongs to a different domain than the parent page due to Same Origin Policy (Quote from - Yuriy Galanter)
However here's a simple and basic browser that uses keyup to search; maybe it'll come in handy for you.
If you decide to add buttons to go forward and back in history you can use history.back();, and history.forward(); for that particular purpose.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
span.style {
cursor: pointer;
font-family: Sans-Serif;
font-size: 1.5em;
font-weight: bold;
padding: 0 .5em;
color: #666;
}
span.style:hover {
color: #999;
}
span.style:active {
color: #000;
}
input#goto {
width: 80%;
font-family: Sans-Serif;
font-size: 1.25em;
}
iframe#browsensearch {
width: 100%;
height: 90%;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$("#goto").click(function() {
$(this).select();
});
$("#bing").click(function() {
var sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://www.bing.com/";
$("#goto").val("bing.com");
});
$("#goto").keyup(function(e) {
var val = $(this).val(),
sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://" + val;
});
});
</script>
<form name="sites" align="center">
<span id="bing" class="style">Bing</span>
<input id="goto" type="text" placeholder="http:// added by default" />
</form>
<iframe id="browsensearch" src="http://theextinctionprotocol.wordpress.com/2013/10/01/large-fireball-seen-acoss-six-midwestern-states/" width="100%" height="100%" allowtransparency="true" frameBorder="0">
Your browser does not support IFRAME's
</iframe>