Movimento tabella dinamico

**CiRi..Cuber** · 28-03-2011, 15:22

Ciao a tutti ho creato uno script in javascript che serve a far muovere una tabella contenente delle immagini, una specie di galleria fotografica, però non riesco a farla fermare questa tabella, non riesco a spiegarvelo, si muove grazie a due pulsanti < > vi facio vedere che è meglio.

http://wordsbank.altervista.org/prove/index.php

Vorrei che spostandola verso si blocasse quando finiscono le foto.

codice:



<html>
    <head>
        <script type="text/javascript">
            //movimento derso destra
            function move_right(){

                z = setInterval("move()", 5);
            }
            function move(){
                x = parseInt(document.getElementById('table').style.left);
                if (x == 0){
                    clearInterval(z);
                }
                else{
                    document.getElementById('table').style.left = (x+3)+"px";
                }
            }
            function stop_right(){
                clearInterval(z);
            }


            //movimento verso sinistra
            function move_left(){

                z = setInterval("move_()", 5);

            }
            function move_(){
                x = parseInt(document.getElementById('table').style.left);
                document.getElementById('table').style.left = (x-3)+"px";
                

            }
            function stop_left(){
                clearInterval(z);
            }




            function width(id){
                x = parseInt(document.getElementById(id).style.width);

                alert(x);
            }

        </script>
    </head>
    <body style="overflow-x: hidden;">
        <form method="post" action="upload_img.php" enctype="multipart/form-data">
            Carica una nuova immagine nella gallery!
            

            <input type="file" name="img" />
            

            <input type="submit" value="carica" />
            <input type="reset" value="reset" />
        </form>
    


<?
//mi connetto al database
$archivio=mysql_connect("www.wordsbank.altervista.org", "wordsbank", "chesterfield");
$beta=mysql_select_db("my_wordsbank");

//ordino i campi in modo da avere gli ultimi caricati alla fine
$query=mysql_query("ALTER TABLE  upload_img ORDER BY  id ");
//query per la visualizzazione delle immagini
$query=mysql_query("SELECT * FROM upload_img");

echo "<table style=\"position:relative; left:0;\" id=\"table\" border=\"0\">";
        for ($i=0; $i < mysql_fetch_row($query); $i++){

            $assoc=mysql_fetch_assoc($query);
            $nome_img=mysql_result($query, $i, "nome_img");
            $width=mysql_result($query, $i, "width");
            $height=mysql_result($query, $i, "height");
            $id=mysql_result($query, $i, "id");

            //altezza new
            $height_  = 155;
            //larghezza new in scala
            $width_ = (155*$width)/$height;

            echo "
            <td style=\"width:$width_; height:$height_;\">
                  <img style=\"cursor:pointer; position:relative; left:0px; top:0px;\"  src=\"img/x.png\" onClick=\" document.location.href='del.php?id=$id';\"  />
                  <img src=\"img/$nome_img\" width=\"$width_\" height=\"$height_\"/>
            </td>
                 ";


        }
echo "</table>";

?>

        <input id="<"  type="submit" value="<" onmousedown="move_right();" onmouseup="stop_right();" />
        <input id=">" type="submit" value=">" onmousedown="move_left();" onmouseup="stop_left();" />

    </body>
</html>

**CiRi..Cuber** · 28-03-2011, 16:55

up

**Vindav** · 29-03-2011, 11:20

potresti provare con una cosa del genere:

- al caricamento della pagina ti calcoli la larghezza della finestra (document.body.offsetWidth)

- con php ti calcoli la lunghezza totale della tabella andando a valorizzare la proprietà width dell'elemento html table (<table width=lunghezzaTabella>)

- nello script recuperi la lunghezza della tabella e la larghezza della pagina ed effettui una sottrazione, esempio:

codice:

function move_(){
                myTable = document.getElementById('table');
                x = parseInt(myTable.style.left);
                if(x < widthWindow-myTable.width) 
                	clearInterval(z);
                else
                	document.getElementById('table').style.left = (x-3)+"px";
            }

**CiRi..Cuber** · 29-03-2011, 14:34

Ciao grazie mille ma document.body.offsetWidth non va..ho provato a fare un alert ma non me lo da..

Non posso con php inserire la larghezza della tabella nella tabella..quindi dovrei passare una variabile da php a javascript e poi calcolare la differenza tra la larghezza del body e la larghezza della tabella

