Søg
Avatar billede flol Nybegynder
01. marts 2007 - 12:40 Der er 11 kommentarer og
1 løsning

hurtigt spg: hvordan pladser jeg min Div?

hey har dette rykke script:

----------kode----------

<? session_start();
include("../connect.php");
$brugernavn = zoom;//$_SESSION['brugernavn'];
$query = mysql_query("SELECT * FROM chatbrugere WHERE bruger = '$brugernavn'") or die(mysql_error());
$row = mysql_fetch_assoc($query);

$sted = $row['sted'];
$besked = $row['besked'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3D chat test</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript">
var Div = null;
var actK = null;
window.onload = function(){
  Div = document.getElementById("minDiv");
}
function moveHere(elm){
  actK = elm.coords.split(",");
  Div.style.left = actK[0] + "px";
  Div.style.top = actK[1] + "px";
  Div.style.display = "block";
}
function sendthis() {
    var besked=document.my_form.besked.value;
   
    document.skjultiframe.location.href="gem.php?sted=" + actK + "&besked=" + besked;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>

<FORM NAME="my_form" METHOD="POST" ENCTYPE="multipart/form-data">
<div style="position:relative">
<img src="billede.jpg" width="500" height="500" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="138,127,207,196" alt="" name="1" onClick="moveHere(this)" />
  <area shape="rect" coords="206,127,275,196"  alt="" name="2" onClick="moveHere(this)" />
  <area shape="rect" coords="274,127,343,196" alt="" name="3" onClick="moveHere(this)" />
  <area shape="rect" coords="342,127,411,196" alt="" name="4" onClick="moveHere(this)" />
  <area shape="rect" coords="46,195,113,262" alt="" name="5" onClick="moveHere(this)" />
  <area shape="rect" coords="112,195,179,262" alt="" name="6" onClick="moveHere(this)" />
  <area shape="rect" coords="178,195,245,262" alt="" name="7" onClick="moveHere(this)" />
  <area shape="rect" coords="244,195,311,262" alt="" name="8" onClick="moveHere(this)" />
  <area shape="rect" coords="310,195,377,262" alt="" name="9" onClick="moveHere(this)" />
  <area shape="rect" coords="376,195,443,262"  alt="" name="10" onClick="moveHere(this)" />
  <area shape="rect" coords="24,261,90,327" alt="" name="11" onClick="moveHere(this)" />
  <area shape="rect" coords="89,261,155,327" alt="" name="12" onClick="moveHere(this)" />
  <area shape="rect" coords="154,261,220,327" alt="" name="13" onClick="moveHere(this)" />
  <area shape="rect" coords="219,261,285,327" alt="" name="14" onClick="moveHere(this)" />
  <area shape="rect" coords="284,261,350,327" alt="" name="15" onClick="moveHere(this)" />
  <area shape="rect" coords="70,127,139,196" alt="" name="16" onClick="moveHere(this)" />
  <area shape="rect" coords="349,261,415,327" alt="" name="17" onClick="moveHere(this)" />
  <area shape="rect" coords="414,261,480,327" alt="" name="18" onClick="moveHere(this)" />
  <area shape="rect" coords="23,326,87,390" alt="" name="19" onClick="moveHere(this)" />
  <area shape="rect" coords="275,326,339,390" alt="" name="20" onClick="moveHere(this)" />
  <area shape="rect" coords="338,326,402,390" alt="" name="21" onClick="moveHere(this)" />
  <area shape="rect" coords="401,326,465,390" alt="" name="22" onClick="moveHere(this)" />
  <area shape="rect" coords="86,326,150,390" alt="" name="23" onClick="moveHere(this)" />
  <area shape="rect" coords="149,326,213,390" alt="" name="24" onClick="moveHere(this)" />
  <area shape="rect" coords="212,326,276,390" alt="" name="25" onClick="moveHere(this)" />
  <area shape="rect" coords="3,389,67,453" alt="" name="26" onClick="moveHere(this)" />
  <area shape="rect" coords="66,389,130,453" alt="" name="27" onClick="moveHere(this)" />
  <area shape="rect" coords="129,389,193,453" alt="" name="28" onClick="moveHere(this)" />
  <area shape="rect" coords="192,389,256,453" alt="" name="29" onClick="moveHere(this)" />
  <area shape="rect" coords="255,389,319,453" alt="" name="30" onClick="moveHere(this)" />
  <area shape="rect" coords="318,389,382,453" alt="" name="31" onClick="moveHere(this)" />
  <area shape="rect" coords="381,389,445,453" alt="" name="32" onClick="moveHere(this)" />
  <area shape="rect" coords="444,389,508,453" alt="" name="33" onClick="moveHere(this)" />
</map><br />
<input type="text" name="besked" onKeyUp="this.form.text.value=this.value" maxlength="48" /> <input type="button" name="my_btn" value="send" onClick="sendthis();">

<div id="minDiv" style="position:absolute;width:64px;height:64px;background:none;background-image:url(chatmand.png)">
<textarea name="text" readonly size="1" style="position:absolute; height:70px; width:120px;overflow:auto;background:transparent; border:0px solid white; left: 49px; top: -29px;">
<? if($besked == "") {}else{ echo $besked; } ?>
</textarea>
</div>
</div>
</form>
<iframe name="skjultiframe" width="1" height="1"></iframe>
</body>
</html>

---------/kode----------

man kan i dette billede med en masse area klikke sig rundt med en div.
men når man opdater siden har div'en sin starts plads udenfor billedet, hvis nu jeg gerne vil ha sådan at når jeg opdater siden skal den starte i fx: coords="149,326,213,390" hvordan gør jeg det?
Avatar billede flol Nybegynder
01. marts 2007 - 14:14 #1
har nu prøvet med :

function load() {
  Div.style.left = 149 + "px";
  Div.style.top = 326 + "px";
}
og:
<body onload="load()">
</body>

men virker ikke en der kan hjælpe ?
Avatar billede crazysnap Seniormester
01. marts 2007 - 19:18 #2
Hej flol,

Prøv at proppe "Div = document.getElementById("minDiv");" ind inden du sætter left og top på dens style. Du får altså:

function load()
{
  Div = document.getElementById("minDiv");
  Div.style.left = 149 + "px";
  Div.style.top = 326 + "px";
}
og:
<body onload="load()">
</body>


Det burde ihvertfald virke.

Mvh.

- Snap
Avatar billede flol Nybegynder
01. marts 2007 - 21:59 #3
jo tak det var jo lige det der manglede :)

ved du hvordan jeg kan få min $sted, som indholder 149,326,213,390 til at indvirke i :
  Div.style.left = 149 + "px";
  Div.style.top = 326 + "px";

---
altså , når så jeg ændre $sted til et andet punkt, skulle den gerne skrive det punkt i top og left ?
Avatar billede crazysnap Seniormester
01. marts 2007 - 23:56 #4
Hej flol,


Nu ved jeg jo ikke helt præcist hvordan du har tænkt dig at bruge det, men her har du et eksempel på hvordan du får din php $sted variabel in i java script:


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <?php
            $sted = '149,326,213,390';
            echo "Stringen indeholder $sted";
        ?>
        <script type="text/JavaScript">
        var Div = null;
        var actK = null;
       
        function load()
        {
            Div = document.getElementById("minDiv");
            Div.style.left = 100 + "px";
            Div.style.top = 100 + "px";
        }
       
        function moveHere(elm)
        {               
            actK = elm.split(",");
            Div.style.left = actK[0] + "px";
            Div.style.top = actK[1] + "px";
        }
       
        function moveToSted()
        {
            var place = '<?php echo $sted; ?>';
            moveHere(place);
        }
        </script>
    </head>
   
    <body onload="load();">
        <table>
            <tr>
                <td>
                    <div id="minDiv" style="position: absolute;">
                        <table>
                            <tr>
                                <td>PLACABLE DIV</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="button" value="click to move to sted" onclick="moveToSted();">
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
       
    </body>
</html>


Hvis du klikker på knappen henter den din $sted php variabel i javascript, trækker koordinaterne ud og rykker <div>-tag'en. :)


Håber det var det du søgte! :)


