Javascript animation with - javascript

I'm attempting to get certain items to animate from one location to a new one on a click of the appropriate button. Even though I used fixed positions and have javascript to set the location before the animation, things still go off the page before to the end point.
Firefox and Webkit browsers have had different errors on and off and I can't find a solid solution to this, could anyone help me out with this?
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#buttona").click(function() {
$("#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
http://coreytegeler.com/jg/

Your use of #nav li#a and .set#a worries me. IDs must be unique, so it never makes sense to use more than just an ID in a selector. This is almost certainly the cause of your animation issues.

Related

WebKit jQuery animation bug

I have two sites I'm working on where I use jQuery to animate some objects via CSS properties. Everything works fantastic in Firefox but there ware some webkit bugs where my objects disappear and reappear off screen before the animation starts.
http://coreytegeler.com/gl/ (click the text box)
$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });
http://coreytegeler.com/justin/ (click any of the boxes)
$("#nav ul li").click(function() {
$("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
$("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
$("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});
I'm sure this has to be a known error with an easy fix but I can't seem to find a fix yet :(
From what I can make out, the problem seems to be that webkit can't animate the left property from what is initially an 'auto' value to a pixel offset. What it does is set the property to 0 and then animate from there.
The one solution I can suggest, is to calculate the current pixel offset of each li element immediately before starting the animation, and set their left properties to those offsets.
Something like this:
$("#nav ul li").each(function(){
$(this).css('left', $(this).position().left + 'px');
});
jsFiddle example
This is based on your second example link.

jQuery get the document width and height excluding horizontal/vertical scrollbars

I have a piece of jQuery on my site that displays an overlay the full width and height of the window. I have an issue in that if the overlay is closed (as there is an option to close it) I lose the vertical scroll bar from my window. Is there a way to specify the width and height excluding any horizontal or vertical scrollbars?
This is my code below, the jQuery will run as soon as the page loads.
<div id="screen"></div>
$('#screen').css({ "display": "block",
opacity : 0.7,
"width" : $(document).width(),
"height" : $(document).height()
});
$('body').css({ "overflow" : "hidden" });
This works:
$('#screen').css({ "display": "block",
opacity : 0.7,
"width" : $(document).width(),
"height" : $(document).height()
});
$('body').css({ "overflow" : "auto" });

Sticking Div to Top After Scrolling Past it

Right now, I'm able to stick the div to the top after it scrolls down 320px but I wanted to know if there is another way of achieving this. Below I have my code:
jQuery(function($) {
function fixDiv() {
if ($(window).scrollTop() > 320) {
$('#navwrap').css({ 'position': 'fixed', 'top': '0', 'width': '100%' });
}
else {
$('#navwrap').css({ 'position': 'static', 'top': 'auto', 'width': '100%' });
}
}
$(window).scroll(fixDiv);
fix5iv();
});
it works, but some divs above it will not always be the same height so I can't rely on the 320px. How do I get this to work without using if ($(window).scrollTop() > 320) so I can get it to fade in at the top after the user scrolls past the div #navwrap?
Try using the offset().top of the #navwrap element. That way the element will be fixed from it's starting position in the document, regardless of where that is. For example:
function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) {
$div.css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
Example fiddle

How can i slide a div content in a particular angle using jquery

i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code
Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().
you forgot position:absolute on the #container css
$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.
I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px

Position fixed; left works fine, right doesn't

I have a span called $mySpan.
Calling
$mySpan.css({
position : 'fixed',
left : '50%',
top : '15%',
backgroundColor : 'red',
'z-index' : 1000
});
works just fine. However,
$mySpan.css({
position : 'fixed',
right : '50%',
top : '15%',
backgroundColor : 'red',
'z-index' : 1000
});
doesn't show the span.
As you can see, it's probably not a z-index problem. I'm really confused because my code is quite complex and I haven't been able to build a simple example using jsFiddle. I have no clue where to start looking for what is going wrong.
Does anyone have a hint as to why the second approach is not working? How could I debug such a problem?
Try this:
$mySpan.css({
'position' : 'fixed',
'left' : 'auto', /* <-- oftentimes, browsers screw up if 'left' is still set */
'right' : '50%',
'top' : '15%',
'backgroundColor' : 'red',
'z-index' : 1000
});
The unexpected result can be caused by a margin-right CSS property. If this property is set, remove it to fix your code.
On the second example you may have missed the $ at $mySpan?

Categories