I’m trying to position some divs children of the same parent, giving offset top and offset left. It’s doing it almost ok, but for some reason jquery is adding the height of the previous item to the top of the next, can someone help me?
EDIT: this is my code
<html>
<head>
<style>
.earea {overflow: hidden;width: 381px;height: 468px;margin: 0 17px;background: #f2f2f2 url(../images/earea_bg.jpg) no-repeat;padding: 10px 5px 5px;}
.doc .p{margin: 8px 0;}
.clipper{width: 100%;height: 100%;overflow: hidden;}
.counter{font-size: 8px;float: right;cursor: pointer;opacity:0;}
.pcount,.ncount,.cncount,.cpcount,.cbtn{background: transparent;padding: 2px;border: 1px none #2f4715;border-top-style: inset;border-left-style: inset;color: #FFF;}
.overl{border:1px solid black;opacity:0;background-color: #FFF;cursor: pointer;}
.editor{/*position: absolute;top: 0;left: 0;*/}
.cncount,.counted,.ncount{background:#FF0000;}
.cpcount,.counter,.pcount{background: #598527;}
</style>
</head>
<body>
<div class="earea">
<div class="clipper">
<div class="doc">
<div>
<div class="tarea">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function trace(){
if(window.console==undefined)
alert(arguments);
else
console.log(arguments);
}
function rd(f,li,tl){
var di=li-tl;
f.text(di);
if(di>0){f.removeClass().addClass("pcount").prepend("+")}else{f.removeClass().addClass("ncount")}
return di;
}
function zpo(){
var f=null;
var ov=null;
var ct=null;
for(fl in tflds){
f=tflds[fl];
ov=$(f).data().ov;
ct=$(f).data().ct;
ov.css({width:f.width()+4,height:f.height()+2}).offset({top:gy(f),left:gx(f)-4}).end();
ct.offset({top:gy(f),left:gox(f,ct)}).end();
}
}
function cct(f){
var ct=$("<div><div>+0</div><div class='cbtn'>Editar</div></div>").addClass('counter').css('z-index',++zi);
return ct;
}
function cov(f){
var ov=$("<div></div>").addClass('overl').css({'z-index':++zi});
return ov;
}
function ae(p,c,x,y,w,h){
p.append(c);
c.css('z-index',++zi).width(w).height(h).offset({left:x,top:y});
}
function bp(){
var els=av.pags[pa].elems;
var de=null;
var ze=null;
var le=null;
var ov=null;
var ct=null;
var dt=$(d.find(".tarea"));
var x=0;
var y=0;
var w=0;
var h=0;
for(e in els){
var nm=els[e].nombre;
var rx=els[e].x;
var ry=els[e].y;
var rw=els[e].w;
var rh=els[e].h;
var fh=els[e].fh;
trace(av.pags.h, d.find(":first").height(), ry, dyo);
x=gsx(av.pags.w, d.find(":first").width(), rx, dxo);
y=gsy(av.pags.h, d.find(":first").height(), ry, dyo);
w=gsw(av.pags.w,rw,d.find(":first").width());
h=gsw(av.pags.h,rh,d.find(":first").height());
if(els[e].tipo=="txt"){
var txt=els[e].text;
var lim=els[e].limit;
var de=$("<div></div>").addClass(nm).html(txt);
if(fh!=undefined){
de.css("font-size",gsw(av.pags.w,fh,d.find(":first").width())+"px");
}
ae(dt,de,x,y,w,h);
ov=cov(de);
ct=cct(de);
var di=rd($(ct.find(":first")),lim,txt.length);
tflds.push(de);
dt.append(ov);
dt.append(ct);
de.data({ov:ov,ct:ct});
ov.add(ct).data({o:ov,c:ct,di:di,dt:de,l:lim}).mouseover(ovr).mouseout(out);
}else if(els[e].tipo=="img"){
var src=els[e].src;
de=$("<img/>").attr("src", src);
ae(dt,de,x,y,w,h);
}
}
zpo();
}
var tflds=[];
var av={
nombre:"hpage",
pags:{
w:28.82,
h:23.92,
pag1:{
elems:{
elem1:{tipo:"img",x:0,y:0,w:28.92,h:23.92,src:'images/z_hpage.jpg'},
elem2:{tipo:"txt",x:4.36,y:4.43,w:20.02,h:1.13,text:"Titular del aviso",limit:255,nombre:"tav",fh:0.69},
elem3:{tipo:"txt",x:5.91,y:6.17,w:18.45,h:1.86,text:"Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",limit:255,nombre:"stav",fh:0.57},
elem4:{tipo:"txt",x:5.77,y:8.02,w:18.45,h:1.13,text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..",limit:255,nombre:"cav",fh:0.5}
}
}
}
};
var zi=1000;
var _d=0;
var doc=$(document);
var pa="pag1";
var z=null;
var d=null;
var l=null;
var dtc=null;
var dsc=null;
var dcc=null;
var dto=null;
var dso=null;
var dco=null;
var dxo=0;
var dyo=0;
var inf={tav:{text:"Titular del aviso",limit:"255"},stav:{text:"Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",limit:"255"},cav:{text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",limit:"255"}};
function gx(t){
return t.offset().left;
}
function gox(t,c){
return gx(t)-c.width()-5;
}
function gy(t){
return t.offset().top;
}
function gspw(rw,rh,sh){
return sh*rw/rh;
}
function gsph(rw,rh,sw){
return sw*rh/rw;
}
function gsx(rw,sw,rx,xo){
return (rx*sw/rw)+xo;
}
function gsy(rh,sh,ry,yo){
return (ry*sh/rh)+yo;
}
function gsw(rpw,rw,spw){
return spw*rw/rpw;
}
function gsh(rph,rh,sph){
return sph*rh/rph;
}
function init(){
d=$('.doc');
var w=0;
var h=0;
var x =0;
var y=0;
var r=0;
var sw=$('.clipper').width();
var sh=$('.clipper').height();
var sx=$('.clipper').offset().left;
var sy=$('.clipper').offset().top;
dxo=x;
dyo=y;
if(av.pags.w>av.pags.h){
r=av.pags.h/av.pags.w;
w=sw;
h=gsph(av.pags.w,av.pags.h,sw);
x=sx;
y=sy+((sh-h)/2);
}else{
h=d.height();
w=gspw(av.pags.w,av.pags.h,d.height());
x=sx+((sx-x)/2);
}
dxo=x;
dyo=y;
d.find(":first").addClass(av.nombre);
d.find(":first").css({height:h,width:w,'background-color':"#FF0000"}).offset({top:y,left:x});
bp();
}
function ovr(e){
var o=$(e.currentTarget).data().o;
var c=o.data().c;
o.css({opacity:'0.5'});
c.css({opacity:'1'});
}
function out(e){
var o=$(e.currentTarget).data().o;
var c=o.data().c;
c.css({opacity:'0'});
o.css({opacity:'0'});
}
doc.ready(init);
</script>
</body>
</html>
Sorry, i couldn’t isolate it anymore.
Thanks,
Alexis
Thanks for the replies, i have managed to see the problem, i changed the function
offset()forcss(), setting the childrenposition:absoluteand the fatherposition:relative.For some reason the function offset try to put the next element below of the previous.