How to catch click on an iframe using JQuery. I have an Amazon banner, and I need to close its container DIV when the user clicks the iframe. I've tried 'contents', onclick on iframe, binding the event but nothing works. When I click the iframe it opens Amazon's page on another tab, but the click event never fires. I put a breakpoint and alert just to make sure.
I am using latest JQuery version 1.9 and tested it on Chrome. I also thought about capturing a global click ($(document).click) and check the area of the click, but when I click the iframe, $(document).click doesn't fire. Any suggestions?
Again, it's an Amazon banner iframe, it's hosted on Amazon not on my server.
Example of the regular on binding that doesn't work: http://jsbin.com/oyanis/4/edit
There is a neat trick to get a "click" on on iframe content.
You could do:
<div id="iframeinside">
<iframe />
</div>
This now makes it possible to say in js something like:
var oldActive = document.activeElement; /* getting active Element */
var frame = $('#iframeinside iframe')[0];
$('#iframeinside').mouseenter(function() {
/* Setting interval to 1ms for getting eventually x,y mouse coords*/
oldActive = document.activeElement;
setInterval('doSomething()', 1);
});
$('#iframeinside').mouseleave(function () {
/* clear interval cause we arent over the element anymore*/
clearInterval(intervalId);
});
These intervals do call:
function doSomething() {
/* if the focus has changed to the iframe */
if(oldActive != frame && document.activeElement == frame) {
oldActive = document.activeElement;
alert(myQuery);
alert('click did happen to the iframe');
}
}
I used this for several things and it always worked. What i didnt check was how about ie6,7 and older brothers.
Related
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
I'm using jquery plugin token input for my dropdowns on this page
http://www.connectweb.com.au/search.aspx
It works fine in firefox in that I can click the arrow and the dropdown opens with the contents and allows me to scroll up and down using the scrollbar. However in IE and Chrome I cannot seem to scroll by moving the scroll bar up and down. Its some css somewhere but I'm struggling to find out what..any css experts out there want to take a quick look? would be appreciated : -)
thanks
Hello please take a look at the https://github.com/loopj/jquery-tokeninput/issues/130
The issue happens to be with the the way IE handles scroll bars versus chrome or firefox. The solution is to modify the inputtoken.js file as mentioned in the forum.
Here is the basic outline.
Declare a variable to hold the state
Check of the variable in the .blur event of the input_box
Add .mouseover, .mouseout to .dropdown
// 1. Keep track of mouse being over dropdown
var mouseOverDD;
// 2. IF the blur function
var input_box = $("<input type=\"text\" autocomplete=\"off\">")
.blur(function () {
if (!mouseOverDD) {
hide_dropdown();
$(this).val("");
}
})
// 3. Add over/out events
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide()
.mouseover(function(){
mouseOverDD = true;
})
.mouseout(function(){
mouseOverDD = false;
});
I am using a CSS hover trick to clean up my interface. Controls will only be shown when the cursor is hovering inside the element. I'm running into an issue when using the interface on a touch screen device. If the control button is not shown display:none and I touch where it should be, the event is still triggered for the button.
Try this fiddle both in your browser and on a touchscreen device to see what I mean...
http://jsfiddle.net/6PvCn/2/
On a touchscreen device, touch the red square and the alert should fire, without the button even showing up. I tested this on both the desktop Android Emulator and my real Android 2.3 phone.
The effect I'm going for is for the button to first be shown without firing, even if the user touches where the button "is".
I'd rather use a pure CSS solution before resorting to javascript.
Try pointer-events: none; along with display: none;
I just tested it on my real device, and it indeed executes the button's action.
You could maybe try to make the red box an image and change the image to a button by an onclick with Javascript. I would have provided you with some code if I wasn't short on time.
You can't do it with pure CSS, tapping the button will put the button into hover state and fire the click event. Instead you should fire the button off on active.
Here is the solution I came up with... http://jsfiddle.net/6PvCn/7/
On an Android touchscreen (don't know about IOS), the hover event for the hidden element is not fired if it is not shown. So basically I check to see if the element was hovered before it was clicked.
In a nutshell
$(".hidden").hover(function(e) {
if(e.type == "mouseenter") $(this).addClass("hovering");
else $(this).removeClass("hovering");
}).click(function(e) {
if(!$(this).hasClass("hovering") return false;
});
The fiddle explains the more complicated situation I had with form elements and dynamically added content. It provides a general solution as opposed to this element specific one.
I wrote a JS solution for you:
https://codepen.io/anon/pen/bmYROr
The trick is to prevent the button's click event getting fired for the first time the outer div is getting clicked because on touch devices click event has hover effect.
let isTouchDevice = true;
let isHovered = false;
document.getElementById('outer').addEventListener('click', (e) => {
if (isTouchDevice) {
if (!isHovered) {
e.stopPropagation();
}
isHovered = true;
}
}, true);
document.getElementById('outer').addEventListener('mouseleave', (e) => {
if (isTouchDevice) {
isHovered = false;
}
}, true);
document.getElementById('btn').addEventListener('click', () => {
alert("hi");
});
This tv.ui.button only responds to mouseclick when initially loaded, but then responds to keyboard ENTER or mouseclick after it's been clicked at least once. Do I have something wrong here?
HTML
<div class="tv-button alert-button" id="test-button">Alert button</div>
JS
decorateHandler.addClassHandler('alert-button', function(button) {
goog.events.listen(button, tv.ui.Button.EventType.ACTION,
function() {
alert('Button clicked.');
var elementToFocus = goog.dom.getElement('tab1');
var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);;
});
});
EDIT: it seems this may be a question about javascript, not closure specifically. I'm posting a new question under the appropriate tag
Have you made sure that the button has cursor focus? If not then the "Enter" key event will get handed to the default handler.
Well, I fixed it with a semi hack. i used a $('target').click on the button within $(document).ready, which seems to set the focus as if a click event had actually happened
I'm working on an own combobox control for ASP.Net which should behave like a selectbox, I'm using a textbox, a button and a div as a selectbox replacement. It works fine and looks like this Image:
My problem now is the Selectbox close behaviour: when clicking anywhere outside the opened selectbox it should close.
So I need something like an onClick event for the whole page which should only fire when my div is open. Any suggest how to do that?
Add a click event handler to document. In the event handler, examine its target (or srcElement in IE) property to check that it isn't your open div or any of its descendants.
Set a click event handler on the document that "closes" the pseudo-combobox. In addition, set a click event handler on the pseudo-combobox's container (the div, in this case) which cancels bubbling of the event. Then any clicks in the div will bubble up only as far as the div before being halted, while clicks anywhere else will bubble all the way up to the document.
This is a much easier option than mucking around traversing the DOM from the event's target upwards to work out where the click came from.
EDIT: if you are setting the div's style to display: none; (or something similar) to hide it, then it doesn't matter if you leave the event handler on the document - hiding it when it's already hidden will have no effect. If you want to be very tidy, then add the event listeners when the div is shown, and remove them when it is hidden; but there's probably no need to bother.
document.onclick = function() {
if(clickedOutsideElement('divTest'))
alert('Outside the element!');
else
alert('Inside the element!');
}
function clickedOutsideElement(elemId) {
var theElem = getEventTarget(window.event);
while(theElem = theElem.offsetParent) {
if(theElem.id == elemId)
return false;
}
return true;
}
function getEventTarget(evt) {
var targ = (evt.target) ? evt.target : evt.srcElement;
if(targ && targ.nodeType == 3)
targ = targ.parentNode;
return targ;
}
Put a transparent div that covers whole the page and lies under your dropdown. At that div's click event hiğde your dropdown.