Mvh.

- Snap :)
Avatar billede flol Nybegynder
02. marts 2007 - 08:19 #5
hehe, jo det kunne jeg godt bruge :)
var ikke helt sikker på hvordan jeg proppede PHP ind i javascript, men det ved jeg nu.. ;D

Tak for hjælpen.
skriv et svar ! :)
Avatar billede flol Nybegynder
02. marts 2007 - 08:25 #6
nej hov ! :/
tror du ikke du kunne hjælpe med et lille spg mere?
Avatar billede crazysnap Seniormester
02. marts 2007 - 09:15 #7
Jo selvfølgelig, skyd løs. :)


Jeg sender dog lige et svar med denne her, men skal selvfølgelig nok svare på alle tillægsspørgsmål der er! :)


Mvh.

- Snap
Avatar billede flol Nybegynder
02. marts 2007 - 09:37 #8
hehe okay :)

hmm det er fordi jeg har en database med mange div's, som jo er det man rykker rundt med, men hvordan gør jeg sådan at alle div's, nu med hver deres sted (fx. coords="149,326,213,390"), bliver pladseret hvor deres coords passer?
har prøvet en masse, med at proppe PHP ind i onLoad functionen men kan ikke for det til at virke. :/

har prøvet med :

function loade()
{
<?
$conn = mysql_query("SELECT * FROM chatbrugere") or die(mysql_error());
while($div = mysql_fetch_assoc($conn)) { ?>
 
  Div = document.getElementById(<? echo $div['bruger']; ?>);
  var sted = '<? echo $div['sted']; ?>';
  sted = sted.split(",");
  Div.style.left = sted[0] + "px";
  Div.style.top = sted[1] + "px";

<? } ?>
}
Avatar billede crazysnap Seniormester
02. marts 2007 - 10:16 #9
Som jeg kan se mangler du lige et par ting før at den kode kan køres i javascript! :)

