The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

tbianco (1) [Avatar] Offline
#1
I am having some trouble with scaling divs that are floating next to each other. I am trying to make it so that the divs will float next to each other as small panes and then when they get to the middle point of the page they will scale up along with their content.

So on the onload they should all be scaled down and then at the point where they hit certain point they should scale up as I move the divs over to the left or right. Here's where the problem comes in with scaling. When I have the divs floating next to each other (float:left) then when I scale an object it will sit on top of the div on the left but push the div on the right.

So then I tried placing the div that needs to scale in a container and float the containers. Well that sorta worked but the problem is that when I scale from center and then go back to scaling it big then I run into a problem as it keeps on pushing the div down dianglely.


//CODE for scaling up
new Effect.Scale( obj , 100, {
scaleMode: {originalWidth: 472,originalHeight: 710},
scaleFromCenter:false,
scaleContent: false,
scaleFrom: 75,
afterFinish:function(effect){
var w_size = $('saint_box_img').width;
var h_size = $('saint_box_img').height;
//alert('width: '+ w_size+'
height: '+ h_size);
//Element.setStyle('saints_box',{top:'200px',heighth:h_size});
}
}
);

// CODE for scaling down
new Effect.Scale( obj , 75, {
scaleMode: {originalWidth: 472,originalHeight: 710},
scaleFromCenter:false,
scaleContent: false,
scaleFrom: 100,
afterFinish:function(effect){
Element.setStyle(obj,{fontSize:'9pt'});
var w_size = $('saint_box_img').width;
var h_size = $('saint_box_img').height;
// I tried to scale down the container box - didn't work
Element.setStyle('saints_box',{top:'200px',height:h_size});
}
}
);


Also another thing I noticed is that content doesn't scale very well. You can scale it up but I can't scale it down. So I left them both to false.