click event on a iframe wrapped element - javascript

I may be losing my mind..
I have a div element which is holding an IFRAME. I registered a click event using javascript. That click event is not working when I am on IFRAME (grey region) but when I am clicking outside region of IFRAME (blue region), the click event is working fine.
What should I do to make this click event work even on IFRAME?
Fiddle
HTML:
<div id="main">
<iframe></iframe>
</div>
Javascript
var main = document.getElementById('main');
main.onclick = function () {
alert('hello');
}
PS: IFRAME is generating dynamically from a plugin, I can't access this code

You can add pointer-events: none; to iFrame's CSS - this way it will not capture clicks. Supported in FF, Safari, Chrome, Opera and IE11+.
Modify your fiddle:
iframe {
pointer-events:none;
width: 300px;
height: 300px;
border: 1px solid black;
background-color: grey;
}
New fiddle
Please note user will not be able to interact with iFrame this way.

Related

Different behavior with hidden html elements in different browsers

I have a div with display:none as style attribute value. In css, a background image url is set for this div. I simply don't want the request for the image to be fired until the div is visible later through some JS code. In Firefox , the network tab shows that the request is not issued which is as expected. But in Chrome developer tools I found that the request for the image is actually fired after the DOMContentLoaded event. What could be the possible reason of different behaviors with hidden elements in these two different browsers ?
Markup:
<html>
<head>
<title></title>
<style type="text/css">
.remoteAudioSoundButton{
background: url("http://ourserverurl/images/image_lady.png");
width: 200px;
height: 200px;
border: 2px black;
}
</style>
</head>
<body >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton' style="display:none"></div>
<script type="text/javascript">
window.onload = function(){
console.log("inside onload");
};
</script>
</body>
</html>
Screenshots:
Chrome:
Firefox:
Why not add the background to a specific class? This way the image will only be loaded when the specific class is added to the element.
$(function(){
$('button').click(function() {
$('.remoteAudioSoundButton').toggleClass('visible');
});
});
.remoteAudioSoundButton{
display: none;
width: 200px;
height: 200px;
border: 2px black;
}
.visible {
background: url("http://ourserverurl/images/image_lady.png");
display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton'></div>
<button>Toggle Class</button>
Here is documentation of different browser behavior:
http://justinmarsan.com/hidden-elements-and-http-requests/
Which says:
Chrome and Safari (WebKit)
WebKit downloads the file every time except when a background is
applied through a non-matching media-query. Firefox
Firefox won’t download the image called with background image if the
styles are hidden but they will still download assets from img tags.
Opera
Like Firefox does, Opera won’t load useless background-images.
Internet Explorer
IE, like WebKit will download background-images even if they have
display: none;
So to answer the question of why:
A quick argument for either side:
Firefox - Don't load until the content is visible:
No reason to load something not being viewed, improve page load time.
Webkit - Load the image on pageload: So, perhaps JavaScript decides to make the element visible later, the transition might be choppy if the image is not preloaded, and any other number of arguments for preloading images.
And a brief discussion of the topic:
http://robertnyman.com/2010/03/11/do-hidden-elements-load-background-images/
Browsers may load images that are related to elements that have display:none; set.
I have worked around this before by using a technique like this snippet:
document.getElementById('showKitty').addEventListener('click', function() {
var kitty = document.getElementById('kitty');
kitty.src = "https://placekitten.com/g/200/300";
kitty.classList.toggle('hidden');
});
.hidden {
display:none;
}
<h1>What Can JavaScript Do?</h1>
<img id="kitty" class="hidden">
<button id="showKitty">Show kitten</button>

Zoom on an image inside an iframe not working on IE and Google Chrome

I have an image where the zoom works on all the browsers, but when i open it inside an iframe, the zoom stops working in IE and Google Chrome, but works fine in Firefox.
How do I fix this issue?
The link to the image - found it on the internet.
<iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" src="http://www.dobble.net.au/help/template.jpg" style="align:left;vertical-align:top;border-width:0px;" name="AisIFrame"></iframe>
http://jsfiddle.net/qL75khzg/
Even Opera Browser is affected of the same issue. It is an issue that affects IE and Chromium derived browser (and perhaps not only). Chrome and Opera are both derived from Chromium browser project. After testing the issue on IE, FF, Op, Ch, Firefox is the only one that behaves right.
I've sent to respective developers (but MS) a bug notice with the issue more times in the past, but as far as I can see the issue is still there unfortunately.
Anyway to try to solve the problem insert into the iframe another html/css page instead loading the image directly into the iframe and load the image into the html page within the html tag "img". Than style that tag with the css style sheet as you wish giving the img the size you need. Also, depending on what you need, you may evaluate to wrap the img tag into a styled div to contain img size. If properly done de css part, the img will match in size to the container div scaling proportionally, without shrinking/deforming.
Done that let's try now the implementation of the zoom function.
Well for this it is needed a javascript event attached to the element that you want to zoom (the div for ex.). The event would be "onclick" (or "click" if you want to use addEventListener js method. Also you can zoom even without any js using ":over" css pseudoclass (in the example is used once to compare the different behavior).
The following example will explicate how the whole trick works:
function zoom(el)
{
var checksize = el.style.width == "100%";
if (checksize)
{
el.style.width = "";
el.style.height = "";
}
else
{
el.style.width = "100%";
el.style.height = "100%";
}
}
.h
{
float: left;
width: 400px;
height: 150px;
background-color: blue;
}
.v
{
float: left;
height: 400px;
width: 150px;
background-color: yellow;
}
img
{
height: 100%;
width: 100%;
object-fit: contain;
}
.v:hover
{
float: left;
width: 100%;
height: 100%;
background-color: blue;
}
<div class="v" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>
<div class="h" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>
Also remember that the iframe is not the only html tag that allows you to show an external content (the image in this case). In fact you can use the 'img' tag itself, the 'embed' tag, the 'object' tag and even the 'div' tag or other tags that accept the background to be styled with an image. In this last case you can show an image into it by setting its 'background-image' css style property to the image you want to show into it.

Preserve appearance of dragged A element when using html5 draggable attribute

How can i preserve appearance of the dragged A element when using 'draggable' html5 attribute. On some browsers (Safari & Chrome) when dragging anchor, dragged helper is replaced with browser native implementation of dragged element as seen on the screenshots:
When dragging DIV
When dragging A
HTML
<div class="draggable">Draggable DIV</div>
Draggable A
CSS
$('.draggable').attr('draggable', true);
Here is the quick JSBin i assembled to demonstrate this issue http://jsbin.com/pihayeceza/1/edit
Thanks
I'm able to preserve the appearance of the dragged element by using DataTransfer.setDragImage. If I add the following code to the JavaScript in your jsbin instance, it work for me on Firefox, Chrome and Safari:
$('a.draggable').on('dragstart', function (ev) {
var dt = ev.originalEvent.dataTransfer;
// In IE browsers, setDragImage does not exist. However, the issue we are
// trying to fix does not happen in these broswers. So if setDragImage is not
// available, then just don't do anything.
if (dt.setDragImage)
dt.setDragImage(ev.target, 0, 0);
});
The dataTransfer field of the event has a DataTransfer object associated with the drag operation. You have to fetch it from the original DOM Event rather than from the jQuery Event wrapper, so ev.originalEvent.dataTransfer.
For IE browsers, setDragImage is not present but the problem reported in the question does not occur in the first place so if setDragImage is absent, we just don't call it.
A bin with the updated code.
This problem happens because the default behavior of dragging a link with an href attribute is to create an image containing the url to be used as the drag placeholder. You can fix this by removing the href attribute, however, to get around that without having to remove the href attribute you can use mousedown/up event handlers to remove the attribute and then re-add it, leaving the anchors clickable*.
$('.draggable').attr('draggable', true).on('mousedown', function () {
if ($(this).is('a')) {
$(this).data('href', this.href);
$(this).removeAttr('href');
}
}).on('mouseup', function () {
if ($(this).is('a')) {
$(this).attr('href', $(this).data('href'));
}
}).on('click', function () {
console.log(this.href);
});
.draggable {
margin: 10px;
display: block;
width: 200px;
background: #fafafa;
color: #333;
text-decoration: none;
height: 40px;
border: 1px solid #eaeaea;
line-height: 40px;
text-align: center;
cursor: move;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="draggable">Draggable DIV</div>
Draggable A
*Note: stack snippets doesn't let you follow the link.
Wrap your anchor tags with a div and set draggable="false" on the anchor tag.
<div class="draggable">
Draggable A
</div>
You will need additional styling to prevent the button/link from looking blue and underlined.
.draggable a {
color: inherit;
text-decoration: inherit;
}
modified your jsbin here
http://jsbin.com/rebayif/edit

Font-Awesome icon preventing click in parent button

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
Here's an example button:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap
Any ideas for why those left two pixels don't trigger a click event?
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.
Given this situation, we should definitly take a look at the CSS pointer-events Property
The pointer-events property defines whether or not an element reacts
to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:
button > i {
pointer-events: none;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup
over the same screen location. The sequence of these events is:
mousedown
mouseup
click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>

div onclick only in viewable area

here is the scenario:
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000" onclick="alert(0)">
<textarea style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #FF0000" ondblclick="alert(1)"></textarea>
</div>
The main problem is that the textarea's ondblclick event does not get triggered.
What happens is that if i try to doubleclick in the textarea the div onclick is triggered. I want the onclick of the div to happen ONLY if i click in the area of the div that is not covered by the textarea. How can I achieve that ?
Thanks in advance!
Try reading up on event delegation and adding handlers unobtrusively
Basically you can assign one click or dblclick handler to the div element. Within that handler you can determine the originating element and take the necessary action(s). The links should provide you with further information about that.
edit a basic example (using jquery and one handler function)
Just cancel the event. For traditional event attaching, you have to put return false; in the end, but I'd advice to use some more modern ways to attach event listeners (namely, addEventListener or attachEvent for IE8 and older).
You can use timers to detect intent.
Set a timer when click occurs which will get executed if no subsequent clicks occur.
On double-click clear the timer and execute your default double-click functionality.
As below,
var dblClickIntentTimer = null;
elem.click(function(){
dblClickIntentTimer = setTimeout(function() {
//Wait for 100 ms and then execute 'click' functionality here
}, 100);
});
elem.dblclick(function(){
clearTimeout(dblClickIntentTimer);
//Do double-click functionality here
});

Categories

Resources