We Keep Coding

Div changes to wrong position when trying to animate with Jquery

I'm a bit new to Javascript and jQuery and I'm having trouble animating something correctly. I'm trying to make a <div> move just a few pixels to the left when hovering over something, but when you hover over the thing, the Div immediately moves all the way to the left side of the screen.
Here the jQuery code:
$(window).ready(function() {
$(".article").hover(function() {
$(".suddenlyNinjas").animate({"left": "-5px"}, "slow");
});
});
Also here is the CSS of the div I'm trying to move:
.suddenlyNinjas
{
background-color:black;
height:50px;
width:125px;
position:absolute;
z-index:2;
top:350px;
}

Animate uses it's absolute position if I recall. So instead of moving it over -5 pixels from it's current position, it's moving it to -5px of the entire window.
Have you tried putting a div with position:relative around the suddenlyNinjas div?
If that doesn't work, just subtract 5 from it's current position to get the new target position you want.

Element disappears when animating relative wrapper width with jQuery

I have a strange problem that happens when I animate the width of a relative positioned element which contains an absolute element. While the animation is running, inner element dissapears. When the animation is complete, inner element shows.
Here is the demo:
http://jsfiddle.net/R4Cj5/
When I remove parent element position: relative then inner element is shown while animation is running, but then I can't position it relatively to the parent.
Basically box with the % should be visible al the time
Does anyone have any idea whats happening here?
FIXED : I just added overflow: visible !important; to relative
positioned element
working example : http://jsfiddle.net/R4Cj5/26/

I think it might be a jQuery animate thing. I would love to see a working solution without any hacks, but for now here is something you might find useful! :-)
I basically added another function in the animate, upon completion it will animate the 90% to hover above the progress-bar
complete: function() {
$percent.animate({top: "-26px"})
}
in this use-case scenario, you can also remove/comment out the top: -26px from .progressbar .percent in the stylesheet. Also I added height: 20px; to the styling for .progressbar .percentage so you could see the % change as it glides across.

jQuery to update css height of element after animating

Here is the fiddle I'm working on: http://jsfiddle.net/fFYqF/
Basically it's a h1 above an h2 with some hidden paragraphs in-between them. This is all contained inside a div which I am trying to make visually centered (horizontally and vertically on the screen. I have used this css on the container div to center it on the page:
div#holder {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height:40%;
width:60%;
min-width:300px;
}
For this to work the width and the height of the div must be specified.
I have 2 problems... first, I don't know the height of the div so I have tried to use jQuery to apply it dynamically:
var h = $('#holder').height();
$('#main').css('height', h + 'px');
Secondly, I have a further bit of jQuery to animate the paragraphs of text open. This changes the height of the holder div thus rendering the earlier calculated height incorrect and the div is no longer vertically centered.
Is there a way to have the holder div always centered on the page? I.e. it should move up when it is opening.
Please see the fiddle above to see what I mean. Thanks

I have updated a branch of your fiddle to use a mixture of using .animate() with the height as well as the top position of the element to make it look like its opening up.

Have you tried the .animate method instead? I haven't tested this in a vertical-centered situation like you're describing, but I've used this method to increase the height of my containers when I'm bringing other elements into view.
$('#main').animate({height: '+='h }, 'slow');

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)

With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform

From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

jQuery: resizing element cuts off parent's background

I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?

Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)

Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.

Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.