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
Related
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>
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
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();
}
})
How do I target #main from a button within an iframe using jQuery?
<div id="main">
<iframe><a class="click" href="#">a button inside a separate HTML</a></iframe>
</div>
I have this code:
$('.class').on('click', function(){
$('#main', parent.document).animate({
'bottom' : '0'
});
});
What I wanted to do is when user clicks the button within the iframe(from a separate HTML document), it targets the #main then it will animate.
I'm loading a dialog from another page using load. I'm trying to load it inside a DIV. Now i need only the dialog box area to be added inside my div , not the entire blank space that are present in the page from which i load the dialog. how can it be done ?
$(document).ready(function(e) {
$('#content').load('dialog.html');
});
HTML
<div id="content">
</div>
Dialog.html
$(document).ready(function(e) {
$('#wrapper').dialog({
appendTo:'#content'
});
});
<body>
<div id="wrapper">
</div>
</body>
i tried load('dialog.html div') , but still the blank space also gets added !
You may try this:
$(document).ready(function(e) {
// initialize dialog
var dialog1 = $("#content").dialog({
autoOpen: false
});
// load content and open dialog
dialog1.load('dialog.html #wrapper').dialog('open');
});
if u just want to load the "wrapper div" then use this $("#content").load("dialog.html #wrapper");