Is it possible to pass mouse clicks through an overlaying element:
<div style="background: url('img/rain.png'); z-index: 100; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"></div>
down to underlaying elements (paragraphs, images, links, etc)?
Or worded another way:
Is there any way of creating a purely aesthetic overlay/layer in HTML, CSS and/or JavaScript?
This can be solved using CSS:
div { pointer-events:none; }
Supported by IE 11+, Chrome, Firefox, Safari and Opera.
More details: https://developer.mozilla.org/en-US/docs/CSS/pointer-events
You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.
See this SO question for more info about elementFromPoint:
How do I find the DOM node that is at a given (X,Y) position? (Hit test)
I see you are using "rain.24.png" is the overlay animated? As in you are repositioning the images to simulate rain? If this is the case, then it might be best to stop/hide the animated on mousedown and then get the activate your function on the underlying elements using mouseup.
If that isn't the case, then use Vincent's answer to get the element, then call the associated function or use trigger to simulate the click
You could assign a mouse click event to the covering div, then iterate through all elements that you know might be underneath, inspecting their position, width, and height to see if that location of the mouse click was within their borders, and if it was, call their onclick event.
To make the subset of possible elements smaller, you could give clickable elements that might be under the div, a special class.
Related
I have a button generated inside an iframe. Unfortunately, I can't change how it looks, as it's delivered by 3rd party library. I thought of a little trick to use my own button and keep the generated one inside:
<button id="my-button">Click Me</button>
This way, I can tell the library to place its buttons inside mine, so the <iframe> would get appended like this:
<button id="my-button">
Click Me
<iframe src="..."></iframe>
</button>
Now, the only thing left is to hide the <iframe>. I can't simply use visibility: hidden, because that way the click event no longer works. Why I did is instead:
#my-button {
overflow: hidden;
position: relative;
}
#my-button > * {
position: absolute;
top: 0;
bottom: 0;
opacity: .0001;
}
It seems to be a good solution, as I don't see the 3rd party button and I can do whatever I want with my own button. I just need to make sure it's not larger that the button inside, which would render part of my own button unclickable.
What I would prefer, would be rendering that other element somewhere else and hiding it with display: none or position: absolute outside of my viewport and then triggering the click inside it. Due to modern CORS policies, as far as I know it's not possible to reach elements inside the <iframe> though - am I right?
Is there any more reliable way to achieve the same effect without so much trickery? I'm not that excited about opacity: .0001, it make me anxious that in some browsers it will leave some visible trace of the other button.
It isn’t possible to have an element of the parent trigger a click on a button (or any other element) within an iFrame for security reasons.
When I use jQuery for a simple click event it only works for links. Is there a way to make it work for spans etc:
$("span.clicked").live("click", function(e){alert("span clicked!")});
$("a.clicked").live("click", function(e){alert("link clicked!")});
The SPAN works in Safari but not Mobile Safari (on iPhone or iPad) whereas the A tag works in both.
I struggled with this as well. After lots of toying around and trying to figure out the problem, I came across a simple solution.
If you set the element's cursor to pointer, it magically works again with Jquery's live and the click event. This can just be set globally in the CSS.
You need to listen for the "touchstart" and "touchend" events. Add the listeners with jQuery...
$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );
You may wish to listen for a touchstart and touchend so that you can verify that the element targeted when the finger touched is the same as the element targeted when the finger was removed.
I'm sure there is probably a better way to do it but that should work :)
Edit: There is a better way! See https://stackoverflow.com/a/4910962/16940
You actually don't need to use the touchstart or touchend event, so long as the 'span' tag (or anything other than an 'a' tag) has a css property of:
cursor:pointer
the click will register
You can also coax the browser to generate click events by adding an empty onclick attribute. For a belt-and-braces approach in case either approach stops working in any given iOS update, you could use something like this:
$("span.clicked").live("click", function(e){alert("span clicked!")})
.attr('onclick','')
.css('cursor','pointer');
(assuming you don't have any actual onclick attributes you don't mind obliterating)
You can add an empty onclick attribute, like so:
<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });
I tried everything and none of the tricks worked. It turned out I couldn't get click events because I had a video element under my img. video elements apparently eat click events.
When targeting iOS you have to take the following into consideration: doing event delegation in jQuery like $(document).on('click', '.target-element', function (event) {...}); will not work. You have to add either onclick="" to the target HTML element or cursor: pointer to its styles.
Taken and adapted from http://gravitydept.com/blog/js-click-event-bubbling-on-ios:
It turns out that Safari on the iPhone does not support event delegation for click events, unless the click takes place on a link or input. Fortunately there are workarounds available.
That's the reason while the <a> tag works while <span> doesn't.
My approach to solve this misunderstanding on document.click.
Add into html after tag body next tag
<body>
<div id="overlaySection" onclick="void(0)"></div>
...
</body>
Some style for that tag
`#overlaySection {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
cursor: pointer;
visibility: hidden;
opacity: 0;
content: "";
}
#overlaySection.active {
opacity: 1;
visibility: visible;
}`
Some JQuery staff
// hide overlay on document click
$('#overlaySection').click(function(){
$(this).removeClass('active');
});
and the main thing to active this overlay
$('.dropdown > span').click(function() {
...
$('#overlaySection').addClass('active');
...
});
Hope this approach will be useful to someone. Happy coding!
I'm currently designing a Chrome Extension
and I want to make the size of the popup itself changeable by user.
popup.html is the content that goes inside the popup.
So in order to do something with the popup itself,
I think I'll have to work with the codes in popup.js,
but before starting, I want to know if this is possible.
Thank you in advance.
Besides #wOxxOm's answer, you could also add a div inside popup body and set its resize CSS property both.
style:
div {
resize: both;
overflow: auto;
}
HTML:
<body>
<div>
I am div
</div>
</body>
Borders of the extension toolbar popup aren't resizable, but you can implement the functionality yourself by adding 3 thin div elements (4px x 100%, for example) on sides of the popup except for the top, add mousedown event listener on each one that will set a global boolean flag, which will be used in mousemove handler, and unset in mouseup. To actually resize the popup simply set document.body.style.width = newWidth + 'px', for example. To provide visual cues add :hover CSS on those div elements with corresponding cursor: .... rule.
Is it possible to set onmouseup, onmousedown, onclick etc. functions on a video element that is fullscreen, using webkitRequestFullScreen? I register them for the element when I create it, but I do not appear to get the events when the video is full screen.
Also, is it possible to stop the video progress bar appearing when in full screen mode whenever I move the mouse?
Any answers welcome, either using jquery or javascript, or similar.
I couldn't find a way to listen to mouse events on fullscreen as well,
but I've found a workaround:
Instead of putting the video on fullscreen, I simply change the video CSS to:
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
Video then behaves like it's on fullscreen, and everything works as usual.
Finally found a way to do it in Chrome: wrap your video element with div and call webkitRequestFullScreen() for that div rather then for video + some additional magic will be required.
HTML code snippet:
<div id="video-container" style="background-color: #000000;" onclick=divClicked()>
<video id="myvideo">Video not supported!</video>
</div>
JavaScript code snippet:
function doFullscreen() {
var container = document.getElementById("video-container");
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
var video = document.getElementById("myvideo");
// have to resize the video to fill the whole screen
video.width=window.screen.availWidth;
video.height=window.screen.availHeight;
}
Such approach allows handling mouse/etc. events in div element - see onclick declaration at HTML example above.
Also note that such approach doesn't force video controls to appear either on fullscreen or in windowed mode.
For the second question regarding the progress bar you can add the following to your CSS:
video::-webkit-media-controls-enclosure {
display:none;
}
But note once again that it is not needed when using the approach above.
Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.