We Keep Coding

JQuery Overflowed Div, animate shifting

Not sure how to word this, so a little jsfiddle work:
http://jsfiddle.net/UwEe2/
That's the basic idea for what I need done, except that I am in need of the image to be centered (so that the very center, horizontally and vertically, of this image, appears in the little 250x250 window and is capable of being scrolled in all four directions to the edges of the image.
What I have, which would work if I would get the exact height and width of the image halved, http://jsfiddle.net/UwEe2/599/, which uses a second div inside the first with style="position:relative; top:-330px; left:-330px;", which shifts the image more to where I need it, but disallows the scrolling of the image left and up any further than the initial screen.
Hopefully this makes sense...I'm rather at a loss right now.

All you need to do is set the initial scrollTop and scrollLeft to the size of the image minus the container divided by two.
$('#container').scrollTop(($('#container img').height()-$('#container').height())/2).scrollLeft(($('#container img').width()-$('#container').width())/2);
http://jsfiddle.net/UwEe2/600/

Selectively reveal background image

I am trying to create an interactive page where there's a ball. When I click on it, 2-3 random balls appear on the page. Each of those, when clicked, produce 2-3 of their own and the page slowly fills up with such balls. I have done this part using Jquery.
Now the page has a background image that is hidden from the user, and all he sees is 'white'. As and when a new ball appears, a circular region behind it (region being twice in size to that of ball) becomes transparent to reveal that portion of the background image, kind of like how the map is revealed in Age of Empires based on where the player goes.
How can I achieve this selective-revealing of background image based on the position of newly-created divs ? Can it even be done using just jquery/css and NO flash ?
My Jquery code for creating new balls looks like this :
$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table
while(count< no_of_divs)
{
//code to calculate random x,y coordinates and save them to posx and posy
var newdivid='div'+count;
$newdiv = $('<div/>').css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none',
'background':'ball.png'
}).appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
count++;
}
});

You can use CSS background-clip, background-position and border-radius. Your newly created divs should be bigger than 'ball.png' with some border-radius so they appear as circles.
Then you can set the background position to be equal to negative div's position:
if div is on left: 100px; top: 40px then background-position should be: -100px -40px
Working sample here: http://jsfiddle.net/bndcS/
EDIT
Please see the fiddle here: http://jsfiddle.net/UX3B6/ The 'balls' appear with effect and delay.
Only one line of CSS had to be added :-)
EDIT 2
As for background and its negative coordinates: imagine that you have a big div with a nice image in the background. Now you create a small div on top of the big one. You set it in the top left corner (0,0) and set the background to the same image of the big div. Images match perfectly. Now you want to move your small div a little bit (lets say 20px right, 20 px down). Now the images do not match - in order to make things working again you need to move background image of the small div in the opposite direction you moved the div itself, hence negative coordinates: (20px left, 20px up = -20px)

You can use css3 transitions here is sample and tutorial it might useful
http://css3.bradshawenterprises.com/transitions/

vertical align with specific margin top and bottom

I have a div (the green one) positioned in the middle of the window but I want that when I resize the window, this div ALWAYS respect a margin (the height of the logo and the footer).
I really don't get it. Could anyone have a look at it? The proyect is this one: http://sfrpsicologia.com/inicio.html
Thanks for everything

give ol & li width using %

JQuery/Javascript to keep Absolutely Positioned div in place with browser zoom

Looking at this layout, I want to use jQuery/Javascript to put the Red Box, in the Gray Container under the left small Blue Box whether zooming in or out with any browser.
I am trying to accomplish this by NOT putting the redbox #badplacement div inside the Gray Container's #outerwrapper div. Any idea how this can be accomplished?
(To start, I change the #badplacement css left to 243px, on normal browser zoom level, where it is under the small blue box.)
Fiddle: http://jsfiddle.net/Q56up/

Clone the outerwrapper div with css rules but without background and place it over the original (position:absolute, z-index:1). Put Red Box inside and position it relative.

Strange extra DIV height in Google Chrome

I have two DIVs:
first one is narrow and is floated left and displays a kind of vertical tab structure.
second one displays content per selected item in the left DIV
You can see a simplified example here on JSFiddle.
As shown in example, left DIV is usually higher than the right one. That's why the right DIV is vertically shifted down to align it to the bottom of the selected item in the left DIV so the content is always in view when a user selects an item on the left.
Everything works as expected in Firefox and IE but not in Chrome.
Chrome issue
Whenever you select an item in the left DIV that should reposition the right DIV, the whole container of both gets higher even though non of the contained DIVs is as heigh.
What seems to be going on here and what am I doing wrong?

You can hide the extra height that is added by using .container { overflow-y: hidden; }

Set ur right side div container to position: absolute (i.e height of right and left container to be same and set width as your own)