modificare comportamento 'position' in stile CSS

Andrea Bondi

Nuovo Utente
20 Nov 2013
2
0
0
Ciao a tutti ragazzi, devo spostare dei vestiti da una tabella ad un altra con l'ipad , il tutto funziona ma se provate ad andare sulla pagina vi accorgerete che la seconda colonna di immagini si sposta molto più in basso della prima e la terza colonna si sposta più in basso della seconda.
il sito è questo: http://idnob.altervista.org/creator.php (navigate con ipad)
Il codice è questo:
Codice:
<html>  <head>
          <title>Intelligent Wardrobe</title>
        <meta charset=utf-8 />
    <title>Intelligent Wardrobe - Creator</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
      .draggable {
        position: relative;
       
        }
    </style>




</head>
    <body>
<?php
        //Connection
        $link = mysql_connect('localhost', 'idnob', 'Zenemecca5689');
        if (!$link) { die('Could not connect: ' . mysql_error()); }
        //Select DB
        mysql_select_db(my_idnob) or die ("Error in selection database ".mysql_error());
        
        $query = "SELECT image FROM clothes WHERE position='Top'";
        
        echo("<table bgcolor='FFCCFF'>");
        echo("  <tr> <td><h3>Top</h3></td></tr>");
        $result=mysql_query($query) or die ("Query Error".mysql_error());
        
        //lef for top position
        echo("<div class='table'>");
        echo "<tr>";
        while($row = mysql_fetch_array($result))
        {           
            echo "<td bgcolor='FFCCFF'><img src='upload/" . $row['image'] . "' height='120' width='120' class='draggable' ></td>";          
        }
        echo "</tr>";
        echo ("</table>");
        echo ("</div>");        
        //center for center position
        echo("<div class='table'");
        $query = "SELECT image FROM clothes WHERE position='Middle'";
        echo("<table bgcolor='blue'>");
        echo("  <tr> <td bgcolor='blue'><h3>Middle</h3></td></tr>");
        $result=mysql_query($query) or die ("Query Error".mysql_error());
        echo "<tr>";
        while($row = mysql_fetch_array($result))
        {           
            echo "<td bgcolor='blue'><img src='upload/" . $row['image'] . "' height='120' width='120' class='draggable' ></td>";
            echo "<td> </td>";
        }
        echo "</tr>";
        echo ("</table>");
        echo ("</div>");        
        //right position
        echo("<div class='table'>");
        $query = "SELECT image FROM clothes WHERE position='Bottom'";
        echo("<table bgcolor='3366FF'>");
        echo("  <tr> <td><h3>Bottom</h3></td></tr>");
        $result=mysql_query($query) or die ("Query Error".mysql_error());
        echo "<tr>";
        while($row = mysql_fetch_array($result))
        {           
            echo "<td bgcolor='3366FF'><img src='upload/" . $row['image'] . "' height='120' width='120' class='draggable' ></td>";
        }
        echo "</tr>";
        echo ("</table>");
        echo ("</div>"); 
        echo("<div id=\"digiclock\"></div>");
        echo("<div align='center'>");
        echo("<br><br><br><br><br><br><br><br><br><br><br><br><br>");
        echo("<img src='files/stikman.jpg' height='300' width='300'");
        echo("</div>");
        echo("<a href='creator.php'><img src='files/reset.jpeg'></a>");     
        echo("<iframe width=\"400\" height=\"257\" scrolling=\"no\" frameborder=\"no\" noresize=\"noresize\" src=\"http://www.ilmeteo.it/box/previsioni.php?citta=10426&type=day1&width=400&ico=1&lang=eng&days=6&font=Verdana&fontsize=12&bg=FFFFFF&fg=000000&bgtitle=0099FF&fgtitle=FFFFFF&bgtab=F0F0F0&fglink=1773C2\"></iframe>");


?>


