When a page initially loads I have a hidden iframe and other visible ones. Then when a button is clicked I need to hide one that was previously visible, then unhide another (actually I need to set the src attribute too on the one that is becoming visible, but I'll tackle that next). I don't want to refresh the entire page (hence the return false below).
The code below does not display the red iframe2 upon the button click. Can you tell me why?
<form>
<h1>Test</h1>
<input type="submit" id="search" value="Search" />
</form>
<iframe id="frame0" style="background-color: blue" height="200" width="800" ></iframe>
<iframe id="frame1" style="background-color: yellow" height="200" width="800" ></iframe>
<iframe id="frame2" style="visibility: hidden; background-color: red" height="200" width="800" ></iframe>
<script type="text/javascript">
$(document).ready(function(){
$( "#search" ).click(function(event) {
$("#frame1").hide();
$("#frame2").show();
$('#frame2')[0].contentWindow.location.reload(true);
return false;
});
});
</script>
User disply insted of visibility edit, your frame2 as below :
<iframe id="frame2" style="display: hidden; background-color: red" height="200" width="800" ></iframe>
Here is working jsfiddle :
https://jsfiddle.net/keval/vqyczm7a
jQuery's .show() and.hide() work with the CSS display property, as oppose to the visibility property.
.show() = css('display', 'block')
.hide() = css('display', 'none')
However, you can use .toggle() to either hide or show an element based on it's current state. I think this is what you would require, as you'd like to hide the one that was previously visible.
You'd need to change your iframe visibility style to use display instead
<iframe id="frame2" style="display: none; background-color: red" height="200" width="800" ></iframe>
Then instead of showing and hiding the iframes, use .toggle()
$( "#search" ).click(function(event) {
$("#frame1").toggle();
$("#frame2").toggle();
$('#frame2')[0].contentWindow.location.reload(true);
return false;
});
See my working example: https://jsfiddle.net/o2gxgz9r/14250/
Related
Problem
I want to check a checkbox when an iframe is clicked. Normally I would just use an label around the input. And this works for images, text and others. But it doesn't seem to work for iframes?
Here is a fiddle
Here's my code
<form>
<label>
<iframe src="http://yx-ads6.com/banner_show.php?section=General&pub=836169&format=468x60&ga=g" frameborder="0" scrolling="no" width="468" height="60" marginwidth="0" marginheight="0"></iframe
<input type="checkbox">
</label>
</form>
I would make using an element above the iframe like this:
HTML
<form>
<label>
<span></span>
<iframe frameborder="0" scrolling="no" width="468" height="60" marginwidth="0" marginheight="0" style="background-color: #fff"></iframe>
<input type="checkbox">
</label>
</form>
CSS
span {
width: 468px;
height: 60px;
position: absolute;
opacity: 0;
}
here a jsfiddle about this code.
Basically the click event is within the iframe not the label, so the input is not checked.
You can do this with JS. Look at this answer: https://stackoverflow.com/a/32138108/4556503
I have an image that is inside a div.
The image is a play button.
On top of the image I have placed an iframe which is invisible.
When I click the image I want the iframe to appear and start playing
ok i think i found a code that is supposed to do the same thing but i cant make it work
<img src="http://www.plaisio.gr/Images/Promo/20140808-Promo-Turbo-X-Pi/turbox-pi_promo_v01_03.jpg" alt="" style="display:block;" name="video" id="video" height="272" width="495"> <iframe id="promo_video" src="" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:175px;left:344px;" frameborder="0" height="272" width="495"></iframe>
<script type="text/javascript">
$('img#video').click(function(){
$(this).parent().parent().find('#promo_video').attr('src','http://player.vimeo.com/video/102923007?autoplay=true');
$(this).parent().parent().find('#promo_video').fadeIn('slow');
})
</script>
but its not working.... any help??
i found a simmilar working example here http://www.plaisio.gr/Campaign/20140808-Turbo-x-Smartphone-P.htm
In your html you dont need the button, just add onclick="myFunction();" to your <img>
In your css you should only have display:none, not visibility: hidden
In you javascript document.getElementsByClassName("video") returns an array. Try this:
function myFunction() {
var x = document.getElementsByClassName("video")[0];
x.style.display = "block";
}
Check it out here: jsFiddle
Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */
I've something like this
<div draggable="true">
<iframe width="640" height="360" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ?fs=1&feature=oembed" frameborder="0" allowfullscreen="">
</iframe>
</div>
and I want to be able to drag the entire div when I start the drag by clicking anywhere on the div including the iframe. However the iframe doesn't cascade the event. I also want to keep the interactions with the youtube video possible (play, fullscreen, etc).
Does anyone have any idea how to do this with html/css/js/jQuery?
here you have a near example you want....just fix it a little
#dra
{
width:560px;
height:315px;
border:1px solid green;
cursor:pointer;
}
#dra:hover iframe
{
z-index:-1;position:absolute;
}
<div id="dra"><iframe width="560" height="315" src="http://www.youtube.com/embed/T6s3d2wdXVg" frameborder="0" allowfullscreen></iframe></div>
<script>
$( "#dra" ).draggable({stop: function() {
$( "iframe" ).css('z-index','0');
}});
</script>
<input type= "button" value="Print" onclick="return PrintReport()" class="lbutton"/>
<iframe frameborder="0" height="768px" width="95%" id="loader" src="" name="loader"/>
function PrintReport()
{
document.getElementById('loader').contentWindow.document.execCommand('Print',false,null);
return false;
}
iframe name loader containing aspx page(html table report)
on click of button print is sucess but when i preview in pdf format.
then html report misses their border color and background color.
i check settings in ie 8 allow background color and images.
How i get table border color and background color after print.
Try using inline CSS for border color.
style="border: 5px solid #333"
I can't recreate your scenario to be sure, but I've had many style issues occur when I've inadvertently "self closed" an iframe element. It is not a self closing element. It's worth trying...
Instead of :
<iframe frameborder="0" height="768px" width="95%" id="loader" src="" name="loader"/>
Do this:
<iframe frameborder="0" height="768px" width="95%" id="loader" src="" name="loader"></iframe>