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
Related
I am trying to target newly generated content inside a popup. This works, but it is too broad and would cause problems if I have multiple popups open.
marker.on('popupopen', function (e) {
$('.images-content').hide();
});
Ideally I would like to do something like this where it is specifically hiding the .images-content that is within the popup that was opened, but the reference to the element is not working and therefore I can't hide the element.
marker.on('popupopen', function (e) {
$(e.popup.getContent()).find('.images-content').hide();
});
What am I missing to make it work specifically for the current opened popup?
Here's a JsFiddle with my attempt: http://jsfiddle.net/vs506sm5/1/
Just target one of private variables inside the popup, with $(e.popup._wrapper).find('.images-content').hide();. I think this achieves what you are looking for.
Question
I want to trigger a (middle) mouse click on a link, in a way that triggers the native browser behavior for this event.
E.g. in those browsers I work with, middle-click will cause the linked page to open in a new tab in the background.
But if other browsers have a different behavior, that should be triggered instead.
I know there is the element.click(); method, but how do I tell it which mouse button should be clicked?
Background
The background is that I want to make a div behave as much as possible like a regular link. The idea was that I would create a hidden link tag and trigger the native browser behavior.
Requirements for the div-as-a-link:
href can come from a data-href attribute.
Native browser behavior for left-click, middle-click and possibly right-click.
respect of the target attribute, which could come from a data-target attribute.
tabindex
activation with the keyboard?
possibility to select text snippets within the div. This means we cannot just use an overlay.
Why not use a native link tag? Because the div contains inner <a> tags. So making the div box an a-tag would cause nested a-tags which would cause some browsers to restructure the DOM tree.
Obviously I could just set document.location.href on click. But this is only 20% of the browser's native behavior.
I could also try to detect the mouse button, and use js to open the tab in the background, if it was the middle button.
But maybe some browsers have a different behavior for middle-click. I would rather let the browser do its thing, than trying to replicate a specific browser behavior with js.
The idea I had was to create a hidden <a> tag with the same href, and delegate click events from the <div> to this hidden <a> tag. For this, I need to trigger the event with the same mouse button. I am not sure how to do this.
js or jQuery?
jQuery is ok for my personal use case. But to make this useful to a wider audience, maybe also post how to do it without jQuery, if you know.
See also
There are some question which deal with this kind of problem, but each of them looks at a different angle or has different constraints.
This is what I come up with thanks to #JonUleis in the comments and #MikeWillis in https://stackoverflow.com/a/32868971/246724
$('.linkbox', context).once('linkbox').each(function(e){
var $linkbox = $(this);
var href = $linkbox.data('href');
if (!href) {
return;
}
var $hiddenLink = $('<a>').attr('href', href).hide().appendTo('body');
$linkbox.click(function(e){
$hiddenLink[0].dispatchEvent(new MouseEvent('click', {button: e.button, which: e.which}));
e.preventDefault();
});
});
Note that I put the hidden link outside of the clicked div, to prevent recursion.
The right-click menu does not give me "copy link url", but I imagine this would be really hard to replicate.
UPDATE: I found that I don't really need to append the link to anything, and it still works. But I only tested this in Chromium on Linux so far.
This is the code to achieve left click and middle click functionality.
tabindex works with any html element so you can use it not the div
$("#link").on('click', function(e) {
const hasTargetBlank = $(this).data('target') === '_blank';
const href = $(this).data('href');
switch(e.which) {
// left click
case 1: {
if (hasTargetBlank) {
window.open(href);
} else {
window.location = href;
}
break;
}
// middle click
case 2: {
window.open(href);
break;
}
// right click
case 3: {
// do what you want to do
}
}
});
I have a some elements, roughly like this:
<div>
<a>
<div>
When a user clicks anywhere on the div, I want the a element to be clicked - for usability purposes.
Simple right? So I wrote this:
$('div.class').click(function(){
$('a.class', this).click();
console.log('clicked');
});
Trouble is, this clicks the a element alright, but the event propagates to the div, which clicks it, which clicks the a, which... well you can see where it's going.
I cooked up a sample on JSfiddle here
but it doesn't show the console log. So if you click, Firebug doesn't show anything. but my local site sets Firebug crazy with logs (clicked) so much that in the end script gets killed saying too much recursion on this page
How do I stop this recursion?
Yes I know, I know that I can use window.location for this purpose, but clicking the link does some extra work and also uses window history for browsers, so I really want to click that vicious a without making it click its Dad. Or Mom. Or whatever that div is.
PLEASE READ
Since everyone is suggesting the same thing over and over again, and it's not working, please take a look this JSfiddle. Try it and see if it works before you answer. When you click on a div, Google should load up. That's what I'm looking for.
If this is is your markup:
<div>
<a></a>
</div>
...all you will need to do is in your css do something like:
div a { display: block};
The anchor element will then stretch and occupy all the available space in the parent div. However, if some other elements exist within that div, you could do:
$('a.class').click(function(event){
event.stopPropagation();
alert('you clicked on me');
});
$('div.class').click( function () {
$(this).children('a.class').trigger('click');
});
Use the event.stopPropagation() method.
How about this?
$('selector').attr('onclick')()
Instead of using the click event on the child node, just set the browser location to the href value
$('div.class').click(function(){
location = $(this).find('a').attr('href');
});
$('div.class').click(function(event){
event.stopPropagation();
$('a.class', this).click();
console.log('clicked');
});
You need to add the event argument and a stopPropagation method to the handler.
I'm editing a start page made by someone else (found here: http://defined04.deviantart.com/art/KMay-Start-Page-184915031?q=gallery%3Adefined04%2F790342&qo=0). This lets you switch search engines by clicking on the different tabs. Is there a way to have the search box automatically selected when I select a tab? At the very least, how can I get the default engine to be selected on page load?
On the click handler of your tab, do this....
document.getElementById('tabs-container').getElementsByTagName('li').onclick = function () {
document.getElementById('search-input-' + this.id).focus();
}
Of course, change it to suit your HTML. Hopefully if you have a tie like that between them, you can write one event handler and not three.
You can use javascript focus() for that. Execute the script when the tab is changed.
I am in charge of a website at work and recently I have added ajaxy requests to make it faster and more responsive. But it has raised an issue.
On my pages, there is an index table on the left, like a menu. Once you have clicked on it, it makes a request that fills the rest of the page. At anytime you can click on another item of the index to load a different page.
Before adding javascript, it was possible to middle click (open new tabs) for each item of the index, which allowed to have other pages loading while I was dealing with one of them.
But since I have changed all the links to be ajax requests, they now execute some javascript instead of being real links. So they are only opening empty tabs when I middle click on them.
Is there a way to combine both functionalities: links firing javascript when left clicked or new tabs when middle clicked?
Does it have to be some ugly javascript that catches every clicks and deal with them accordingly?
Thanks.
Yes. Instead of:
...
Do this:
...
And then in your JS, hook the link via it's ID to do the AJAX call. Remember that you need to stop the click event from bubbling up. Most frameworks have an event killer built in that you can call (just look at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Of course you can be a lot more clever, while juggling things like this but I think it's important to stress that this method is so much cleaner than using onclick attributes.
Keep your JS in the JS!
Yes, You need to lookup progressive enhancement and unobtrusive Javascript, and code your site to work with out Javascript enabled first and then add the Javascripts functions after you have the basic site working.
I liked Oli's approach, but it didn't discern from left and middle clicks. checking the "which" field on the eventArgs will let you know.
$(".detailLink").click(function (ev, ob) {
//ev.which == 1 == left
//ev.which == 2 == middle
if (ev.which == 1) {
//do ajaxy stuff
return false; //tells browser to stop processing the event
}
//else just let it go on its merry way and open the new tab.
});
It would require some testing, but I believe that most browsers do not execute the click handler when you click them, meaning that only the link is utilized.
Not however that your handler function needs to return false to ensure these links aren't used when normally clicking.
EDIT:
Felt this could use an example:
<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" />
link text
For more info and detailed explanation view my answer in another post.
Possibly, I could provide two links each time, one firing the javascript and another being a real link that would allow for middle click.
I presume, one of them would have to be an image to avoid overloading the index.
The onclick event won't be fired for that type of click, so you need to add an href attribute which would actually work. One possible way to do this by adding a #bookmark to the URL to indicate to the target page what the required state is.