I'm creating a popup which has an iframe to display content from some other website:
<div id="popup-wrapper">
<div id="iframe-wrapper">
<iframe id="register-frame" src="some url" />
</div>
</div>
I want this to be hidden by default and show up when user clicks a button, here's my jquery:
$(document).ready(function() {
$("#popup-wrapper").hide();
$("#iframe-wrapper").hide();
$("#register-frame").hide();
});
Both the outer divs disappear but the iframe does not, what am I doing wrong?
i have no error when i close the tag iframe, your syntax is not good
<iframe id="register-frame" src="some url"></iframe>
Related
In my page having two iframe iframe-menu and iframe-content.
I want to hide iframe-content elements ('.options') on anywhere click event in entire page i.e outside of .options div.
Main Page :
<body>
<iframe src="menu.html" id="iframe-menu" height="100%"></iframe>
<iframe src="content.html" id="iframe-content" height="100%"></iframe>
</body>
content.html in iframe-content
<div class="container">
<div class="options">Hello</div>
</div>
I have use a jquery code. But it's working only when click on current iframe.
$(document.body).click(function(event) {
var target = $(event.target);
if (!target.parents().andSelf().is('.options')) {
$('.options').hide();
}
});
I want to hide div.options on anywhere click on the main page.
Best way is to use .hide()
$('body').click(function(event) {
if (!$(event.target).hasClass('.options')) {
$(".test").contents().find(".options").hide();
}
});
Try setting a class name for the iframe & hide the element using .content().find()
Check JSFiddle
JSFiddle
I have iframe html tag it has an id="FrameDisplay" property and I display other site content in this frame and want to hide the div in frame window, if it is possible, in frame content has class .top-float and i want to hide it.
<div class="row" id="FrameDisplay"> <iframe id="Iframe" src="#" frameborder="0"></iframe> </div>
In my frame window other site display so it possible to hide div using class in JavaScript.
I have a site with several embedded YouTube videos using iframes. I hide all of them to start, they're being covered up by a thumbnail image. They need to show when the thumbnail image is clicked.
I had a working solution, but it required me adding classes or ids to each iframe/thumbnail. I will not be able to add any classes or ids to the iframe or the thumbnail image.
Here is what I had:
$( document ).ready(function() {
<!-- Hide iFrames -->
$(".contentIframe1").hide();
$(".contentIframe2").hide();
<!-- iFrame1 Click Function -->
$(".play-thumbnail1").click(function(){
$(".contentIframe1").show();
});
<!-- iFrame2 Click Function -->
$(".play-thumbnail2").click(function(){
$(".contentIframe2").show();
});
});
HTML:
<iframe class="contentIframe1" width="1280" height="720" src="https://www.youtube.com/embedurl" frameborder="0" allowfullscreen></iframe>
<div class="play-button"></div>
<img class="play-thumbnail1" src="imgurl" alt="" />
Would it be possible to get the same effect without adding different classes to each thumbnail and iframe?
Here's the new html for every single iframe on the page:
<iframe width="1280" height="720" src="https://www.youtube.com/embedurl></iframe>
<div class="play-button"></div>
<img class="play-thumbnail" src="imgurl" alt="" />
Here's the new jQuery:
$( document ).ready(function() {
<!-- Hide iFrames -->
$("iframe").hide();
<!-- iFrame Click Function -->
$(".play-thumbnail").click(function(){
$("iframe").show();
});
});
This of course just hides and shows them all at the same time. I figured I'd have to use .each() to loop through each of the thumbnails and somehow make it only show the corresponding iFrame.
Is this even possible?
You can use children() to get the corresponding iframe
$(".play-thumbnail").click(function(){
//if you need to hide currenly visible iframes use $('iframe').hide()
$(this).closest('div').children("iframe").show();
});
Add class to them -
<iframe class='myclass' ...
And Try this -
$('.myclass').each(function() {
$(this).hide();
})
If you need to add some checks then -
$('.myclass').each(function() {
if (check) {
$(this).hide();
}
})
I have this code to open link in iframe
link
</br></br>
<iframe id="iframe1" name="iframe1" src="#"></iframe>
I want to hide iframe until link is clicked then hide link after link is clicked
I need to do that with javascript / jQuery
Thank you
I would do the following:
<div id="linkDiv">
Link
</div>
<br/><br/>
<iframe id="iframe1" name="iframe1" src="#"></iframe>
$(document).ready(function(){
$("#iframe1").hide();
$("#theLink").click(function(){
$("#iframe1").show();
$("#linkDiv").hide();
return false;
});
});
Put the link in Span tags and do the following:
$("#link").click(function(e) {
e.preventDefault();
//Assuming you're assigning the source dynamically, if not, comment out below line.
$("#iframe1").attr("src", $("link").attr("value");
$("#iframe1").show();
$("#linkBeGone").hide();
});
Make the href attrib of the link "#" and make the value the src you want the iFrame to be.
<span id="linkBeGone"><a id="link" value="http://www.example.com/" href="#" target="iframe1">link</a></span>
</br></br>
<iframe id="iframe1" name="iframe1" src="#"></iframe>
I am developing a page in JSP. It has 3 components: Header, Content and Footer. I want that when this page loads the Content part should be fade in to default content i.e. the Home Page, which contains button for register, login and site credits. When user clicks register button, the content in Content part should fade out and vanish and then content of register form should fade in and get displayed. Same for other buttons, but there should not be any change in header and footer. Please help!!!
With use of jQuery... You have working example there...
I'd recommend using a JavaScript library to achieve this.
jQuery has built in fading abilities.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Using JQuery, you can hide a div by using a selector and the hide() method. For example:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function swap_divs() {
$("#div_to_hide").hide();
$("#div_to_show").show();
}
</script>
<body>
<div id="div_to_hide">
Some text for div to hide
</div>
<div id="div_to_show" style="display: none;">
Some text for div to show
</div>
<button onClick="swap_divs();">Click me</button>
</body>
</html>
If you look at the JQuery website you can find more example and extensive documentation. Also for fading in/fading out.