I have a "Saving..." overlay that occupies the center of an invisible div that covers 100% of the screen. I would like it to be impossible to interact with the elements behind it, i.e. clicking the buttons, selecting form inputs, etc. Ideally it would not only catch all mouse inputs, but also ignore the mouseover effects(namely cursor changes) of the elements below. It's not for security or anything so it doesn't need to be airtight, mainly just for aesthetics.
Firefox appears to do exactly this by default, but IE doesn't at all. Is there something simple I can use to enforce this behavior in IE?
IE will only block user interaction when the div covering the screen has a background color. If you don't want your content hidden, set a background color, and set the opacity to 1%.
background-color: white;
filter: alpha(opacity=1);
opacity: 0.01;
I suggest you look into one of the many MooTools UI libraries, for instance Clientcides StickyWin Modal. It prevents interaction with things below it to some extent (like you said, mostly asthetically). The user can still tab through things below and if they cared to, interact with forms...
Related
i am currently creating a web site and my problem is, that I have to put two DIVs on the page, that enable scrolling either one screen back or forth with a mouse click instead of the scrollbar (which is also usable) and I want them only to be visible, when there actually is something to scroll. So when the content fits into another DIV, there should not be any scroll back/forth button visible. They may take the space (or not) but I do not want them visible.
Now, I could poll the offsetWidth and scrollWidth of that other DIV with a 100ms interval, compare them and decide the visibility, but that is really ugly.
Is there some event I cloud use except resize, because that would not work on mobile/mac?
I did not find anything (yet) - neither on SO nor on the internet.
Thanks
What I'm trying to do is have a block(let's call it .top) that is fixed and another block(let's call this one .content), that, when scrolling, goes over .top, this all while retaining everything that .top contains clickable.
Now there are some obvious setups
this
http://jsbin.com/rucifuzu/1/edit?html,css,output
or this
http://jsbin.com/hufomaxu/1/edit?html,css,output
problem with both is a) you have to account for scrollbar width b) scrolling/swiping on .top won't do anything with the element with overflow: auto underneath it
I have thought about a couple of solutions.
First would be pointer-events: none on .top, which would make it "transparent" for mouse events, thus triggering scroll on whavever is under it, the problem with is that click events won't work either, and since I plan on having clickable and selectable thing inside .top, it's a problem. I could reset pointer-events back to auto just for those click/selectable thing, but considering one of those clickable things is gonna be big ass headline, I'm gonna have a problem with scroll not working with mouse position on it again.
Second was what I call scroll delegation, using JS I would catch mousewheel events and change scrollTop on the overflow: auto element. This would work fine, except that it might result in different scroll "feel" while this delegation is happening and while native scroll on .content kicks in. It's also pain in the arse to get this behaving correctly on touch devices.
So neither is ideal. Have I missed any genious and simple solution to this problem?
TL;DR Goal is to have the .top element BOTH clickable and "scroll-thru-able"
this way .top is clickable, but element under it won't scroll - http://jsbin.com/hufomaxu/1/edit?output
this way element under it will scroll, but .top is not clickable - http://jsbin.com/tuluwili/1/edit?output
Not sure I understand 100% - you want to visually cover up a fixed element while scrolling but still be able to click on it?
One simple solution might be using 3 layers instead of 2.
Bottom layer contains your links and is fixed.
Middle layer is the one that will scroll over it and cover it up.
Top layer is fixed and is identical to Bottom layer except clear all the background colors and set opacity to 0.
When you scroll it would look like the bottom is being covered up but you could still click on the top invisible layer.
Might not work if you need to do things like drag to copy text or interact in other ways with the middle layer.
I have an overflow: hidden div which I am scrolling by allowing the user to click and drag the background. There are also links and buttons in this space.
This is what I do for the CSS:
#div-grabscroll {
cursor: url(../img/openhand.cur), move;
}
#div-grabscroll:active {
cursor: url(../img/closedhand.cur), n-resize;
}
This works great but what happens is that while dragging, if the mouse ends up moving (due to reaching scroll limits) over a button the pointer cursor overrides my closedhand cursor.
The desired behavior is that for the entire duration that the div is being controlled by the mouse, I want the cursor to remain the closedhand.
Is there a way to override the cursor without modifying CSS for everything that the mouse might move over? I tried !important on the :active style but that didn't do it.
Answer / Question: What would happen if you had a duplicate div which sat on top of the grabscroll div, but which had no background or content of any type so as to not hide anything behind it, and then set the cursor hand on this.
Does z-index overwrite importance this way?
Does this make sense?
Effectively you have grabscroll - button - opaque grabscroll in that layered order.
This is a very similar problem to creating "modal" dialog boxes, and it will probably have a similar solution: I think you'll have to create an iframe positioned over the content you're scrolling, making it higher up in the z-index order than the content, for the duration of the scroll. This is because on IE (at least) form controls tend not to obey z-index well, which is why "lightbox"-style things do this iframe shim thing.
Here's an answer I gave to another question here on SO which demonstrates the basics of the iframe shim. In that case it's for modal purposes, but the concept and most of the code would apply.
is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.
I have a Google Map on one web page where I want to disable both scrolling and zooming. I accomplish this by having an empty DIV element with absolute positioning cover the map area.
Firefox/Chrome work fine, but IE6 doesn't really care about this DIV. For some reason, it just lets me drag the map. I set the DIVs background color to green, and verified that the DIV was indeed being displayed. Weird thing is, when the DIV has a visible color, it works. It blocks all events from being transferred to the map. But when the color is transparent, it doesn't work.
Any ideas why IE6 does so? I've googled a lot and all I come up with are z-index bugs, which this probably is not, since the DIV works fine with a solid background color.
This is a bug in IE6/7, try using a fully transparent background image, it should work.
Try it with a background-color and visibility: hidden;
If that doesn't work, try one of the hasLayout tricks on this page: http://reference.sitepoint.com/css/haslayout