Develop Reference

Prevent jQuery from jumping to the bottom (when using fadeIn)

I've created some divs fading in with jQuery, I have a problem if the user scrolls a bit down though. If you are not at the top of the page, it will always jump to the bottom when a new div fades in.
Here's my code:
<style>
#overflowwrap {
overflow:hidden !important;
}
</style>
<div id="overflowwrap">
<div id="five" style="display: none;">a lot of content</div>
<div id="four" style="display: none;">a lot of content</div>
<div id="three" style="display: none;">a lot of content</div>
<div id="two" style="display: none;">a lot of content</div>
<div id="one" style="display: none;">a lot of content</div>
</div>
<script>
$('#overflowwrap').css('max-height',$(window).height());
$("#one").fadeIn(500);
setTimeout( function show() {
$("#two").fadeIn(500);
}, 3000);
setTimeout( function show() {
$("#three").fadeIn(500);
}, 6000);
setTimeout( function show() {
$("#four").fadeIn(500);
}, 9000);
setTimeout( function show() {
$("#five").fadeIn(500);
}, 12000);
</script>
Update: Example fiddle: https://jsfiddle.net/6qj1hbp0/1/
This wouldn't be a problem, if this was the only element on a page and the user couldn't scroll. However, it's integrated on another site (survey software), so the user is able to scroll.
Is there anything I can do to prevent the site from jumping to the bottom?

