I made in GWT custom modal message box. It has also bottom layer. This means that I expect restriction of any user action at the page except clicking 'Ok'.
I made something like this (click on the 'show dialog box').
I have made bottom layer that covers all bottom controls. It has style:
.glass {
background-color: #000;
opacity: 0.50;
-moz-opacity: 0.50;
filter: alpha(opacity = 50);
width: 100%;
height: 100%;
}
But the problem that in firefox user can click middle mouse button and scroll away, to the area that bottom layer will not cover.
In GWT i disabled scroll. It helps in IE, but not in FF.
Window.enableScrolling( false );
How to disable middle mouse scroll for short time?
Or i can make CSS for panel that will cover also hidden page area?
Thanks for any help!
and Sorry for my english.
There's a GlassPanel in the Google Web Toolkit Incubator - you might get some ideas from there (they didn't solve/restrict the middle button, just extended the panel to cover the whole page, including the hidden area).
Related
We have a website fabulouslanzarote.com that has a navigation menu implemented using CSS3. The 'The Resort' and 'The Community' menu options have
sub-menus.
Recently it has been reported that these sub-menus are not accessible in Chrome. They appear when the top-level link is hovered, but disappear when you attempt to click one of the links.
We have not updated the site in a couple of months and they had been working following the last deployment, so maybe this is the result of an update to Chrome? The menus work fine in Firefox and Edge.
Does anyone know what is preventing the sub-menus from working properly in Chrome?
#Johannes is correct. The menu has a gap where, as you move your cursor over it, it loses the hover state. Try adding a transparent pseudo element on the ul.drop to fill the gap and keep the hover state as the cursor moves.
ul.drop:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 27px;
}
Disclaimer: While I don't usually recommend using hardcoded values, your menu already leverages them. That's why I chose 27px. It fit based on the other hardcoded values.
I think they are just a little bit to far below the main menu: When you move the mouse rather slowly (and not exactly in the middle), you loose the "hover" state and the submenu disappears.
I'd move them up a bit and make that arrow on top a little bit smaller to avoid that situation.
I am doing a popup light box by using the code I found in this article HTML / CSS Popup div on text click.
Now I am trying to disable the main scrolling of the page, since the light box has a fixed height, but certain pages are longer then the popup which leads to scrolling the background of the popup which in this case is the page itself.
I played a bit with overflow but without success.
Try the following CSS:
html {
height: 100%;
overflow: hidden;
}
Also, if you trigger this code on a random location in the page, you might need to do extra work.
Do you have a jsfiddle or codepen?
I've got a WebView that contains a page with images. Some of those images are the pretty faces for buttons, so the user will be clicking on them. If, during a click, the user drags the cursor a little, it drags the image as if you're dragging and dropping it somewhere.
This isn't a very nice user experience. I'd like to make the buttons act more like regular buttons, where if you move the cursor while the mouse is down, nothing happens to the location of the button.
Is there a way to do this?
jsfiddle
css:
.btn {
background-image: url('imageUrl');
width: 80px;
height: 20px;
}
On my client’s site I’m using Magnific Popup to show the license agreement for their product when a “show agreement” link is clicked. So I’m using the inline type for a big long block of text. It works perfectly on the desktop. But it gets all messed up at the bottom on mobile.
If I understand correctly, at desktop views Magnific Popup sets <html> to overflow: hidden and the popup to position: fixed. At mobile views it doesn’t do this.
This would be fine, except for that my popup is so tall that it exceeds the height of my page. This means that it starts looking broken at the bottom.
I’d love to make it work on mobile/iOS as it does on desktop, but I’m starting to doubt that this is even possible. If anyone has any ideas I'd love to hear ‘em. Thanks!
You could add max-height: 100%, overflow-y: scroll on the popup. This way the biggest it can be is the size of the viewport, but users can scroll within it.
for Magnific Popup - v1.1.0 - 2016-02-20 what worked for me was
.mfp-bg,
body.mfp-zoom-out-cur {
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
}
mfp-bg is the background that can get larger than viewport and and allow scrolling
I have a div that blocks clicks in another div. It should be possible for users to click on the commercial :).
On my page I have a commercial block. If one clicks the login button the login div will expand and cover part of that commercial (This is intended). This is the part that can't be clicked. How can I prevent this from blocking clicks without moving the commercial in front the expanded login div.
You can see how clicks are blocked by hovering the mouse over the commercial on
www.whomakescoffee.com
Played around in Chrome, and I think I got it working.
Take the explicit widths off the login_wrapper, login_leftpanel and
login_inliner
Position: relative on body tag
Position: absolute on login_wrapper
Remove position: absolute from login_leftpanel
top: 55px; right: 0; on login_wrapper
z-index: 25; on login_wrapper
That might do it (although I can't remember if I made more edits...).