Jump to content

bchavdarov

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by bchavdarov

    how to make div popup draggable.

    in JavaScript

    Posted

    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>

    Get element.style.top(left) value

    in JavaScript

    Posted

    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 :)

    Get element.style.top(left) value

    in JavaScript

    Posted

    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.

×
×
  • Create New...