login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div coordinaten

Offline Raze - 06/04/2009 14:35 (laatste wijziging 06/04/2009 16:56)
Avatar van RazePHP beginner Ik heb deze topic doorgelezen, maar ook ik zit met hetzelfde probleem
http://www.sitemasters.be/forum/3/28672

er wordt in die topic wel een aantal links gegeven naar quircksmode, maar het probleem is dat ik dat totaal niet begrijp. ook niet dat van offsettop/offsetleft  .

Ik wil dus gewoon de x-en y-coordinaat van de div in 2 textarea's.
met de muiscursor is dit me al gelukt (dus de muiscoordinaten in 2 textarea's).

bijkomend: ik heb wel verschillende div's op een pagina die ik uit een database haal, en ik gebruik prototyp/script.aculo.us.

EDIT: ik heb ondertussen dit script ook geprobeerd (http://gathering.tweakers.net/forum/list_messages/1128897), maar ik krijg het gewoon niet aan de praat. (het script zelf wel, maar enkel maar voor één div, terwijl ik meerdere div's op mijn pagina heb).

EDIT2: ik heb het bijna gevonden:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. 	function getPosition(element) {
  3. 		var left = 0;
  4. 		var top = 0;
  5. 		if(element.offsetParent) {
  6. 			while(element) {
  7. 				left += element.offsetLeft;
  8. 				top += element.offsetTop;
  9. 				element = element.offsetParent;
  10. 			}
  11. 		}
  12. 		return {offsetLeft: left, offsetTop: top};
  13. 	}
  14.  
  15. 	var element = document.getElementById('movable_div1');
  16. 	var pos = getPosition(element);
  17. 	alert(pos.offsetLeft + ', ' + pos.offsetTop);
  18. </script>


dit script geeft de coordinaten correct weer, maar in een alert.
Hoe kan ik deze nu in een textvak zetten?

2 antwoorden

Gesponsorde links
Offline MiST - 06/04/2009 18:01
Avatar van MiST Lid maak een textarea. Geef het een id.

Op de plaats waar je je alert geeft, zet je: document.getElementById('<textarea_id').innerHTML = pos.upperleft ... en heel het argument 
Offline Raze - 06/04/2009 19:33 (laatste wijziging 06/04/2009 20:32)
Avatar van Raze PHP beginner mmmh nee dat werkt niet

ik heb nu
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('tfX_<?php echo $rij_div['divid']; ?>').innerHTML = X;
  2. document.getElementById('tfY_<?php echo $rij_div['divid']; ?>').innerHTML = Y;



X en Y zijn variabelen en bevatten de respectievelijke coordinaten (heb ik gecontroleerd dmv een alert, en dat werkt)

ik krijg nu terug dat getElementById leeg of null is.

Hier de volledige code:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.   function getAbsolute(id) {
  3.  posx = document.getElementById(id).offsetLeft;
  4.  posy = document.getElementById(id).offsetTop;
  5.  var X = posx;
  6.  var Y = posy;
  7.  alert('X:' + X + 'Y:' + Y);
  8.  
  9.  }
  10.  </script>


EDIT: hier de volledige code --> de alert werkt, maar er wordt niets in de inputvelden geplaatst.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <form id="div_form">
  2. <label>X:</label><input type="text" id="divtext1" value="" />
  3. <label>Y:</label><input type="text" id="divtext2" value="" />
  4. <input type="submit" value="ok" onclick="getAbsolute('test')" />
  5. </form>
  6. <div id="test" style="position: absolute; width: 100px; height: 100px; border: 1px solid #000000; top: 100px; left: 100px;" >Test</div>
  7. <script type="text/javascript">
  8.     new Draggable('test');
  9.   </script>
  10.    <script type="text/javascript">
  11.   function getAbsolute(id) {
  12.  posx = document.getElementById(id).offsetLeft;
  13.  posy = document.getElementById(id).offsetTop;
  14.  var X = posx;
  15.  var Y = posy;
  16.  
  17.  alert('X:' + X + 'Y:' + Y);
  18.   document.div_form.divtext1.value = X;
  19.   document.div_form.divtext2.value = Y;
  20.  
  21. }
  22.  </script>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s