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...).
Related
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;
}
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.
This question might have been asked many times but still there are many factors which I think affect it to make the solution work
I have a site here
http://www.radioali.com/valy-mikham-toro-bebinam-video_51e244dc3.html
The header of the site is static. If you notice scrolling up the page, everything scrolls properly except the video. It never goes behind the header div.
It is a problem with flash player and there are workarounds for it by using wmode. I have tried it setting opaque and transparent but with no result.
Can someone please suggest me how to make the flash object behave properly and scroll behind the header div.
Just change the z-index to 0
So
#video-wrapper {
position: relative;
z-index: 4999;
}
will be
#video-wrapper {
position: relative;
z-index: 0;
}
The like button works fine, the recommendation works fine, but there's an issue: the like button is positioned on the right side of the page (which is intended), but when the button is clicked, it opens a box that exceeds the boundaries of the browser, to the right.
Example (with me in the Santa's hat as a doubtful bonus):
I've tried controlling the position using css, with no success. How can i proceed?
TL;DR
I need that recommendation box on the left, not on the right as it is now.
Thank you!
Your problem is in the css. Try using firebug to inspect the elements, you can change properties live to see which ones are the ones giving you the headache.
(edited)
The sidebar container is position:absolute, and has right:0. There's your problem.
#sidebarSocialetContainer {
right: 0px;
margin-right: 10px;
width: auto;
margin-top: -39px;
position: absolute;
}
So, if you put left:0 instead of right:0 you'll see the bar in the opposite side.
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.