Try a different approach.
Instead, of display: none on every element, try opacity: 0;
Then instead of:
setTimeout( function show() {
$("#two").fadeIn(500);
}, 5000);
use:
setTimeout( function show() {
$("#two").addClass('is-visible);
}, 5000);
and add:
.is-visible { opacity: 1 !important; }
within your <style> tags.

you cannot “freeze” scroll, but you can read and change the scroll position, especially because you are using jQuery.
My solution consists in saving the current position of the scroll immediately before the fadeIn instruction then reassign the same value immediately after, with this function:
function fadeInElement(id, time) {
var currentScroll = $(window).scrollTop();
$('#' + id).fadeIn(time);
$(window).scrollTop(currentScroll);
}
Then you may call the same function several times with different ids and duration time, something like this:
fadeInElement('one', 500);
or this:
setTimeout(function() {
fadeInElement('two', 500);
}, 5000);
You may look a working example on CodePen or on JSFiddle

In short, the easiest thing you can do is hide the previous div every time you show a new one.
https://jsfiddle.net/6qj1hbp0/2/
$("#one").fadeIn(500);
setTimeout( function() {
$("#one").hide();
$("#two").fadeIn(500);
}, 3000);
setTimeout( function() {
$("#two").hide();
$("#three").fadeIn(500);
}, 6000);
setTimeout( function() {
$("#three").hide();
$("#four").fadeIn(500);
}, 9000);
setTimeout( function() {
$("#four").hide();
$("#five").fadeIn(500);
}, 12000);
If you want to fade from one box to the other (which creates a much smoother looking effect), you will need to do some other stuff - most notably:
put the boxes in order, top to bottom, #one to #five (you should do this anyways - it just makes sense congnatively)
set the position to absolute for each of the boxes
set some other styles (see the fiddle below)
use a special class while a box is fading in
https://jsfiddle.net/6qj1hbp0/3/

It's simple. Just reorder your div's to the order you want to show them instead of "five, four, three, two, one".
Your browser doesn't have any intention to take you to the bottom, it's just trying to keep your view point fixed on the current hash navigation. As your fading div is always above, your scrollTop will just jump to the bottom.
Another solution - if you don't want to reorder - is to remove all div id's and creating other way to recognize them, something like "data-id".
PS: look for some id's after too!

Do you need to restrict the overflow with hidden?
You can just set overflow: auto and browser will automatically take care of ensuring scrollTop remains the same after the fade in. The element user is looking at after scroll will remain at the same offset. If user hasn't scrolled then it will show the latest faded element at the top
Here's a jsfiddle: https://jsfiddle.net/sm2qaa3c/2/
After re-reading your comment, it seems you always want to display the latest faded div at the top. In that case you want a function to reset scrollTop to 0. You want to do it on overflowwrap not window since that's where the overflow scrolling will happen.
['#one', '#two', '#three', '#four', '#five'].forEach((id, idx) => {
setTimeout(() => {
$(id).fadeIn(500);
$('#overflowwrap').scrollTop(0);
}, idx * 5000);
});
See jsfiddle: https://jsfiddle.net/sm2qaa3c/3/

Thanks for the answers, they didn't work for my purpose though.
However, I've got a solution from another forum which doesn't require changing the functionality. This seems to work:
$('#overflowwrap').css('max-height', $(window).height());
fadeIn("#one", 0)
fadeIn("#two", 5000)
fadeIn("#three", 10000)
fadeIn("#four", 15000)
fadeIn("#five", 20000)
function cs() {
console.log(document.scrollingElement.scrollTop)
}
document.scrollingElement.scrollTop = 16
function fadeIn(el, when) {
setTimeout(function show() {
var t=document.scrollingElement.scrollTop
$(el).fadeIn(500);
document.scrollingElement.scrollTop = t
}, when);
}
Here is a working example on JSFiddle: https://jsfiddle.net/6qj1hbp0/4/

JQuery width animate doesn't run

I am trying to make div disappear and reappear by have the text disappear, the div collapsing, then the opposite with another div, using JQuery animate function but something's not working in the following code:
$(currentTab + " > p").animate({ opacity: 0},{
duration: 500,
complete: function(){
$(currentTab).animate({width: "0", opacity: 0}, {
duration: 500,
complete: function(){
$(clickedTab).animate({width: "70%"}, {duration: 500, complete: function(){
$(clickedTab + " > p").animate({
opacity: 1
}, 500);
}});
}});
}});
where currentTab and clickedTab are my div ids, like "#ct-1", and my html looks like that:
<div id="ct-1" class="content-div">
<p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="ct-2" class="content-div">
<p>bbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
So the second animate doesn't run at all. I'm guessing this has somehting to do with the DOM, maybe I can't access a parent inside the animate ? maybe it's nothing to do with it...
Thanks in advance !
Robin

Assuming currentTab is ct-1 and clickedTab is ct-2, all of your animations are working in this fiddle:
http://jsfiddle.net/3k0x3c4L/
You won't notice the width shrink unless clickedTab has a background, which I've added in the fiddle.

Buttons that move a DIV left or right

I am attempting to make a div scroll left or right either with a mouseover effect or on-click. However, I am at a loss as to what is going wrong.
Here was my attempt to do this simply:
<head>
<style>
#innerscroll{
margin-right:0px;
}
</style>
</head>
<body>
<div id="innerscroll"></div>
<img src="right.jpg"
onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" />
</body>
Now, trying this, I'm wondering why it doesn't work. What am I doing wrong?
I also tried a more complex approach that also failed. Here's the code for that:
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-right' : '100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-right' : '-100px'
});
});
My last question was closed because I guess I was not specific enough. Whatever details you need please ask for and I'll edit the question!
Edit: I have the option of using jQuery but I would rather not.
Edit2: I am using setInterval to time the mouseover effect. I am thinking that it will move via mouseover or it will move via a click event.

My solution is using jquery too, like this:
using 2 buttons, one for left move and other for right move
$('#innerscroll').animate({
'marginLeft' : "+=50px"
});
and
$('#innerscroll').animate({
'marginLeft' : "-=50px"
});
you can make a function and pass the value to it.

You should use .style.paddingRight instead of .style.padding-right. jsfiddle
Modified code:
<img src="right.jpg"
onmouseover="onmouseoveronImge();" />
Since you are using jQuery you can attach mouseover event as below
<script>
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '+=100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '-=100px'
});
});
function onmouseoveronImge(){
$('#innerscroll').animate({
'margin-left': '+=100px'
});
}
</script>
Note: I don't think you want to use value return by setInterval. You should explain it in your question why you are using it.

Padding can't be negative value. Animate margin instead.
So your code should look like this:
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '-100px'
});
});​
Working jsfiddle here: http://jsfiddle.net/vqzrY/

