I have web application that design is based on divs.
I need in that application block possibility of clicking on some javascript object.
So I thinking about adding transparent div that will be positioned with z-index on level/layer where I need and will capture all clicks without passing to lower z-index objects?
How this can be done?
Use absolute positioning in that covering div. Either don't set any background or set it as rgba(r,g,b,0)
I don't think this is a good design.
I don't know if you know that, but you can add a click listener to the body element itself. Every click will bubble up to body. It's called event delegation. I believe this solves your problem.
Related
I added a button to open a modal when clicked. It works when at the top of the page but when you scroll further down and try to click it, the button no longer opens up the modal. I've put only the code used for the modal and button without the rest of the site code into it's own file to test it and it works just fine so it has to be something somewhere else in the code affecting it.
Here's the GitHub link: https://github.com/xman2156/TOH
Your button appears early in the markup, and is positioned but doesn't have a z-index set. However, it has later siblings which are also positioned without z-index set, notably <div class="tab">, which means it will appear on top of your button in the z-index and block clicks through to it.
If you apply z-index: 1; to your button, that will move it in front of the div that's currently in the way. If you need to ensure it's always on top of other content, you might find it useful to wrap the rest of your content in a single element that creates a separate stacking context, for example by applying position: relative;.
For some more information on stacking contexts and using z-index, here is a link that I find is a useful reference: What no one told you about z-index
set z-index:1000 for both #info and #infoBtn
it'll solve your problem. I tried it.
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I am trying to make a pop-up on certain elements where the <div>'s initial position is based on the mouse position. I already know how to get the <div> to appear in the same place each time but I want it to be relative to the mouse's position when it first appears. I don't want the <div> to move after it appears. Is this possible to do without using any JavaScript at all (i.e. CSS only)? If so, how please!
I do not think what you are asking is possible. The logical conclusion would be that you need a third party to retrieve the mouse position and then insert the desired element.
I have a div on top of a thumbnail which displays some information. On the thumbnail I want to do drag/drop events but I can't to that because the div on top hides the selection. Is is possible to make the div visible but not interfer the drag/drop selection. I hope you understand my problem.
I have no code because nothing is done!
You can make an element transparent to mouse interaction by adding a CSS property of pointer-events:none. So for example, if your div has ID overlay, you could use:
#overlay{
pointer-events:none;
}
if you can create an onclick-event for the info div that sets the focus to thumbnail, you will then be able to use the drag/drop...
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy