How to position div boxes to each other
See http://www.kaizoku.nl/beta/index.html
I have 3 div boxes on my site, each has the property display set to none and with the jQuery function Sh开发者_Go百科owHide I make the box visible on click. Now the problem I have is that the boxes dont respond to each other visibility, what I would like is that when I click for example box 1 which is above box 3, that box 3 will move to the bottom + 10px of box 1 instead of box 1 overlapping box3...
any idea's?
Add an additional animate to the first function:
function ShowHide() {
if('block' == $('#slidingDiv').css('display')){
$('div.box3').animate({top: '-=300'}, 1000, function() {
$("#slidingDiv").animate({ "height": "toggle" }, { duration: 1000 });
});
}else{
$('div.box3').animate({top: '+=300'}, 1000, function() {
$("#slidingDiv").animate({ "height": "toggle" }, { duration: 1000 });
});
}
}
You can also add the animate/toggle function after the if/else and not as a callback, to save some code lines, you have to see how it works out animation wise.
If you want to use a listener and prevent overlapping actions make it like that, instead of function ShowHide ,
$(document).ready(function() {
handler = function() {
$(this).unbind('click', handler)
if ('block' == $('#slidingDiv').css('display')) {
$("#slidingDiv").animate({ "height": "toggle" }, 1000, function (){
$('div.box3').animate({ top: '-=300' }, 1000 , function() {
$("div.box1 a").click(handler);
});
});
} else {
$('div.box3').animate({ top: '+=300' }, 1000, function () {
$("#slidingDiv").animate({ "height": "toggle" }, 1000, function() {
$("div.box1 a").click(handler);
});
});
}
}
$("div.box1 a").click(handler);
});
Try using:
position:relative;
float:left:
clear:both;
on each div...
Sounds like you need to get the position of Box3 relative to Box1. You may want to add columns in for Box1+Box3 and Box2 to help with the relative positioning.
精彩评论