I know that this question has been asked a lot, but I really need to ask as I think mine maybe a bit special. So I open my popup through a hamburger menu that is coded under the master page(I am using web forms master page so that why the need of master page). What usually happens is that after the user login, it will show the main page and when he/she navigates to the menu to open the popup window, the back of popup window is the main page. Now I know that I should be disabling the main page, but then the on click event is inside the master page. How do I link both of them together?
If you use the background Div by hide / show with jquery, the background will be unclickable as this will happen on the top layer.
.side-menu {
z-index: 100;
}
.background-black{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 90;
}
Related
I have a Sidenav and with this CSS
#containerSideNavi {
background-color: #2a3f54;
float: left;
width: 250px;
min-height: 100%;
height: 100%;
height: auto !important;
position: fixed;
}
In the mainpage I include this. So it's like a Frame, like it was used in the 90s
The only difference is, that if I click a link on the page, the whole page make a reload. Thats silly, because my sideNav have multiple submenus and sub-submenus. For Examnple
Location A
Rooms
Confercence Room
Videoroom
Cars
BMW
Tesla
Location B
Rooms
and so on
By loading the page the first time all is closed and only Location A and Location B are visable and the visitor open the Location he need.
After clicking a link the page loads a new side and also reload the sideNav and all menus are closed again and must be reopen from scrach. With a Frame, the sideNav will be stay open in last position. For what do I'm looking in modern development to get the same function like by using a Frame?
On my page I've a navbar at the top. What I want to get is I'm writing down:
As I said initially I've a navbar at the top (this is fine, no problem with this.
As I start to scroll down the page, page content start to go upwards direction which is fine again.
Now when I reach to scrolling down the page to 300, the navbar should get fixed to top of page at 300.
How can I do this?
Here's CodeSandbox link for your reference.
There are many ways to do this, these libraries can help you:
waypoints
skrollr
You can fixed navbar on top of page without using any third party library. Just add this CSS in your index.css.
.header{
top: 0;
width: 100%;
position: fixed;
z-index: 999;
}
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;
}
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...).
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).