Develop Reference

Checking for a class dynamically added from an iFrame

A bit of a weird situation here. I know this is far from the ideal setup, but this is what I am stuck working with, without much leniency to approach it a different way.
Basically, I have a modal window, which has an email signup form embedded via iframe.
I have a script inside of the iframe that sets a class to the main modal when the submit button is pressed. To set the class on the modal, I am using the following:
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
}
I have verified that this code works fine. In inspector, whenever I press the submit button, I see the "submitted" class gets added to the modal.
However... outside of the iframe, I have another script running, that checks when the users presses the close button on the modal.
I want it so that if the modal has the class of "submitted", it does one thing - but if it doesn't have that class, it does something else.
So I have the following:
$(".close-exit-modal").on("click", function(e) {
if ($("#modal-popup").hasClass("submitted")) {
//do something
} else {
//do something else
}
});
Unfortunately, every single time I try the script, the "do something else" runs. The modal clearly shows that it has the proper class - and for the life of me, I can't figure out why this script wont recognize it.
Any ideas what's going on here?

Since you appear to have the ability to change the parent, that to me signifies that you are on the same domain. So potentially you could do some different things.
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
//directly call a method in the parent to let it know the class changed
window.parent.modalPopupWasSubmitted();
});
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
//trigger a custom event that your parent page can have an event listener for
$(window.parent).trigger('modalWasSubmitted');
});
Optionally, depending on the browser support you need, you could also potentially use a postMessage to let the parent know that something happened. Ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Deteck click into iframe in html

How to know when click into iframe in html? because i want to close the dropdown component when click into iframe.
I searched by google, there is a solution using window.blur, but this method isn't standard.
Any helps are appreciate, thanks!

You may be able to do this with Javascript. The following question covers some methods on how you might implement an OnClick() method for iframes:
Adding click event handler to iframe
From there, you could probably have the function go ahead and close the dropdown.
Without knowing more about your code, we can only really suggest general solutions.

I don't think there is a direct way to get a click on iframe in javascript. But there is way around for it.
What we can instead do is track if the user hovers over the iframe and using $(window).blur() we can know if the focus has shifted from current window i.e. the webpage to iframe embedded. Focus shift will mean that user has clicked inside the iframe. Once we capture $(window).blur(), we can toggle dropdown state.
var iframeHover;
$('iframe').hover(function() {
iframeHover = true;
}, function() {
iframeHover = false;
});
$(window).blur(function() {
if (iframeHover)
$("#dLabel").dropdown('toggle');
});
Working Plnkr is: Plnkr

onclick element for an element that is not created yet

I am using the google search API and I want that when you click on an image, this image will be copied to a different location.
I created a fiddle here: http://fiddle.jshell.net/wjewg062/
It works this way: The user types in a term in the input field and images will be displayed. When he/she clicks on one twice it will displayed in the image div.
I put the onClick event listener on to the searchresults div, hence the extra click in the beginning. However, I want it to be displayed on the first click.
Now, if I comment this out
var searchresults = document.getElementById('searchresults');
searchresults.addEventListener("click", function(event){
event.preventDefault();
imageing();
});
it doesn't work. The images will be links. I believe the reason for this is that the results are displayed in gs-image-box and not created yet. I tried calling the imaging function in different other functions like the searchImg or the OnLoad but nothing work.
I thought of using a check if element is clicked function described here Detect if I'm clicking an element within an element
but I think there must be an easier way.
I'm running out of ideas, can anyone give an idea or hint?
Thanks !

The images are dynamically created right? Check out this post Event binding on dynamically created elements?
In short, events are attached to elements upon pageload. so a newly created dynamic element such as the ones that google creates, aren't attached to the event. so google probably has a way to circumvent the whole "you need to load the page to attach events to elements" thing but it requires an extra click. Using the syntax found in the post should help you.
By the way. Using Jquery doesn't really show down your site because it's usually cached in the client's browser.

The info you need is already in your searchresults eventListener. The target of this event will be the image you click, even if you add the event on a div higher in the structure.
A javascript event will by default be dispatched from the top element (window) all the way through the element that received the click, then will go back to the top. Any element that is an ancestor of the element that was clicked will receive the event info, so you can listen on any ancestor, but the target remains the element that was actually clicked.
In your case, by simply passing the target to your imageing() function, you can apply the behaviors you want without any extra manipulations.
One problem you might face, is if user clicks on searchresult but not on an img element. Then you'll have a bug, so you should handle these cases.
Something like this:
var searchresults = document.getElementById('searchresults');
searchresults.addEventListener("click", function (event) {
console.log(event.target, this);
event.preventDefault();
if(event.target.tagName == 'IMG'){
imageing(event.target);
}
});
function imageing(targetImg) {
var imageresult = document.getElementsByClassName('gs-image-box');
var xu = document.getElementById('companylogo');
var imgsrc = targetImg.src;
xu.src = imgsrc;
}
http://fiddle.jshell.net/pwjLrfnt/3/

