I have a very simply div that uses JQuery to fade in when the mouse hovers over the div. Then when the mouse leaves the div it fades back out.
My Problem: The fade in/out only works once. When I place my mouse over the div the second time it doesn't fade in.
Whats going wrong? JSFiddle: http://jsfiddle.net/hWyUn/3/
<div id="test" style="opacity: 0; width: 100px; height: 100px; background-color: red;">
</div>
$("#test").mouseenter(function()
{
$(this).css("opacity","1").fadeIn();
});
$("#test").mouseleave(function()
{
$(this).fadeOut();
});
Using fadeTo Worked for me:
$("#test").mouseenter(function()
{
$(this).fadeTo("slow", 1);
});
$("#test").mouseleave(function()
{
$(this).fadeTo("slow", 0);
});
Here: http://jsfiddle.net/hWyUn/4/
See the jQuery docs. fadeOut() will set the display property to none once it finishes. Effectively removing it from your page.
http://api.jquery.com/fadeOut/
It will work only if element is hidden.
You can set the element's display to none by doing $(element).css('display', 'none') before $(element).fadeIn() :)
You could always try using the the jQuery's Animate to animate the opacity, instead of fading in and out. Might be shorter code.
Animating the opacity will not set the display to none, so you can still fiddle around with it after it is faded out.
See my jsFiddle here
Fixed your problem.
Check out the fiddle...
jsFiddle
Related
I want to fade the image on hover.
Why does this not work?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lightbulb").hover(function(){
$("#lightbulb").fadeOut('fast');
},function(){
$("#lightbulb").fadeIn();
});
});
</script>
Other jQuery methods like CSS styling and changing image sources are working.
You cannot place the fadeOut() effect at the same element you add the hover() to.
fadeOut() sets the Element to "display: none;" and removes it from the DOM.
So a $fadeIn() effect can never take place, because the element with the $hover() targeted is gone.
You need to target a parent container with hover() and fadeIn() and fadeOut() the inner elements. That should work.
$("#parentbulb").hover(function(){
$("#lightbulb").fadeOut('fast');
},function(){
$("#lightbulb").fadeIn();
});
You could use css instead of jQuery if that works. When you fadeOut the element, the hover exit event is fired, so it will just keep toggling between the states the way you have it. Here is a fiddle with an example of hiding/showing on hover. Basically you do like
#elem {
opacity: 1;
transition: opacity: 0.2s;
}
#elem:hover {
opacity: 0;
}
on whichever element you want to hide.
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I have installed an infinite scroll script to my Tumblr blog, and am now in the process of adding a scroll-to-top button. I want this button to fade in once the user scrolls down past a certain point, and fade out when they scroll back up. I also want it to provide a smooth scroll, not just a jump to the top.
I am fluent with HTML and CSS, though I unfortunately know basically nothing about JavaScript and jQuery. I found this tutorial for the JS side of things which taught me how to get the desired scroll button. Everything worked great, but the only problem is that the fadeOut doesn't work - the element simply disappears. Sometimes, if I am lucky, it will start fading out a little for a microsecond or so, but then disappear.
Here is the JavaScript I'm using:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script>
$(function () {
$("#gotop")
.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
I have a simple anchor element in my HTML, styled in CSS using the id #gotop:
Top
CSS:
#gotop {position: fixed;
right: 2em; bottom: 2em;}
As it is, everything works fine, except for the fade out.
I've browsed the internet for similar such issues. I tried various things which I came across, though most of it was greek to me unfortunately.
Edit: I just had a thought. Is it possible that the fade out doesn't occur, because before it has time to fade out, the page has already scrolled back above the "hidden" zone and the element is immediately set to be hidden?
If anybody knows anything, it'd be much appreciated - thanks for your time!
Hope this helps
Js Fiddle Demo
$(function () {
$('#gotop').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
Okay, after some mucking around I managed to figure out the problem.
It turns out that I had set all elements on my page to have a CSS3 transition assigned to them, through use of the * selector:
* {margin: 0; padding: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;}
I did this for convenience so that any hover I had would have a nice transition. However, it seems that this was what was causing my scroll-to-top button to misfunction!
I would suggest that anybody who is having the same problem as my checks any transitions they've used, and ensure that they're not affecting the to-top button. If there are any doubts, try removing them temporarily just to check.
Hope this helps.
I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}
i have a menu and on hover i fade a box in. Behind this box i have a small icon and i want to move it in front of the box so you can see it on hover.
Here is my menu > Navigation
I tried it with that jQuery(this).find(".flyer").css("z-index", 10000);
but it stays behind.
How could i manage that problem?
greets Max
z-index only works on positioned elements, so you need to give .flyer a position, like this:
.flyer{
margin: -75px 0 0 0;
width:53px;
height:74px;
position: relative;
}
Here's your example/fiddle edited to work, we're just calling this on hover:
$(this).find(".flyer").css("z-index", 10000);
and this on hover out:
$(this).find(".flyer").css("z-index", "auto");
Make sure that you reference the proper element with the .flyer selector and z-index does not do the trick, try with the zoom attribute.