I found a few similar threads here after a good while of searching, but none of them was in the same situation as me, so i decided to ask.
I got this drop-down menu that gets the height 460px when i hover over a tab, and loses the height when unhovered. I need the menu to stay there even when the mouse is moved from the tab over to the menu.
Like this: http://jsfiddle.net/muo4ypvc/
I can accomplish this by setting the menu position to relative, however i need the position to be absolute in order to adjust the z-index.
When i try to set the position to absolute, the menu won't keep the 460px height on hover, it only has the height when the tab is hovered. I've also tried some other things like wrapping all the html in a container, and put that as the mouseleave element, but with no success. How can i make it stay on both tab and menu hover?
html
<div id="tab">
<a id="tab">Categories</a>
<div id="menuDropdown">
<div id="innerDropdown">
<!-- menu content -->
</div>
</div>
</div>
js
$(document).ready(function() {
var inner = $('#innerDropdown')
var rolldown = $('#menuDropdown');
$('#tab').mouseenter(function() {
rolldown.toggleClass('show');
if(rolldown.hasClass('show'));
setTimeout(showInner, 130); /* waits 'til drop-down animation is finished */
function showInner(){
inner.toggleClass('show');
}
});
$('#tab').mouseleave(function() {
inner.toggleClass('show');
rolldown.toggleClass('show');
});
});
css
#menuDropdown {
position: absolute;
transition: (some long ass transition code);
}
#menuDropdown.show {
height: 460px;
}
#menuDropdown.hide {
height: 0px;
}
#innerDropdown.show {
display: block;
animation: fadein .15s;
}
I wrapped your html into another div to show that the wrapper keeps its height, but I'm not sure I understand what you're trying to do and what doesn't work. I basically just added position: absolute:
.description {
position: absolute;
}
See demo: http://jsfiddle.net/4tb29u6h/1/
Related
Take the following example:
https://jsfiddle.net/atg5m6ym/5079/
Here, you have to scroll down a bit to see the message "Hello!". I also animated a div to move down beyond the screen:
$("div").animate({top: '3000px'}, 6000);
You can see how the scrollbar changes and we now have a much larger page to scroll through.
Now, I want users to be able to scroll down to the "Hello!" text, if the text is beyond the user's screen. However, I don't want the div to extend the vertical scrollbar once it reaches the bottom of the screen. Rather, I want the div to continue moving down beyond the screen, with the scroll bar remaining unchanged. This way, the scrollbar could not follow it.
Doing "overflow-y: hidden" would prevent users from scrolling downwards on their own choice and reading the "Hello!" Is there anything I can do to accomplish both of these using JS (preferably jQuery) or CSS?
EDIT: I still want the div to exist, so I don't want to fade it out. If I had a div that returns afterward or travels in an elliptical orbit, I would like it to still reappear when it reenters the screen, but not to affect the scrollbar.
This will make div travel to whatever the Y position of the paragraph is, and after that gets faded out:
$(document).ready(function() {
var p_pos = $("p").offset().top;
$("div").animate({top: p_pos}, 6000).fadeOut();
});
Alright, try the following:
<div id="everything">
<div id="orb"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<p>
Hello!
</p>
</div>
And in your css:
#everything {
display: inline-block;
position: relative;
width: 100%;
height: 800px;
max-height: 800px;
overflow-y: hidden;
background-color: #ccc;
}
Make sure to animate $("#orb") instead of just $("div") (and rename it in your css.
There you go. Just add to the body and set the div position to
body {
overflow: hidden
}
div {
bottom: 0;
}
https://jsfiddle.net/atg5m6ym/5082/
So one of the buttons on my site's nav bar brings down a small grey tab from the top which tells you about the site. Here is the code I'm using for the animations:
var aboutMenu = function(){
$(".aboutButton").click(function(){
$("body").animate({top: "42px"}, 200);
$(".about").animate({top: "0px"}, 200);
});
}
$(document).ready(aboutMenu);
The idea is that the body of my website, along with all its content, moves down 42 pixels. This is whilst the content in the "about" class moves down so that it's visible on the screen. If you do click on the "About" button, all that happens is the grey tab moves down, but the body stays where it is. This would not usually be a problem, except the tab obscures the rest of the nav bar.
Here is some more relevant code (if needed):
HTML:
<div class = "about">
<p align = "center">placeholder text</p>
</div>
and the actual link:
<li> <a class = "aboutButton">About this website</a></li>
CSS:
.about{
background-color: gray;
top: -42px;
height: 42px;
position: fixed;
}
.about p{
color: white;
}
.aboutButton{
cursor: pointer;
}
As mentioned in my comment, to be able to animate top (or other positions for that matter), you need to set a position: ... (e.g. position: relative;.
You could try using a different way to call your function, e.g. add this attribute to your link: `onClick(aboutMenu())
Also try putting an allcontent div around everything and animating that, body tags aren't that good for animations
My nav is positioned at the bottom of the page, and the sub menu appears above the nav.
I also have a bit of jquery which fades out the content when the nav is hovered on. However I think this query is interfering with the sub menu, as it doesn't stay when one hovers over it, this seems only in firefox browser?
please have a look here on a firefox browser http://intelligen.info/index.html
$("#nav").hover(
function () {
$(".index-content").fadeTo(700,0.3);
},
function () {
$(".index-content").fadeTo(700,1);
}
);
Your gap is set way to high, using bottom leaves whitespace between the hover and the element you are hovering over. Also, I wouldnt use jQuery for adding CSS elements such as fading. You can use transitions to do that.
#nav li:hover nav {
bottom: 12px; /** Change to 12 to fix **/
display: block;
left: 0;
position: absolute;
}
On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)
this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.
You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">
I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}
As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}
I am using the following jQuery script:
$("#divid").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.
If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.
The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.
How should I fix this?
Why don't you add a container and do:
<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>
$(document).ready(function() {
$("#hlDiv").hover(function() {
$('#divId').show(1000);
})
$('#container').mouseleave(function(){
$('#divId').hide(1000);
});
});
fiddle here: http://jsfiddle.net/w68YX/8/
If I understood right, rewriting
$("#divid").mouseenter(function() {
$('#divid').stop(true);
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).
However this depends on your HTML, and might not work in your case, so please post the structure also.
I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.
First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)
<div class="container">
<a id="hlDiv" href="...">link text</a>
<div class="show-on-hover" id="divId">popup stuff</div>
</div>
Next, set up your CSS as follows:
.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }
#divId { /* whatever styles you want */ }
The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).
Simply change the CSS as follows:
.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }
.show-on-hover {
-webkit-transition: opacity 1s; /* Chrome / Safari */
-moz-transition: opacity 1s; /* Firefox */
-o-transition: opacity 1s; /* Opera */
}
The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).
The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).
Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.
Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2
And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/