I am trying to set the offset of an element. The code works fine in Chrome, but I canโt get the offset for the change in IE;
this.moveH = function (e) { if (this.target != null){ console.log(this.target.offset()) this.target.offset({ left: e.pageX - this.target.outerWidth(true) / 2, top: e.pageY - this.target.outerHeight(true) / 2 }); } console.log(this.target.offset()) e.preventDefault(); }
If I run in chrome, the first console.log is different from the second. If I run in IE, it never changes. thank you
Update 1 The offset function is a jQuery function
Update 2 Added HTML and CSS
*{ margin:0px; left:0px; right:0px; } #applet { position: absolute; width: 700px; height: 520px; direction:ltr; text-align: center; } #puzzle{ top:80px; left:20px; position:absolute; } .left-column{ position:absolute; width:388px; } .left-puzzle{ margin-top:10px; width:388px; background-image:url("../images/left_puzzle.png"); height:83px; } .left-puzzle p{ margin-right:194px; } .right-column{ float:right; left:500px; width:182px; margin-right:10px; } .targets{ left:206px; top:1px; width:194px; position:absolute; } .target{ margin-top:10px; width:194px; height:83px; } .right-puzzle{ margin-top:10px; width:182px; height:82px; background-image:url("../images/right_puzzle.png") } #bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
HTML
<div id='applet'> <img id='bg' src='images/background.jpg' /> <div id="puzzle"> <div class="left-column"> <div class="left-puzzle"> <p>ูุจุฏุฃ ุฎูู ุงูุดุฑุฌ ููุฏู ุจุนุถ ุงูุญุจููุงุช ุฐูู ููุฌุฏ ูู ู
ุฑุญูุฉ ุงูุฌููู ููุท.</p> </div> <div class="left-puzzle"> <p>ูู
ุชุฏ ุจุทูู ุงูุธูุฑ ููู ู
ููุก ุจุงูุณุงุฆู ุนูุฏ ุงูููุงุฑูุงุช ููุทูู ุนููู ุงุณู
ุงูุญุจู ุงูุดููู .</p> </div> <div class="left-puzzle"> <p>ุชุชุทูุฑ ุฅูู ุฎูุงุดูู
ุฃู ุฅูู ุฃุฌุฒุงุก ุฃุฎุฑู ู
ู ุงูุฌุณู
ุฃุซูุงุก ุชุทูุฑ ุงูุฌููู .</p> </div> <div class="left-puzzle"> <p>ูุถูุจ ุตูุจ ูููู ู
ุฑู ูุฏุนู
ุงูุฌุณู
ููู ุงูููุงุฑูุงุช ูุญู ู
ุญูู ุนู
ูุฏ ููุฑู .</p> </div> </div> <div class="targets"> <div class="target drop" id="t1"></div> <div class="target drop" id="t2"></div> <div class="target drop" id="t3"></div> <div class="target drop" id="t4"></div> </div> <div class="right-column"> <div id="d1" class="right-puzzle drag" data-target-id="t2"> <p>ุงูุญุจู ุงูุนุตุจู ุงูู
ุฌูู</p> </div> <div id="d2" class="right-puzzle drag" data-target-id="t1"> <p>ุงูุฐูู</p> </div> <div id="d3" class="right-puzzle drag" data-target-id="t3"> <p>ุงูุฌููุจ ุงูุจูุนูู
ูุฉ </p> </div> <div id="d4" class="right-puzzle drag" data-target-id="t4"> <p>ุงูุญุจู ุงูุธูุฑู</p> </div> </div> </div> </div>
source share