how to remove hyperlink from contentflow.js file?

http://www.jacksasylum.eu/ContentFlow/docu.php
this is the link of jquery plugin which i am using in asp.net page.
when i click on the image of contentflow it shows the image in the next page so my requirement is to remove that link.
so how i can remove that link from the contentflow.js file.

comment this line in contentflow.js
window.location.href=A

You'll need to look in the contentflow.js file for the place where it creates a hyperlink using the image that you've clicked on.
Once you've found that, you can modify the source code so that it doesn't create a link at all, but just displays the image.

there is a canvas element used to show the picture. Using chromes developers tolls, Ive noticed that the canvas element has a click event handler attached. So I`m guessing that if you remove the click event handler, the link will be removed also.
Try this:
jQuery(document).ready(function()
{
jQuery('.content portray').unbind('click');
// removes/detaches any click events from the elements with 'content portray'
//class. Because the canvas has this class.
});

Another approach without having to modify the default ContentFlow behavior is to override the onclickActiveItem event in the ContentFlow options, eg:
var flow = new ContentFlow('MyContentFlowDivID',
{
onclickActiveItem: function(item) {
//empty function overrides default behavior
}
});

How do you determine html clicked on with javascript?

Is it possible, with Javascript or some other technology to determine which hyperlink a user has clicked on, without changing the hyperlink source code.
For example:
Can you click on a 'tag' button, then click on a hyperlink hosted in a different iframe, and be able to calculate which hyperlink the user clicked on, without changing any of the source code in that iframe?

Using jQuery, you are able to set the context of your selection. i.e.
$('a', $('#iframe-id')).click(function() {...});
You can then implement an event handler that will handle the iFrame hyperlink clicks. The "this" property within the handler will allow you to interrogate the hyperlink and obtain properties such as innerText etc.

you need to put an event on each a link ,
and then you will get all the information about the specific click.
this will work only in the some document,
so if you try to do a test between the link inside an iframe and a link in your page you will not get an event for the iframe link.
in order to attach the event for all link you need to run on all the links in the page ,
the best way to do that is by jQuery selector. or other js framework like YUI
$("a").click(function () {
alert('')
});
getElementsByTagName("a") - will give you all the links in the page.

I just thought of a solution, would this work, or are there other options?
The solution would be to proxy the content of the iframe soruce page, replacing href's with code to call a javascript function which would identify which href was clicked on.
This could then be used in conjunction with the tag'ing click to accurately tag a link.
This would also mean the original source, doesn't need to change at all.

What do you need ?-)
If you got an iframe, you use as a target for links, you must do some server-side processing or add something to the url of the links, that you can read when the page loads ...
But detecting time of page-load requires a script in the page, that is inside the iframe, or a function which tests the availability of the elements in the page in the iframe in short intervals ...
-- but you can only succeed if the page comes from the same domain as the main-page, as cross-domain scripting is illegal and thus impossible !-)

I think it should be possible. The contents of an IFrame is accessible from the outer document (the page in which the iframe is embedded) so you should be able to add event handlers (see other answers) on those elements after the iframe has loaded.
See also Wikipedia on Iframe which gives some examples and frameworks which actually work on content within an IFrame.

You can inject code into an iframe, but only if that iframe is on the same domain as the page you're injecting from, for obvious security reasons.
<iframe id="framedpage" src="framedpage.html"></iframe>
<button type="button" id="tagbutton">Tag</button>
<script type="text/javascript">
function framedclicks_bind() {
var f= document.getElementById('framedpage');
var fdoc= f.contentDocument;
if (!fdoc) fdoc= f.contentWindow.document; // for IE
if (fdoc)
for (var i= fdoc.links.length; i-->0;)
fdoc.links[i].onclick= framedclicks_click; // bind to all links
}
function framedclicks_click() {
alert('You clicked on '+this.href);
return false; // don't follow link
}
document.getElementById('tagbutton').onclick= framedclicks_bind;
</script>
Might want to cleaning-up depending on application needs (eg. to ensure the frame is always loaded before trying to bind, or that unbinding can happen, or that any onclicks from the original links are remembered), but that'd be the general shape of things.

Good solution to find out which element was clicked is to use event delegation. If you attach event listener to each element using a loop (over document.links or document.getElementsByTagName), you have two problems:
- browser has many listeners to maintain
- events are attached only to elements that were in the DOM when you called the loop; any element dynamically added later doesn't have an event listener.
A simple example of event delegation:
document.onclick = function(e){
e = e || window.event;
var t = e.target || e.srcElement;
if(t.nodeName=='A'){
alert( t.href );
}
}
If you want to find clicked link inside an iframe just use iframe's contentDocument instead of document.