If you have markup like:
<div id="container">
<div id="content">
</div>
</div>
Setting the padding on either #container or #content will not make the inner div move. You want to set the margin on the inner div to make it scroll horizontally, and set overlay:hidden on the outer div.

First, are you using the jQuery UI library? Your second example looks like you might.
Try this, does it do something similary to what you are trying to accomplish?
<div id="innerscroll">
Some Content...
</div>
<div class="nav-next>
Next
</div>
<div class="nav-previous">
Previous
</div>
<script type="text/javascript">
$('.nav-next').click(function(e) {
$('#innerscroll').animate({
right: 100
});
});
$('.nav-previous').click(function(e) {
$('#innerscroll').animate({
left: 100
});
});
</script>
If not, your example looks like you are doing a couple things:
Setting the padding with CSS
Setting padding on mouseover
Is that what you want to do?

Jquery animate isn't animating

I'm working on a web site that uses the jquery animate function to expand the web site from the top left corner when it is loaded. I wasn't actually the one who wrote the code for that feature so I'm not overly familiar with it. It did work at one point but at the moment it doesn't seem to be working at all. I know the .js file is being loaded and is running because the first bit of code in it is a time delay that shows a "Page is being loaded" message. But then it just shows the page already loaded instead of animating the page appearing from the top left and sliding in. I included the CSS and mark up also although I don't believe that's where the problem lies. Any help would be appreciated! Thanks!
Note: We're using Jquery version 1.7.2
The CSS:
#builder
{
position:relative;
min-height:100%;
min-width:100%;
z-index:999;
}
The JavaScript:
function hideIt() {
document.getElementById("wait").style.display = "none";
}
setTimeout("hideIt()", 1000);
function showIt() {
document.getElementById("builder").style.display = "block";
}
setTimeout("showIt()", 2500);
function build() {
$(document).ready(function () {
$("#builder").animate({ height: '0%', width: '0%' }, 1);
$("#builder").animate({ height: '100%', width: '100%' }, 2000);
});
}
The mark up:
<body onLoad="build()">
<img src="wait.gif" id="wait" style="display:block;" />
wait.gif is just a picture that says "page is loading"...
And the page is wrapped in these:
<div id="builder" align=center style="display:none;">

If the #builder element is hidden for 2.5 seconds before it's shown, the animation will be completed by the time the element is shown. Remove the inline function on body onLoad and try:
function hideIt() {
$("#wait").hide();
}
function showIt() {
$("#builder").show(2000); //should do somewhat the same as animating from the top left
}
$(function() {
setTimeout(hideIt, 1000); //no need to quote the functions and eval them
setTimeout(showIt, 2500);
});
or just
$("#wait").delay(1000).hide(10);
$("#builder").delay(2500).show(2000)

Likely that it's being animated long before your show() is invoked. So by the time it's displayed, the animation is done.

Try adjusting your code like so:
$(document).ready(function() {
$('#wait').hide(1000, function(){ // hide the #wait
$("#builder").show().animate({ // then show, then animate #builder
height: '100%',
width: '100%'
}, 2000);
});
});
Side Note: Remember that when you're using percentages and the element containing #builder, also needs to have it's height and width set.

jQuery hover animation

I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. E.g. I have light green as background color and dark green as hover background color, then it should fade from the one to the other side.
I played a bit around with jQuery but could get the result that I wanted:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});

You need to use a decent color plug-in. See jQuery animate backgroundColor for more information.
Also, your original code is not really going to do anything, as you want it to animate to another colour afterwards.
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
});
});
EDIT: see http://jsfiddle.net/eHXNq/2/ for example.

I don't have much experience with jQuery, but it looks like just a copy-and-paste mistake, since you have the same color in both .animate()s

I believe you are not using the hover function like you should. the second function is used when the user leave the box so your should return to the original color.
White for example:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
});

$(".box").hover(
function () {
// this is mouseover
},
function () {
// this is mouse out
}
);
see example here
http://jsfiddle.net/krRse/

review this code, I think this might help you!!!
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
take a look at this link too,
http://api.jquery.com/hover/

60 boxes? Please use event delegation, or live.