</body>
<script type="text/javascript">
      $.fn.draggable = function() {
        var offset = null;
        var start = function(e) {
          var orig = e.originalEvent;
          var pos = $(this).position();
          offset = {
            x: orig.changedTouches[0].pageX - pos.left,
            y: orig.changedTouches[0].pageY - pos.top
          };
        };
        var moveMe = function(e) {
          e.preventDefault();
          var orig = e.originalEvent;
          $(this).css({
            top: orig.changedTouches[0].pageY - offset.y,
            left: orig.changedTouches[0].pageX - offset.x
          });
        };
        this.bind("touchstart", start);
        this.bind("touchmove", moveMe);
      };


      $(".draggable").draggable();
    </script>




</html>
Ho messo in grassetto il position:relative perché penso che ci sia da modificare una proprietà di quel position, voglio ottenere le immagini della seconda e terza colonna che seguono il dito esattamente come la prima.
Spero di essere stato chiaro, grazie in anticipo!
 
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson Modificare codice e creare link PHP 0
J Modificare panorami 360 ps 2020 Photoshop 0
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
D modificare questo codice per inserimento in text e non in tabella jQuery 1
C modificare sito in locale con dreamWeaver HTML e CSS 3
T Modificare ruolo utenti in fase di registrazione E-Commerce 0
M modificare un file .XML da database Sql PHP 13
S Modificare intestazione documento pdf con LO Draw Linux e Software 0
felino Radio button e Bootstrap: modificare il colore di default! HTML e CSS 1
Shyson Modificare funzione php PHP 15
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
F Modificare report di etichette di access con vba MS Access 0
D [PHP] Tabella: modificare direttamente i valori PHP 6
P [Woocommerce] Modificare il Bottone Checkout di Woocommerce in base alla categoria di prodotto E-Commerce 10
Q impossibile modificare un file ....... C/C++ 2
C [HTML] modificare la scritta della copyright HTML e CSS 2
G [PHP] MODIFICARE DATI TABELLA CONTESTUALMENTE PHP 6
Y [PHP] [HTML] Modificare i quadranti PHP 1
A [PHP] Modificare campo database in base alla scelta dell'utente PHP 2
W Non riesco più a modificare i dati di una tabella da phpmyadmin MySQL 0
V [WordPress] Come modificare link in tasto menu css WordPress 21
Y Modificare script php PHP 5
G Fullcalendar: modificare colore testo, backgroup e bordi per tutti gli eventi jQuery 3
paloppa Bootstrap.min.css modificare il file HTML e CSS 6
Merlina3377 [PHP] modificare file su form immagine thump PHP 1
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
pfranco [PHP] Modificare pagina web online PHP 9
Shyson Modificare codice jQuery 0
A [Javascript] modificare il contenuto della barra indirizzi di un browser Javascript 1
asevenx modificare lista elementi togliendo l'elemento selezionato jQuery 1
Kolop "Modificare HTML" HTML e CSS 13
K [ASP.Net] Utilizzare e modificare dati linq ASP.NET 0
G Modificare navbar in base allo scroll jQuery 6
R [Photoshop] Modificare luminosità dei bordi in una foto Photoshop 2
A come modificare gli elementi di una lista e gli editText? Sviluppo app per Android 0
A modificare .jar con classe personalizzata Java 9
Mer556 BLOCCATO nel modificare un sito HTML e CSS 3
T modificare un template html5 HTML e CSS 6
B Modificare sorgente di pagina HTML e CSS 10
napuleone Modificare attributi di una classe con js Javascript 2
C modificare un rss con php PHP 2
L Modificare dati tabella mysql PHP 2
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
X come modificare paginazione del tutorial PHP 0
A modificare posizione plug in almeno credo WordPress 3
R Modificare html in modo dinamico PHP 3
A Modificare un template html5 Webdesign e Grafica 1
A pop up come modificare il posizionamento e il tempo HTML e CSS 3

Discussioni simili