Nu kan jeg ikke teste det da jeg ikke har din database, men jeg ville tro at din metode skulle se sådan ud:

function loade()
{
<?php
$conn = mysql_query("SELECT * FROM chatbrugere") or die(mysql_error());
while($div = mysql_fetch_assoc($conn)) { ?>
 
  Div = document.getElementById('<?php echo $div['bruger']; ?>');
  var sted = '<?php echo $div['sted']; ?>';
 
  sted = sted.split(",");
  Div.style.left = sted[0] + "px";
  Div.style.top = sted[1] + "px";

<?php } ?>
}

Som du kan se mangler der 'php' på alle <? ?> og du mangler også lige '' i getElementById. :)

Koden kræver selvfølgelig også at du har html kode for hvert div med id $div['bruger']. :)


Anyways, jeg har lavet et lille eksempel til dig som viser en php loop i javascript og som flytter rundt på to div's! Det burde være nok til at du kan udvide det til dit brug! :)


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <?php
            $sted = array('149,326,213,390', '300,100,213,390');
            $div = array('minDiv1', 'minDiv2');
            echo "Stringen indeholder $sted : $div";
        ?>

        <script type="text/JavaScript">
        var Div = null;
        var actK = null;
       
        function load()
        {
            <?php     for ( $i = 0; $i < 2; ++$i ) {    ?>
           
            Div = document.getElementById('<?php echo $div[$i]; ?>');
            var sted = '<?php echo $sted[$i]; ?>';
           
            actK = sted.split(",");
            Div.style.left = actK[0] + "px";
            Div.style.top = actK[1] + "px";
           
            <?php } ?>
        }
       
        </script>
    </head>
   
    <body onload="load();">
        <table>
            <tr>
                <td>
                    <div id="minDiv1" style="position: absolute;">
                        <table>
                            <tr>
                                <td>PLACABLE DIV</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="button" value="click to move to sted" onclick="">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="minDiv2" style="position: absolute;">
                        <table>
                            <tr>
                                <td>PLACABLE DIV Number two</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="button" value="click to move to sted" onclick="">
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
       
    </body>
</html>



Mvh.

- Snap :)
Avatar billede flol Nybegynder
02. marts 2007 - 10:30 #10
okay det virker :D tak skal du ha..!

men vil det siger, at alt det PHP man skriver i javascript, skal man starte med <?php ?
Avatar billede crazysnap Seniormester
02. marts 2007 - 10:35 #11
Yeps, lige præcis! :)


Tak for pointene og held og lykke med det!


Mvh.

- Snap
Avatar billede flol Nybegynder
02. marts 2007 - 10:53 #12
selv tak ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
11/0521:05 Questyle M15i lydforstærker Af valby i Diverse
11/0518:27 Mærkeligt ikon på proceslinjen Af ErikHg i Windows
11/0513:54 Jeg skal have indstaleret Garmin express Af skolevej321 i Andet software
11/0510:48 Back up af foto til ekstern harddisk Af hkprofil i Office & Kontorpakker
10/0517:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
White papers
Flere white papers »