X en Y binnen een div
Ik heb een div van 844 x 899, en binnen die div moeten de leden een plakbriefje kunnen plaatsen. Als ik in de database dus bij X invul: 10 en bij Y ook 0, dan wil ik dus graag dat dat plakbriefje 10 pixels verwijderd staat van de linksbovenhoek van die div, maar hoe moet dat?
Alvast bedankt
of padding als je rechtstreeks in de div bewerkt
Ik wil graag een soort habbo profiel, daar kun je widgets en plakbriefjes verslepen binnen een bepaald gebied op je profiel. Alleen kan ik niks bruikbaars vinden..
Quote:
<html>
<style>
div#wrapper{
position:relative;
top:0px;
left:10px;
width:844px;
height:899px;
border:1px solid #000;
}
div#plakbrief{
position:relative;
float:left;
margin-top:10px;
margin-left:10px;
width:100px;
height:100px;
border:1px dashed #000;
}
</style>
<div id="wrapper">
<div id="plakbrief">test</div>
<div id="plakbrief">test</div>
</div>
</html>
[/qoute]
<style>
div#wrapper{
position:relative;
top:0px;
left:10px;
width:844px;
height:899px;
border:1px solid #000;
}
div#plakbrief{
position:relative;
float:left;
margin-top:10px;
margin-left:10px;
width:100px;
height:100px;
border:1px dashed #000;
}
</style>
<div id="wrapper">
<div id="plakbrief">test</div>
<div id="plakbrief">test</div>
</div>
</html>
[/qoute]
Gewijzigd op 27/09/2010 18:06:51 door Karizma Yusuf
uhm.. ik probeer het uit te leggen:
je hebt een profiel, en op dat profiel kun je 'items' verslepen. De X en Y as moeten dan in de database worden opgeslagen, maar als je de X en Y as opslaat vanaf de rand van het scherm, dan staat dat item niet op alle computers op de goede plek.
Ik heb dus 1 grote div en binnen die div moet je items verslepen, de X en Y as van die items moeten dus niet vanaf je computerscherm rand worden berekend maar vanaf de rand van de div
Edit: Ik heb even een voorbeeldje gemaakt:
http://easy-upload.nl/f/K9ftPpso
Het blauwe is de achtergrond van de site, het witte kader is de pagina, het rode gedeelte is de div, en het groene is het item. Nu wil ik dus dat de afstand tussen de rand van de div en de rand van het item word gemeten en word opgeslagen in de database, en dat als je de boel dan opslaat, dat item bij ALLE computers precies zoveel pixels van de rand van de div afstaat.
Gewijzigd op 28/09/2010 15:51:38 door Lord Gaga
Als je in css 'left' en 'top' gebruikt dan is dat het aantal pixels vanaf de rand van je computer, kun je zoiets ook doen maar dan het aantal pixels vanaf de tabel waar de div in staat? (position moet alleen wel 'absolute' zijn!)
Gewijzigd op 29/09/2010 17:38:41 door Lord Gaga
Dus:
1) Download jQuery (www.jquery.com) en jQuery UI (http://jqueryui.com/download).
2) Verwijs naar de code in je bestand.
Code (php)
1
2
2
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
3) Doe via jQuery een Ajax request waarin je een PHP bestand aanroept. Deze geeft met json_encode() een array terug met op welke positie welke divjes staan.
4) Loop door de array. Maak voor elk element een divje aan. De x en de y waarde set je via jQuery door de CSS aan te passen:
Code (php)
1
$(itemvanarray).css({ top: itemvanarray.y + "px", left: itemvanarray.x + "px"});
5) Maak de divjes draggable:
Code (php)
1
$("#draggable").draggable(); //Zie http://docs.jquery.com/UI/Draggable
Nu of:
6a) Roep een functie aan wanneer iemand stopt met slepen. Elke keer als iemand iets versleept heeft doe je dan een ajax request:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
//Zie http://docs.jquery.com/UI/Draggable
$( ".selector" ).draggable({
stop: function(event, ui) {
//Doe hier een ajax request waarin je de nieuwe positie van het divje doorgeeft.
//Met ui.position kan je de positie van het element opvragen (top, left).
}
});
$( ".selector" ).draggable({
stop: function(event, ui) {
//Doe hier een ajax request waarin je de nieuwe positie van het divje doorgeeft.
//Met ui.position kan je de positie van het element opvragen (top, left).
}
});
Of:
6b) Maak een knop 'sla op'.
7b) Vang het click event af:
Code (php)
1
2
3
2
3
$('#slaopknop').click(function() {
//Zet hier code van stap 8 en 9 in.
});
//Zet hier code van stap 8 en 9 in.
});
8b) Loop door alle divjes in je hoofddiv. Voor elk divje vraag je de top/left op. Zet het id van de div, de x (left) en de y (top), in een array.
9b) Doe een ajax call naar een PHP script en geef de array mee. Dit script insert/update vervolgens rijen in de database met de posities van de verschillende divjes.
Tot slot
10) roep "Eureka!"
Je kunt nu de divjes inladen vanuit de database op de goede positie. Daarnaast kan de gebruiker de divjes verslepen waarna de nieuwe coordinaten automatisch in de database gezet worden!
Gewijzigd op 29/09/2010 19:10:53 door The Force
JQuery lukt me niet echt, dus ik heb gedaan wat er in die link stond, de posities van de divs kloppen nu (helemaal perfect), ik moet nu alleen nog dat de X en Y as van de div in de div staan, ik heb nu echt van alles gezocht en geprobeerd maar het lukt gewoon niet
Gewijzigd op 29/09/2010 20:55:24 door Lord Gaga
Code (php)
1
2
3
2
3
<div style="left: 10px; top: 10px;">
// hier moet dus X: 10 en Y:10 staan, gewoon de left en top weergeven dus //
</div>
// hier moet dus X: 10 en Y:10 staan, gewoon de left en top weergeven dus //
</div>
Code (php)
1
2
3
2
3
<div style="left: 10px; top: 10px;">
<span class="coordinates">X: 10, Y:10</span>
</div>
<span class="coordinates">X: 10, Y:10</span>
</div>
Dan met css opmaken:
Code (php)
1
2
3
2
3
.coordinates {
color: green;
}
color: green;
}
Bijvoorbeeld.
Gewijzigd op 29/09/2010 22:20:38 door Lord Gaga
Gewijzigd op 30/09/2010 16:31:10 door Lord Gaga
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$select = "SELECT * FROM leden_profiel_items WHERE memberid = '".$memberid_owner."'";
$query = mysql_query($select)or die(mysql_error());
if (mysql_num_rows($query)==0) {
}
else
{
while($list = mysql_fetch_object($query)) {
$id = $list->id;
$x = $list->x;
$y = $list->y;
$z = $list->z;
$titel = $list->titel;
$tekst = $list->tekst;
$type = $list->type;
$opmaak = $list->opmaak;
?>
$query = mysql_query($select)or die(mysql_error());
if (mysql_num_rows($query)==0) {
}
else
{
while($list = mysql_fetch_object($query)) {
$id = $list->id;
$x = $list->x;
$y = $list->y;
$z = $list->z;
$titel = $list->titel;
$tekst = $list->tekst;
$type = $list->type;
$opmaak = $list->opmaak;
?>
<script language="JavaScript">
var div = "div";
document.getElementById(div).innerHTML = "Left = " + document.getElementById(div).style.left + " en Top = " + document.getElementById(div).style.top;
</script>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
if ($type == "widget") {
echo "<div name=\"1\" class=\"".$bewerken."\" style=\"cursor: ".$cursor."; position: absolute; Z-index: ".$z."; left: ".$x."px; top: ".$y."px;\">";
table_head_text("350","".$opmaak."","".$titel."");
echo "<span id=\"div".$id."\"></span>";
table_foot_text("".$opmaak."");
echo "</div>";
}
?>
if ($type == "widget") {
echo "<div name=\"1\" class=\"".$bewerken."\" style=\"cursor: ".$cursor."; position: absolute; Z-index: ".$z."; left: ".$x."px; top: ".$y."px;\">";
table_head_text("350","".$opmaak."","".$titel."");
echo "<span id=\"div".$id."\"></span>";
table_foot_text("".$opmaak."");
echo "</div>";
}
?>
Zo heeft elke div dus een eigen ID, maar hij geeft de tekst: Left = .., Top = ... niet weer? Wat doe ik fout? of hoe moet het anders?
Voor het maken en opslaan van de posities gebruikte ik jQuery.
Ik sla het op als een string met alle instellingen erin, zoals dit:
| top | left | height | width | inhoud
!sep!120?sep?10?sep?100?sep?100?sep?blablabla bladie bladie
vervolgens met php exploden en er dit van maken:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#vak1 {
border: 1px solid black;
overflow: hidden;
position: absolute;
top: 120px;
left: 10px;
height: 100px;
width: 100px;
}
border: 1px solid black;
overflow: hidden;
position: absolute;
top: 120px;
left: 10px;
height: 100px;
width: 100px;
}
en dan dit:
Code (php)
1
2
3
2
3
<div id="container">
<div id="vak2">hhallo</div>
</div>
<div id="vak2">hhallo</div>
</div>
en oja, de css van #container:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#container {
position: relative;
border: 1px solid black;
height: 842px;
width: 595px;
margin: 30px;
}
position: relative;
border: 1px solid black;
height: 842px;
width: 595px;
margin: 30px;
}