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.
Related
I am trying to write a JavaScript or jquery function that binds a click event to dynamically or server generated element with the class name (manage-inventory). The function should perform the following :
When clicked, it should toggle a bootstrap class (d-none) on its next sibling element(manage-inventory-card). The key is here is to remove the default "d-none" class in order to make the "manage-inventory-card" element show
When the element with the class name (manage-inventory) is clicked again, it should add the class "d-none" back to the "manage-inventory-card" element in order to hide it.
If any part of the page except the "manage-inventory-card" is clicked, the "manage-inventory-card", the class name "d-none" should be added back to it.
Clicking another dynamically generated element with the same class (manage-inventory) should close the previous "manage-inventory-card" if still open by closing it with the addition of class "d-none".
The event should work on only one instance of "manage-inventory" and "manage-inventory-card" at a time. Clicking one should not make it work on all others at the same time. There can only be a running instance
Below is the HTML code when it is dynamically generated by the server
The code only works for toggling of the "d-none" class when it is clicked. I don't know how to write the one that hides it back by adding "d-none" to the currently opened "manage-investment-card" when another element "manage-inventory" element is clicked and also write the code that closes it when any part of the page is clicked. Thank you
$(document)
.find(".manage-inventory")
.each(function(index) {
$(this).on("click", function() {
$(this)
.next()
.toggleClass("d-none");
});
});
.d-none {display: none !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
So you need to delegate.
I am delegating from document because you want to check all clicks on document
$(document).on("click", function(e) {
var $tgt = $(e.target);
if ($tgt.is(".manage-inventory")) {
var $thisChild = $tgt.next();
$(".manage-inventory-card").not($thisChild).addClass("d-none");
$thisChild.toggleClass("d-none");
} else {
$(".manage-inventory-card").addClass("d-none");
}
});
.d-none {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">1
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">2
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden"></div>
<div id="pushtray" class="overlay"></div>
</div>
I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.
What am I doing in my CSS file exactly?
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});
div#content div {
display: none;
}
div#content div#intro {
display: block;
}
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
So in an html structure like this:
<a class="member-main">
<!-- other divs and html elements -->
</a>
<div class="hidden-group-item">
<!-- other divs and html elements -->
</div>
I want to bind a click event to an html element with class .member-main so to show a hidden element .hidden-group-item.
There are plenty of those elements repeated in the page in pairs so I'd also like to show only that .hidden-group-item immediately below its respective .member-main
I'm aiming to do so with a function like below, helped by this previous question:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item')[0].toggleClass('hide')
});
I can get the element associated on click through this keyword (if I console log it), but I can't seem to grab that node that'd let me traverse down to the hidden-group-item.
How does this work in this case and what would be the most efficient way to achieve this?
...[0] returns a nodeElement not a jQuery object that has the function toggleClass. Try this:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first
.toggleClass('hide')
});
This works as expected
The docs about the .next() method says the following:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
Because you have the onClick handler and you're selecting the currently clicked element as $(this) then the matched set of elements is only the one you clicked, thus the next() call gets the .hidden-group-item just beneath it.
Sample
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item').toggleClass('hide')
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
JSFiddle
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 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.