I feel like this question must have been asked before but I must not know the correct terminology to find an answer to it.
I have a transparent div that acts as a hit area. When the user hovers over this area a menu bar animates on to the screen. The problem is if the cursor moves on to this menu the animation to hide the menu begins. It doesn't sense that the cursor is over it. I can fix this by making the z-index of the hit area higher than the menu but then the menu buttons are not click-able.
Here's my code. Any ideas?
http://jsfiddle.net/92dYt/1/
CSS
#menu{
position:fixed;
top:-40px;
left:0px;
width:100%;
height:40px;
background-color:#000;
z-index:50;
}
#hitarea{
position:fixed;
top:0px;
left:0px;
width:100%;
height:150px;
background-color:#eee;
z-index:49;
opacity:0;
}
HTML
<div id="menu"></div>
<div id="hitarea"></div>
JAVASCRIPT
$("#hitarea").hover(
function () {
$('#menu').delay(500).animate({
top: 0
}, 500, function() {
// Animation complete.
});
},
function () {
$('#menu').delay(500).animate({
top: -40
}, 500, function() {
// Animation complete.
});
}
);
You may want to nest the hit area as a background in the menu and code your own hover behaviour using mouseenter instead of hover.
http://api.jquery.com/mouseenter/
You can see from the example that mouseover fires for every child object while mouseenter fires just once. (Although if nested, the solution might work with hover too.)
Related
I have page (Red) with an iFrame on (white). Within the code of the iFrame, there is another iFrame containing another 2 pages (Green & Blue).
In the Red page, i have some Javascript that allows a hidden sidebar to appear when the mouse hovers on the right side of the screen (300px from right). This works fine, however if the user pulls the mouse away and the curser hovers over the red or green pages in the iFrame, the sidebar will not retract. However if the user retracts the curser into the red area (top and left) the sidebar retracts as expected. Im assuming that there is no code within the red and green pages telling the sidebar to retract when a mouseover occurs.
My problem is, i really suck at Javascript. How would I go about having the side bar retract regardless of where the mouse curser ends up? Any help would really be appreciated. Thanks
$(window).on('mousemove',function(e){
if(e.pageX >= $(window).width() - 300 || e.target.id=='sidebar' ){
$('#sidebar').css({'right':'0px'});
}
else{
$('#sidebar').css({'right':'-300px'});
}
});
Could you try to change the mousemove event to using mouse out and mouse in?
$(window).on('mousein',function(e){
$('#sidebar').css({'right':'0px'});
}
$(window).on('mouseout',function(e){
$('#sidebar').css({'right':'-300px'});
});
Also I would like to suggest maybe using a CSS based solution for this where instead using a :hover selector to show/hide the sidebar on mouse over
.sidebar-container{
width:300px;
height:100%;
background:#999;
position:absolute;
left:0px;
top:0px;
}
.sidebar-container .sidebar{
width:100%;
height:100%;
background:#465;
position:absolute;
left:-300px;
top:0px;
transition:all 0.5s;
}
.sidebar-container:hover .sidebar{
left:0px
}
<div class="sidebar-container">
<div class="sidebar">Hi!</div>
</div>
I have a jquery script which controls some menu bars when activated. Basically, when the user presses the top menu bar, the bottom two would slide down and make space for the content (a html table in this case). After this, the content will use the fadeIn() function to appear on the page. However, at this point. the two bottom menu bars would jump further down the page.
Is there anyway to make them stay at their original positions on the page without change the .animate() function measurements?
Here is the relevant jQuery code:
menustatus=0;
function menuconfig(){
if(menustatus===0){
$('.menuhead2').animate({
top:"500px"
},300)
$('.menuhead3').animate({
top:"555px"
},300)
$('#table1').delay(300).fadeIn(300);
menustatus=1
}
And here is the relevant CSS code:
.menuhead2{ /*This is the one of the bottom menu bars */
position:relative;
top:80px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead3{ /*This is the one of the bottom menu bars */
position:relative;
top:135px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead1{ /*This is the top menu bar */
cursor:pointer;
height:30px;
position:relative;
top:30px;
}
#table1{ /*This is the content that fades in using the fadeIn() jQuery function. */
position:relative;
top:50px;
left:30px;
display:none;
z-index:9;
}
It's not super clear without a jsfiddle but try setting #table1 to position absolute instead of position relative
So I have a simple lightbox with code like this:
jquery code:
var $overlay =$('<div class="overlay"></div>');
$('body').append($overlay);
$('img').click(function(){
$overlay.show();
});
css:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: absolute;
top:0;
}
This is obviously very simple I haven't wrote much code except the overlay that will appear when the image is clicked and triggers the lightbox.
Here are my questions:
My webpage is longer than the screen, what code could I use to stop the screen scrolling when my lightbox is triggered.
Is it possible to set the lightbox $overlay to only fill the screen in view. So only take up the part of the webpage in the current screen view. I have images spread out over webpages and I when are a lightbox is triggered I would like it to fill only that part of the screen.
Well, I decided to post an answer hopefully it will help you.
First things first, your JavaScript. From the JS you posted, it looks like you are using a different .overlay for each image. Not needed.
Simply make one overlay like so:
<div class="overlay"><img src="#" width="500"/></div>
Then, set the images src when you click on an image on your webpage:
$('img').click(function(){
var src = $(this).attr('src');//Gets the image you clicked on src
$('.overlay').fadeIn();//Fades in the overlay
$('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);//Sets the overlay image to the correct source, and centers the image. -20 is for the border
});
$('.overlay').click(function(){
$(this).fadeOut();// And fades out the overlay on click
});
Simple and easy. Now to your actual question.
How you are going to achieve what you want is with CSS.
First, set the body and html's height and width to 100%, and remove the margin. This stops overlay from making scroll bars:
body, html{
width:100%;
height:100%;
margin:auto;
}
Then, to make overlay appear over the image you clicked, change position:absolute; to position:fixed;:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: fixed;
top:0;
text-align:center;
cursor:pointer;
}
Add a little more CSS to make it look pretty:
.overlay img{
border-radius:5px;
border:10px solid white;
box-shadow: 0 0 5px black;
}
And Bang!
JSFiddle Demo
Make sure you check out the coding in this JSFiddle
I am trying to make a parallax scrolling website and its template is as follows:
HTML
<div id="content">
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
</div>
CSS
#content {
height:auto
}
#container1, #container2, #container3 {
position:relative;
height:100%;
width:100%;
background-size:cover;
overflow:hidden;
}
#container1 {
background-color:#FF0000;
}
#container2 {
background-color:#000;
}
#container3 {
background-color:#363636;
}
Problem: If you scroll down to either #container2 or #container3 and resize the browser, the website appears to scroll.
I suspect that the height:100%; is causing issue. In particular, resizing causes all three containers to resize, creating a weird offset.
Things I have tried:
Binding the resize event and dynamically changing the height of the divs
Adding a min-height property so that the resize locks after resizing
Hiding the div that is no longer in the view
Is there any simple way of fixing this? The last attempt fixes it, but I feel like there should be a better way rather cluttering my JS file with several .hide() and .show() events.
Running into a problem that seems to ONLY be an issue with IE, and I'm not sure how to fix it. I know a lot of people do this but I'm not sure how to make it properly work with IE.
I'm working on an ecommerce site where we want some details of a product to overlay over the top of the product image when hovering over the image. The containing DIV is the javascript trigger, but if your mouse hits the image before it hits the div, the div class change doesn't execute.
http://jsfiddle.net/eQMzg/
If you go to the jsfiddle, if you start the hover from the right or left side of the div, it works perfectly. If you start it from the bottom or top, where the image is expanded to, it doesn't.
<div class="product">
<div class="product_activitylayer" align="right" onmouseout="this.className='';this.className='product_activitylayer'" onmouseover="this.className='';this.className='product_activitylayer_hover'">
</div>
<div class="product_containertop" align="center">
<img src="images/demoimages/product.jpg" height="160">
</div>
</div>
.product {
width:244px;
height:221px;
display:block;
float:left;
margin:0px 3px 5px 0px;
border-top:solid;
border-top-color:#10B0E5;
border-top-width:6px;
}
.product_containertop {
height:160px;
width:244px;
background:#FFFFFF;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#C7EEFA;
margin-bottom:2px;
}
.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;
}
.product_activitylayer_hover {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:.5;
filter:alpha(opacity="50");
}
John,
This one is a known bug in IE. If any element has transparent background - IE does not takes executes the hover on it. You can fix it by applying the background to .product_activitylayer and set it's opacity to 0
See I updated your fiddle.
http://jsfiddle.net/NETJ4/1/
.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:0;
filter:alpha(opacity="0");
}
Or here is a improved version using jQuery
http://jsfiddle.net/zzLr6/2/