I have an iframe links within an html page as shown below:
<TABLE border="0" width="900">
<tr valign="top">
<td width="300" ALIGN=center>
<div class="item_list">
link
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232779171598318' frameborder = 0, height=250, width = 300 > </iframe></a><br>
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232785207215857' frameborder = 0, height=250, width = 300 > </iframe>
Now when i click within an iframe link , it open the link, but when i click back, it automatically redirect me to that iframe link. Can anyone suggest me what's the problem i'am having?
In your case I would implement my own controls for each iframe. Delegate this work to some buttons on your page instead:
<div id="view_iframe">
<iframe id="viewer" name="viewer" width="100%" height="600" src="some.html">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id="back" class="button" onClick="viewer.history.back();" value="<<" />
<input type="button" id="frwrd" class="button" onClick="viewer.history.forward();" value=">>" />
</div>
note - viewer is iframe id
note that both buttons, are positioned absolutely to align with iframe on page resize.
anyway, here are what the iframe controls for this:
// For an iframe's window
iframe.contentWindow.history.back();
iframe.contentWindow.history.forward();
or
iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1); // forward
Related
I have a function where onclick, I want the iframe to append to another div within my website. So when the user clicks 'watch-youtube-video', this will then grab the iframe from 'youtube-video' and append just the src to the 'fixed-player' iframe src.
I have tried using the below jQuery but I am hitting an error. Could anyone please help?
HTML
<div class="fixed-player"><iframe src=""></div>
<div class="span-row wow scale-anm all animated">
<div class="portal-img ">
<div class="youtube-video">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/10zsTgv8MxA?autoplay=1&mute=1&controls=0&showinfo=0&autohide=1&loop=1" allowautoplay="" allowfullscreen="" data-origwidth="100%" data-origheight="100%" style="width: 0px;">
</iframe>
</div>
</div>
<div class="portal-cont ">
<div class="top-cont ">
<div class="main-button grey-btn watch-youtube-video">
Watch Video
</div>
</div>
</div>
</div>
jQuery
$('.watch-youtube-video').on('click', function(){
$('.overlay').fadeIn();
$('.youtube-viewer-pop').fadeIn();
$(this).parent().parent().parent().find("iframe").attr("src").appendTo('fixed-player');
});
To set the src attribute of a jQuery object, you should be using the .attr() method instead, i.e.: .attr('src', <SOURCE>) instead:
const src = $(this).parent().parent().parent().find("iframe")[0].src;
$('.fixed-player').attr('src', src);
Currently, the frame is on top of each other and some showed even if I did not choose it.
<div>
<div>
<iframe src="index2.php" width="100%" height="100%" name="index2"></iframe>
</div>
<div>
<iframe src="profile.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
nothing will display first then if I select one the other is hide till I select it. the display should be on the same spot/place. Sorry newbies here.
you should try more go and dive into JQUERY or DOM MANU. If you are new you have to start somewhere
Not tested so excuse any typos but perhaps the following might be of help
<style>
#container > div{display:none}
</style>
<div id='container'>
<div>
<iframe src="index2.php" width="100%" height="100%" name="index2"> </iframe>
</div>
<div>
<iframe src="profile.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
<script>
document.querySelectorAll( 'a[target]' ).forEach( a=>{
a.addEventListener('click',function(e){
e.preventDefault();
document.getElementById('container').querySelector( '[name="'+this.getAttribute('target')+'"]').parentNode.style.display='block';
});
})
</script>
A simple demo to illustrate the showing of the iframe. If this is not as intended please clarify the question
/*ifsrc1.php*/
<?php
echo " I am the iFrame source for index2";
?>
/* ifsrc2.php */
<?php
echo " I am the iFrame source for profile";
?>
The main page with the hidden iframes
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#container > div{ display:none; width: 80%;height:10rem;border:1px solid red; margin:1rem auto;padding:0 }
</style>
</head>
<body>
<div id='container'>
<div>
<iframe src="ifsrc1.php" width="100%" height="100%" name="index2"> </iframe>
</div>
<div>
<iframe src="ifsrc2.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
<script>
document.querySelectorAll( 'a[target]' ).forEach( a=>{
a.addEventListener('click',function(e){
e.preventDefault();
/* hide all */
document.querySelectorAll('#container > div').forEach( div=>{
div.style.display='none';
});
document.getElementById('container').querySelector( '[ name="'+this.getAttribute('target')+'" ]').parentNode.style.display='block';
});
})
</script>
</body>
</html>
I have embedded a YouTube video in my website like this:
<h2>Some YouTube video:</h2>
<br>
<div style="text-align:center">
<iframe width="420" height="315" src="http://www.youtube.com/embed/zN7VPRoLlzw" frameborder="0" allowfullscreen></iframe><br><br>
<div id="videotip">
<span class="mini"><br>
<img src="../images/tipp.png" alt="" title="" />
SomeText
<br><br>
</span>
</div>
</div>
When I view the htm file locally in my browser, the YouTube video shows up.
However, when I upload the htm file to my webserver and view it, the video area is blank.
Does anybody see which mistake I might have made?
I used this code and it worked for me:
<h2>Some YouTube video:</h2>
<br>
<div style="text-align:center">
<iframe width="420" height="315" src="https://www.youtube.com/embed/zN7VPRoLlzw?ecver=2" frameborder="0" allowfullscreen></iframe><br><br>
<div id="videotip">
<span class="mini"><br>
<img src="../images/tipp.png" alt="" title="" />
SomeText
<br><br>
</span>
</div>
</div>
as you see I did not change anything but the src link, I right click on the video I selected copy embed code and then replace the link in src with it
Hope this helped (:
Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks
Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here
here is my code snippet
<img src="images/home.jpg" height="40" width="150" />
<img src="images/contact.jpg" height="40" width="150" />
and
<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>
now, i was wondering if there is a way that when the client clicks one of the images, the src of the iframe will change??
for example if i click on the second image the src of the iframe will be src="contactus.php"
I think you set a name attribute on the iframe and wrap the images in an a tag with the target attribute to be the same name.
<iframe name="foo" ...></iframe>
...
you could use the javascript library jQuery and then use the click event to capture clicks on the images it could look something like this
$(function(){
$('img').click(function(){
iframeSrc = this.attr('title');
$('iframe').attr('src',iframeSrc);
});
});
and the html could look like this then
<img src="images/home.jpg" height="40" width="150" title="http://google.com" />
<img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>
Or use regular html and use target
<a target="iframe" href="http://facebook.com"><img src="images/home.jpg" height="40" width="150" title="http://google.com" /></a>
<a target="iframe" href="http://google.com"><img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/></a>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>