login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div posititie

Offline avickum - 30/09/2010 18:58
Avatar van avickumNieuw lid Hallo,

Hoe laat je elke div zijn eigen positie weergeven?

11 antwoorden

Gesponsorde links
Offline smtp - 30/09/2010 19:35
Avatar van smtp Nieuw lid hoe bedoel je weergeven?
CSS position?
Offline avickum - 30/09/2010 19:40
Avatar van avickum Nieuw lid Als in de CSS van een div: left: 10px, top: 20px; staat moet dat in de div staan:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div>Left = 10 en Top = 20</div>


(als de left en top van die css dus worden veranderd moet dat in de div ook veranderen)
Offline shamrock - 30/09/2010 19:44
Avatar van shamrock Lid je zult dit met javascript moeten doen

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById("div").innerHTML = "Links = " + document.getElementById("div").style.left + " en Top = "  + document.getElementById("div").style.top;

niet getest maar zoiets moet het ongeveer worden
Offline avickum - 30/09/2010 19:50
Avatar van avickum Nieuw lid Ik weet dat het met javascript moet, maar ik weet niet hoe ik javascript waardes in PHP zet, als je in PHP iets wil neerzetten gebruik je $blabla = "blabla"; en dan kun je gwn $blabla neerzetten in je tekst, maar ik weet niet hoe dat met javascript werkt.

Waar moet ik die code neerzetten en hoe pas ik dat toe in de div?
Offline shamrock - 30/09/2010 19:55
Avatar van shamrock Lid je zet in html een div met id = div1
volgend div is met id=div2 (id moet uniek zijn... heb je dezelfde id's worden javascriptcodes voor dat id op beide divs toegepast).


De js code zet je in je head... Je geeft met bovenstaande code een waarde in je div. (in bovenstaand geval dus: "Links = ... en Top = ..."...

De code zet je bovinin tussen je head tags:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">
  2. var div1 = "div1";
  3. document.getElementById(div1).innerHTML = "Links = " + document.getElementById(div1).style.left + " en Top = "  + document.getElementById(div1).style.top;
  4. </script>

Het div waarin deze tekst komt te staan moet het id div1 hebben.
Wil je dit veranderen in bovenstaande code var div1 = "ander_id".

Wil je dit weergeven in meerdere divs doe je dit:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">
  2. var div1 = "div1";
  3. var div2 = "div2";
  4. var div3 = "div3";
  5.  
  6. document.getElementById(div1).innerHTML = "Links = " + document.getElementById(div1).style.left + " en Top = "  + document.getElementById(div1).style.top;
  7.  
  8. document.getElementById(div2).innerHTML = "Links = " + document.getElementById(div2).style.left + " en Top = "  + document.getElementById(div2).style.top;
  9.  
  10. document.getElementById(div3).innerHTML = "Links = " + document.getElementById(div3).style.left + " en Top = "  + document.getElementById(div3).style.top;
  11. </script>


enz...

duidelijk?
Offline avickum - 30/09/2010 20:00
Avatar van avickum Nieuw lid Ik denk niet dat dit gaat lukken met het systeem dat ik nu heb, ik heb dus een profielensysteem, als je in de database een rij toevoegd dan moet je de x,y, z-index invullen en aan de hand daarvan word er een div op je profiel gezet op de positie die in de database staat. Je kunt als beheerder van je profiel met het volgende script de div verplaatsen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!--
  2. var ie=document.all;
  3. var nn6=document.getElementById&&!document.all;
  4.  
  5. var isdrag=false;
  6. var x,y;
  7. var dobj;
  8.  
  9. function movemouse(e)
  10. {
  11.   if (isdrag)
  12.   {
  13.     dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
  14.     dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
  15.     return false;
  16.   }
  17. }
  18.  
  19. function selectmouse(e) 
  20. {
  21.   var fobj       = nn6 ? e.target : event.srcElement;
  22.   var topelement = nn6 ? "HTML" : "BODY";
  23.  
  24.   while (fobj.tagName != topelement && fobj.className != "dragme")
  25.   {
  26.     fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  27.   }
  28.  
  29.   if (fobj.className=="dragme")
  30.   {
  31.     isdrag = true;
  32.     dobj = fobj;
  33.     tx = parseInt(dobj.style.left+0);
  34.     ty = parseInt(dobj.style.top+0);
  35.     x = nn6 ? e.clientX : event.clientX;
  36.     y = nn6 ? e.clientY : event.clientY;
  37.     document.onmousemove=movemouse;
  38.     return false;
  39.   }
  40. }
  41.  
  42. document.onmousedown=selectmouse;
  43. document.onmouseup=new Function("isdrag=false");
  44.  
  45. //-->


Nu moet dus die positie worden opgeslagen als je op een opslag-knop klikt.

De gegevens ophalen uit de database werkt dus
De divs verslepen werkt

Het enigste wat ik nu dus nodig heb is de nieuwe positie opslaan.
Offline shamrock - 30/09/2010 20:04
Avatar van shamrock Lid Dat gaat zo niet lukken...

dan moet je eens zoeken hoe je javascript kunt gebruiken in php...
http://www.goog...ble+in+php

Daar kan ik je verder ook niet zo mee helpen. volgens mij moet dat met JQuery maar weet ik niet zeker
Offline avickum - 30/09/2010 20:34 (laatste wijziging 01/10/2010 14:58)
Avatar van avickum Nieuw lid Ik ben er net achtergekomen dat tx en ty (in de code) de nieuwe posities zijn! Hoe sla ik die op?
Offline Ibrahim - 01/10/2010 21:52
Avatar van Ibrahim PHP expert Als je waarden in je database hebt, kun je die aan javascript doorgeven door die gewoon te echoën:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var phpValue = <?php echo $databaseValue; ?>;
Offline avickum - 01/10/2010 22:19
Avatar van avickum Nieuw lid Het moet juist andersom, hij moet vanuit de javascript naar de database
Offline Ibrahim - 02/10/2010 16:22
Avatar van Ibrahim PHP expert AJAX is dan jou oplossing.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.185s