• User Attivo

    muovere oggetto usando getelementbyid

    Ciao ragazzi, ho scritto questo piccolo scriptino per far muovere un oggetto nella pagina cercando di rinunciare a flash e usando htmldinamico, ma non funziona, e non riesco a capire il perche:? potete darci una letta e mi fate sapere se vedete qualche errore?
    ///////////////////////////////////////////////////////////////////////////////////////
    <script type="text/javascript">
    function moveObject (objectID, newTop, newLeft)
    {var object = document.getElementbyID(objectID);
    object.style.top = newTop +'px';
    object.style.left = newLeft +'px';}
    </script>
    ////////////////////e nell'html lo richiamo cosi//////////////////////////////////////
    <div id="ciao" onclick="moveObject('ciao', 50, 200);">hoi</div>
    /////////////////

    Grazie
    ciao


  • Super User

    Ciao, ti consiglio di provare ad usare script.aculo.us, semplice e funziona con tutti i browser 🙂


  • User

    Come è impostato lo stile del tuo div?
    E' position:absolute dentro ad un altro div con position:relative?
    Perchè se così non è, allora non otterrai MAI lo spostamento di un elemento block-level (...nemmeno con script.aculo.us)


  • User Attivo

    Ciao bazzilla, siccome era solo una prova non l'ho ancora inserito all'interno di nessun div, era solo in una pagina bianca. fa differenza?
    Claudioweb grazie per il consiglio, lo uso gia script.aculo, ma mi piacerebbe capire il codice 🙂 grazie mille lostesso


  • User

    Beh...la differenza è che tu puoi definire la posizione di un div con gli attributi css top e left solo quando questo div ha lo stile impostato con position:absolute e contemporaneamente si ritrova all'interno di un div con stile impostato con position:relative.

    Ti posterei il tuo codice corretto, ma ogni volta che ci provo, faccio dei bordelli l'editor del forum.
    Vabbè...


  • User Attivo

    ok cool
    Grazie provero` piu tardi e ti faccio sapere


  • Super User

    @Bazzilla said:

    Beh...la differenza è che tu puoi definire la posizione di un div con gli attributi css top e left solo quando questo div ha lo stile impostato con position:absolute e contemporaneamente si ritrova all'interno di un div con stile impostato con position:relative.Se non vi è alcun div padre viene considerato direttamente il body.
    Dunque il div con position relative, che diventerebbe padre, si può omettere.
    In questo caso, in cui si tratta solo di una prova va bene il solo body e le posizioni saranno assolute relativamente ad esso.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style type="text/css">
    <!--
    #ciao {
        position:absolute;
    }
    -->
    </style>
    <script type="text/javascript">
    function moveObject (objectID, newTop, newLeft)
    {
        var object = document.getElementById(objectID);
        object.style.top = newTop +'px';
        object.style.left = newLeft +'px';}
    </script>
    <body>
    <div id="ciao" onclick="moveObject('ciao', 50, 200);">hoi</div>
    </body>
    </html>
    
    

    Per avere un maggior controllo del codice bisognerebbe verificare la disponibilità della funzione getElementById con un if.


  • User

    @claudioweb said:

    Se non vi è alcun div padre viene considerato direttamente il body.
    Dunque il div con position relative, che diventerebbe padre, si può omettere.

    Fico...non si finisce mai di imparare !