**Vindav** · 29-03-2011, 15:05

Ciao grazie mille ma document.body.offsetWidth non va..ho provato a fare un alert ma non me lo da..

provalo su firefox e vedrai che va... poi penserai a farlo andare anche su explorer.

Non posso con php inserire la larghezza della tabella nella tabella

perche non puoi? vedo che inserisci la larghezza del td.... inoltre ho notato che costruisci male la tabella html mancano i tr, dacci un occhiata.

**CiRi..Cuber** · 29-03-2011, 15:18

Ok cmc ho trovato screen.width;

E per il php no, non posso inserire un attributo ma posso creare un elemento con quell attributo.
Posso fare echo "<tabel width=\"20px\">";
Ma non posso dirgli inserisci 20px alla width della tablle capito?

Ho fatto così

codice:

echo "<script type=\"text/javascript\">document.getElementById('table').style.width=\"$width_table\";</script>";

Ho così me lo inserisce, poi lo prendo dallo script nella head e prendo la larghezza schermo e poi faccio tutto speriamo in bene =)

**Vindav** · 29-03-2011, 15:21

Posso fare echo "<tabel width=\"20px\">";

infatti propio questo intendevo...

echo "<script type=\"text/javascript\">document.getElementById('table').styl e.width=\"$width_table\";</script>";

questo non serve... basta fare come sopra poi da javascript recuperi la proprietà: myTable.width

buona fortuna

**CiRi..Cuber** · 29-03-2011, 15:28

Ma il problema è che con quello creo un altr tabella con quel width..non posso atrribuire attributi ai tag html con php. ho fatto così

Codice PHP:




$width_table = ceil($width_table);

$width_table = $width_table."px";

echo "<script type=\"text/javascript\">document.getElementById('table').style.width=\"$width_table\";</script>";

Questo leva tutti i decimali e approssima la larghezza della tabella presa con php (1775.98328)
e la inserisce con javascript nell'attributo width.

codice:

//calcolo la larghezza de l body per poi sottrarla a quella della tabella
              width_table =  parseInt(document.getElementById('table').style.width);
              width_body = screen.width;
              
            //movimento derso destra
            function move_right(){

                z = setInterval("move()", 0,1);
            }
            function move(){
                x = parseInt(document.getElementById('table').style.left);
                if (x == 0){
                    clearInterval(z);
                }
                else{
                    document.getElementById('table').style.left = (x+2)+"px";
                }
            }
            function stop_right(){
                clearInterval(z);
            }


            //movimento verso sinistra
            function move_left(){
                z = setInterval("move_()", 0,1);
            }
            function move_(){
                x = parseInt(document.getElementById('table').style.left);
                if (x < -(width_body-width_table)){
                    clearInterval(z);
                }
                else{
                    document.getElementById('table').style.left = (x-1)+"px";
                }
            }
            function stop_left(){
                clearInterval(z);
            }

E questo prende la larghezza dello schermo e delat abella e in move_() fa la sottrazione

Il problema è che non si muove niente!!!! oddio

Ti prego di aiutarmi sono nel panico, non mollarmi =)

**Vindav** · 29-03-2011, 15:38

allora se non mi ascolti ovvio che non ti funziona...

Ma il problema è che con quello creo un altr tabella con quel width..non posso atrribuire attributi ai tag html con php. ho fatto così

perche dici che non puoi? Lo sapro se puoi o non puoi... se ti dico di fare cosi è perche puoi farlo,inotre lo stavi già facendo con i td, fallo anche per la tabella. Il valore che associ alla proprietà width della tabella deve essere la somma dei width di ogni colonna. Togli quel echo script non serve a niente. Inoltre nella proprietà width della tabella non devi specificare "px" devi solo mettere il valore numerico.

edit: mi ero dimenticato di dirti che la proprietà width di una tabella non va specificata dentro lo style ma è proprio una proprietà nativa dell'oggetto table.

**CiRi..Cuber** · 29-03-2011, 15:46

okok non contesto, mi sò che c'è stqat un incomprensione tu dici che devo aggiungere alla tabella centrale $width_table.(somma di tutte le width delle td della tabella.)

Po lo prendo con javascript facendo docume....width; (senza style =))

Discussione: Movimento tabella dinamico

Strumenti discussione

Ricerca discussione

Visualizza

Movimento tabella dinamico

Permessi di invio