bchavdarov
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by bchavdarov
-
davej, I modified a little your code in order to work in IE and that's what I got: <!DOCTYPE html><html><head><meta charset="utf-8"><title>Drag Me</title><style>#dragme{position:absolute;display:none;height:100px;width:100px;background-color:#eee;border:1px solid black;border-radius:15px;text-align:center;}</style><script>var mousex;var mousey;var move = false;var ldivx = 200;var ldivy = 200;var IE = document.all?true:false;if (!IE) document.captureEvents(Event.MOUSEMOVE)window.onload = init;function init() {var d = document.getElementById('dragme');d.onmousedown = mousedown;d.onmouseup = mouseup;d.onmousemove = mousemove;d.style.left = ldivx +'px';d.style.top = ldivy +'px';d.style.display = 'block';}function mousedown(e) {document.getElementById('dragme').style.color = 'red';move = true;if (IE) { mousex = event.clientX + document.body.scrollLeft; mousey = event.clientY + document.body.scrollTop; } else { mousex = e.pageX; mousey = e.pageY; }}function mouseup(e) {document.getElementById('dragme').style.color = 'black';move = false;}function mousemove(e) {if(move){ if (IE) { ldivx = ldivx + event.clientX + document.body.scrollLeft - mousex; ldivy = ldivy + event.clientY + document.body.scrollTop - mousey; mousex = event.clientX + document.body.scrollLeft; mousey = event.clientY + document.body.scrollTop; } else { ldivx = ldivx + e.pageX - mousex; ldivy = ldivy + e.pageY - mousey; mousex = e.pageX; mousey = e.pageY; }var d = document.getElementById('dragme');d.style.left = ldivx +'px';d.style.top = ldivy +'px';}}</script></head><body><div id="dragme">Drag me</div></body></html>
-
Found the solution. In fact element.style.left (or top) can be used to get values from inline styles. I tried to use the above functions and I only switched from external style sheet to internal and they worked. If we use external or internal style sheet they won't work. So I modified the functions like this: function getx() { var bg = document.getElementById("innercont"); var curleft = 0; if (bg.offsetParent) do { curleft += bg.offsetLeft; } while (bg = bg.offsetParent); return curleft;} and they work just fine
-
Hello, Recently i faced a problem which seems very odd to me and I would like to find the answer or at least acceptable explanation. But let's go straight to it. Let's have two divs one inside the other - the code is something like: <div id="imgframe"> <div id="innercont" class="dragme"> <a class="marker" style="left: 1060px; top:658px;" onclick="movepos(1060, 658)"></a> </div></div><button type="button" onclick="displayattr()">Test</button> they are styled with css like this: #imgframe { width: 950px; height: 600px; overflow: hidden;}#innercont { width: 1994px; height: 1144px; position: relative; left: -600px; top: -300px;} And with javascript I am trying to find the top and left values of the #innercont. I have written the following functions: function getx() { var bg = document.getElementById("innercont"); var xs = bg.style.left; var x = Number(xs.replace("px","")); return x;}function gety() { var bg = document.getElementById("innercont"); var ys = bg.style.top; var y = Number(ys.replace("px","")); return y;}function displayattr() { var sum = getx() + ", " + gety(); alert(sum);} Everything so far seems fine, but when I use displayattr() just after the page has been loaded it returns 0, 0. The code works fine when I use javascript to set the position of the #innercont: function reset() { var bg = document.getElementById("innercont"); bg.style.left="-600px"; bg.style.top="-300px";} They say that element.style.top sets or returns the top position of a positioned element, but it appears that it is not the same if we set the position by using css or javascript. So far I have managed to solve the problem by using "getComputedStyle" or adding onload="reset()" to the body tag but I don't want to use either since they mess my code later. If anyone has an explanation why does it happen so I'll be very grateful. Thanks in advance.
