Looking for best practise around a feature I'm looking to implement.
I have an SVG map, which contains little blue icons where a user can click, see image below for reference:
When a user clicks any of the blue icons, I'm looking to open a little modal by it that will showcase that regions info. For example, see the below screenshot:
So, in the above instance, the user has clicked on the blue circle on the bottom, which opens a little modal for that region.
Now, in my svg, I have added id's for each blue icon (<g class="mapLocations__icon" id="uk" ...">, but with this approach, the two options I see are:
Absolute positioning the modal for each region. But this sounds like a pain for responsive.
Writing repeat markup for the modal within the svg itself.
Neither seem like a good approach.
Any recommendations?
Here is my svg for reference: https://jsfiddle.net/6squyc7d/ (Added as jsfiddle as pasting the code puts me over the charachter limit)
In the onclick event you can use the x and y coordinates to absolute position the modal dynamically. So actually you could create and position the modal right on the onclick function.
function openModal( evt ) {
var intCoordX = evt.clientX;
var intCoordY = evt.clientY;
// Modify modal properties
// Open modal
}
For each dot, you have an Id. You can add an onclick listener to each dot with an forEach loop (all Ids in an array). You can then put this code into the forEach loop:
const dot = document.getElementById('canada')
dot.addEventListener('click', event => {
console.log(event.x, event.y)
});
In this code you get the dot with the Id (canada). Then you have the click event and you can see where the user clicked on their screen (x and y pixels).
Then you can place an absolute div with the top and left value.
.position {
position: absolute;
opacity: 0;
}
You can then with JS place the modal with top and left on the right position and set the opacity to 1;
It will make the div show on the correct place.
I have a div that has background:transparent, along with border. Underneath this div, I have more elements.
Currently, I'm able to click the underlying elements when I click outside of the overlay div. However, I'm unable to click the underlying elements when clicking directly on the overlay div.
I want to be able to click through this div so that I can click on the underlying elements.
Yes, you CAN do this.
Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.
Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example page with all the code.
Yes, you CAN force overlapping layers to pass through (ignore) click events.
PLUS you CAN have specific children excluded from this behavior...
You can do this, using pointer-events
pointer-events influences the reaction to click-, tap-, scroll- und hover events.
In a layer that should ignore / pass-through mentioned events you set
pointer-events: none;
Children of that unresponsive layer that need to react mouse / tap events again need:
pointer-events: auto;
That second part is very helpful if you work with multiple overlapping div layers (probably some parents being transparent), where you need to be able to click on child elements and only that child elements.
Example usage:
.parent {
pointer-events:none;
}
.child {
pointer-events:auto;
}
<div class="parent">
I'm unresponsive
I'm clickable again, wohoo !
</div>
Allowing the user to click through a div to the underlying element depends on the browser. All modern browsers, including Firefox, Chrome, Safari, and Opera, understand pointer-events:none.
For IE, it depends on the background. If the background is transparent, clickthrough works without you needing to do anything. On the other hand, for something like background:white; opacity:0; filter:Alpha(opacity=0);, IE needs manual event forwarding.
See a JSFiddle test and CanIUse pointer events.
I'm adding this answer because I didn’t see it here in full. I was able to do this using elementFromPoint. So basically:
attach a click to the div you want to be clicked through
hide it
determine what element the pointer is on
fire the click on the element there.
var range-selector= $("")
.css("position", "absolute").addClass("range-selector")
.appendTo("")
.click(function(e) {
_range-selector.hide();
$(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
});
In my case the overlaying div is absolutely positioned—I am not sure if this makes a difference. This works on IE8/9, Safari Chrome and Firefox at least.
Hide overlaying the element
Determine cursor coordinates
Get element on those coordinates
Trigger click on element
Show overlaying element again
$('#elementontop').click(e => {
$('#elementontop').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});
I needed to do this and decided to take this route:
$('.overlay').click(function(e){
var left = $(window).scrollLeft();
var top = $(window).scrollTop();
//hide the overlay for now so the document can find the underlying elements
$(this).css('display','none');
//use the current scroll position to deduct from the click position
$(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
//show the overlay again
$(this).css('display','block');
});
I currently work with canvas speech balloons. But because the balloon with the pointer is wrapped in a div, some links under it aren't click able anymore. I cant use extjs in this case.
See basic example for my speech balloon tutorial requires HTML5
So I decided to collect all link coordinates from inside the balloons in an array.
var clickarray=[];
function getcoo(thatdiv){
thatdiv.find(".link").each(function(){
var offset=$(this).offset();
clickarray.unshift([(offset.left),
(offset.top),
(offset.left+$(this).width()),
(offset.top+$(this).height()),
($(this).attr('name')),
1]);
});
}
I call this function on each (new) balloon. It grabs the coordinates of the left/top and right/down corners of a link.class - additionally the name attribute for what to do if someone clicks in that coordinates and I loved to set a 1 which means that it wasn't clicked jet. And unshift this array to the clickarray. You could use push too.
To work with that array:
$("body").click(function(event){
event.preventDefault();//if it is a a-tag
var x=event.pageX;
var y=event.pageY;
var job="";
for(var i in clickarray){
if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
job=clickarray[i][4];
clickarray[i][5]=0;//set to allready clicked
break;
}
}
if(job.length>0){
// --do some thing with the job --
}
});
This function proofs the coordinates of a body click event or whether it was already clicked and returns the name attribute. I think it is not necessary to go deeper, but you see it is not that complicate.
Hope in was enlish...
Another idea to try (situationally) would be to:
Put the content you want in a div;
Put the non-clicking overlay over the entire page with a z-index higher,
make another cropped copy of the original div
overlay and abs position the copy div in the same place as the original content you want to be clickable with an even higher z-index?
Any thoughts?
I think the event.stopPropagation(); should be mentioned here as well. Add this to the Click function of your button.
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Just wrap a tag around all the HTML extract, for example
<a href="/categories/1">
<img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
<div class="caption bg-orange">
<h2>
test1
</h2>
</div>
</a>
in my example my caption class has hover effects, that with pointer-events:none; you just will lose
wrapping the content will keep your hover effects and you can click in all the picture, div included, regards!
An easier way would be to inline the transparent background image using Data URIs as follows:
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
I think that you can consider changing your markup. If I am not wrong, you'd like to put an invisible layer above the document and your invisible markup may be preceding your document image (is this correct?).
Instead, I propose that you put the invisible right after the document image but changing the position to absolute.
Notice that you need a parent element to have position: relative and then you will be able to use this idea. Otherwise your absolute layer will be placed just in the top left corner.
An absolute position element is positioned relative to the first parent
element that has a position other than static.
If no such element is found, the containing block is html
Hope this helps. See here for more information about CSS positioning.
You can place an AP overlay like...
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
just put it over where you dont want ie cliked. Works in all.
This is not a precise answer for the question but may help in finding a workaround for it.
I had an image I was hiding on page load and displaying when waiting on an AJAX call then hiding again however...
I found the only way to display my image when loading the page then make it disappear and be able to click things where the image was located before hiding it was to put the image into a DIV, make the size of the DIV 10x10 pixels or small enough to prevent it causing an issue then hiding the containing div. This allowed the image to overflow the div while visible and when the div was hidden, only the divs area was affected by inability to click objects beneath and not the whole size of the image the DIV contained and was displaying.
I tried all the methods to hide the image including CSS display=none/block, opacity=0, hiding the image with hidden=true. All of them resulted in my image being hidden but the area where it was displayed to act like there was a cover over the stuff underneath so clicks and so on wouldn't act on the underlying objects. Once the image was inside a tiny DIV and I hid the tiny DIV, the entire area occupied by the image was clear and only the tiny area under the DIV I hid was affected but as I made it small enough (10x10 pixels), the issue was fixed (sort of).
I found this to be a dirty workaround for what should be a simple issue but I was not able to find any way to hide the object in its native format without a container. My object was in the form of etc. If anyone has a better way, please let me know.
I couldn't always use pointer-events: none in my scenario, because I wanted both the overlay and the underlying element(s) to be clickable / selectable.
The DOM structure looked like this:
<div id="outerElement">
<div id="canvas-wrapper">
<canvas id="overlay"></canvas>
</div>
<!-- Omitted: element(s) behind canvas that should still be selectable -->
</div>
(The outerElement, canvas-wrapper and canvas elements have the same size.)
To make the elements behind the canvas act normally (e.g. selectable, editable), I used the following code:
canvasWrapper.style.pointerEvents = 'none';
outerElement.addEventListener('mousedown', event => {
const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element.
if (!clickedOnElementInCanvas) {
// if necessary, add logic to deselect your canvas elements ...
wrapper.style.pointerEvents = 'none';
return true;
}
// Check if we emitted the event ourselves (avoid endless loop)
if (event.isTrusted) {
// Manually forward element to the canvas
const mouseEvent = new MouseEvent(event.type, event);
canvas.dispatchEvent(mouseEvent);
mouseEvent.stopPropagation();
}
return true;
});
Some canvas objects also came with input fields, so I had to allow keyboard events, too.
To do this, I had to update the pointerEvents property based on whether a canvas input field was currently focused or not:
onCanvasModified(canvas, () => {
const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
wrapper.style.pointerEvents = inputFieldInCanvasActive ? 'auto' : 'none';
});
it doesn't work that way. the work around is to manually check the coordinates of the mouse click against the area occupied by each element.
area occupied by an element can found found by 1. getting the location of the element with respect to the top left of the page, and 2. the width and the height. a library like jQuery makes this pretty simple, although it can be done in plain js. adding an event handler for mousemove on the document object will provide continuous updates of the mouse position from the top and left of the page. deciding if the mouse is over any given object consists of checking if the mouse position is between the left, right, top and bottom edges of an element.
Nope, you can't click ‘through’ an element. You can get the co-ordinates of the click and try to work out what element was underneath the clicked element, but this is really tedious for browsers that don't have document.elementFromPoint. Then you still have to emulate the default action of clicking, which isn't necessarily trivial depending on what elements you have under there.
Since you've got a fully-transparent window area, you'll probably be better off implementing it as separate border elements around the outside, leaving the centre area free of obstruction so you can really just click straight through.
I have some custom buttons overlayed on a Google Map. When you click on one of the buttons it slides the map div right 360px and slides in a 360px wide div on the left in the place where the map vacated. When I click the button on the map it works as designed and slides the map over and div in like it should and when you click the close button on the div it slides out of focus and the map goes back to where it was before.
My issue is I am trying to have this div that slides in to show on load. My solutions I have tried haven't quite worked and I am not great with Javascript. If I use CSS z-index 1 it will load when the page loads but it shows it on top of the map instead of the map sliding over 350px. So a CSS solution won't work in this case because the div overlays on the map instead of sliding it over and covers the map which has a logo in the top left corner.
This is how I open and close the div.
HTML
<button id="alertBtn" class="map__control_icon" onclick="openAlerts();"><i class="fa fa-exclamation-triangle"></i></button>
Javascript
function openAlerts() {
document.getElementById("alert-list").style.minWidth = "360px";
document.getElementById("map-wrapper").style.marginLeft = "360px";
document.getElementById("mapButtons").style.marginLeft = "-360px";
}
function closeAlerts() {
document.getElementById("alert-list").style.width = "0";
document.getElementById("map-wrapper").style.marginLeft= "0";
document.getElementById("mapButtons").style.marginLeft = "0";
}
So how can I have this show by default when the page loads but slide the map over like it does when you click the button? Also is there someway to get the width .style.marginLeft to auto so it slides over based on the size of the div that slides in as sometimes the content is dynamic but if I set a hard set margin then there is extra space when the div isn't filling the full width. Hench why "alert-list" is set with a minWidth.
-Thanks!
I was able to easily solve this by adding the follow to the top of my Javascript.
$(document).ready(openAlerts());
If you want pure JavaScript then use this
document.addEventListener('DOMContentLoaded', openAlerts, false);
I have a div with a relative position (div 1). It contains an image (shown as the green block) with an absolute position which by default is hidden way off to the left of the browser window.
I'd like to make it so that when div 1 is in the center of the browser window as the user scrolls down, the image is moved in slightly from the left and appears on the screen. As the user begins to scroll down past div 1, I'd like the image to move back to its original offscreen position.
I have attached a picture to try and make a bit more sense.
I have a feeling this is possible using JavaScript or jQuery but I'm not sure how. Any help would be greatly appreciated.
Ian
You'll want to bind a handler to the scroll event of the window, and measure the ratio of how far down the page the user has scrolled - then, position the image accordingly. I built a rough prototype; you should be able to tweak sizes and positions to make it work for you.
The JS for the prototype, which depends on the HTML and CSS in the JSFiddle linked above, is as follows:
var $main = $('.main');
var $tgt = $('.targetMover');
var origLeft = $tgt.position().left;
var maxLeft = 200;
$main.scroll(function(ev){
var ratio = $main[0].scrollTop / $main[0].scrollHeight;
var newLeft = origLeft + ( (maxLeft - origLeft) * ratio);
$tgt.css({left:newLeft});
});
You would want to position the image on scroll. You would basically check what the position of the div is, set the top of the image to the same as the div, and set the left to whatever you like. you could use jquery animate for this to make it "move" to that position. You then would have to manage to do an scrollstop event (which doesn't exist), and hide the image again. See: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ for scrollstop implementation (taken from the below post).
You might want to read through jQuery - fadeOut on Scroll / fadeIn on "scrollstop"
I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.
Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?
I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:
function adjustContentHeight()
{
// Setting content div's height to nearest upper multiple of column backgrounds height,
// forcing it not to be cut-off when repeated.
var contentBgHeight = 300;
var contentHeight = $("#content").height();
var adjustedHeight = Math.ceil(contentHeight / contentBgHeight);
$("#content").height(adjustedHeight * contentBgHeight);
}
$(document).ready(adjustContentHeight);
What I'm looking for there is a way to respond to a div resizing event, but there doesn't seem to be such a thing. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.
Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.
Another approach is to calculate the background-position style for the bottom and top DIVs based on the size of the content DIV. You can use negative positions to align the bottom of one to the top of another.
Yet another approach is to use a layered DIV approach in which the top, content and bottom are all children of a parent DIV that contains the background.
The benefit of these approaches is that it doesn't change the natural rendering of the content DIV simply for managing the background.
Example: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html
Could setting background-position: fixed in your css help? Then your bottom div could move, but its background image would remain fixed in relation to the top of the page. As more of your repeating image was revealed, so more of your bottom image would be hidden.
This would comes under the heading of "offset the background image in the bottom div by a certain amount depending on the height of the content-div", rather than "the content div's height to be a multiple of 300px under all circumstances".
You could try adding an event listener to the div:
var div = document.getElementById("content");
div.addEventListener("resize", adjustContentHeight, false);
If nothing needs to match up at the top, position the repeating image at the bottom of the div (so the overflow will spill over the top). Like this:
div#repeating { background: transparent url('/path/to/image') repeat left bottom; }