Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Slide

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2006
    Messaggi
    91

    Slide

    Ciao a tutti,
    ho questo problema...sto realizzando un sito che prevede una pagina con delle schede che caricano i dati da un db, quindi sono diverse schede...ora dovrei fare un semplicissimo slide delle schede in modo di far scorrere una alla volta le schede con il click su le freccette (allego un esempio di come vorrei impostare la pagina). L'altra cosa importante è che le schede avranno un area sensibile, che nell'esempio ho disegnato con una i in un cerchio, che farà refreshare la scheda e cambiare i dati...io ho fatto la scheda all'interno di un layer e fatto lo scambio delle info con un semplice onClick="MM_showHideLayers".

    Come posso fare lo slide? Avete magari degli esempi pronti da indicarmi?

    Grazie
    Immagini allegate Immagini allegate

  2. #2
    Utente bannato
    Registrato dal
    Dec 2008
    Messaggi
    78

    Link interni per effetto tabulatore schede

    I Link interni alla pagina funzionano sia in senso verticale (come siamo abituati ad incontrare) che orizzontale.
    E' un sistema classico, puro HTML che non richiede neppure l'intervento di JavaScript.

    Link &#160; <a name="dove">x</a>

    Qui li impiego per far scorrere una tabella dietro un DIV; border="1" assegnato alla TABLE evidenzia l'architettura di celle (lo rendono meglio Netscape/Firefox che non IExplorer).
    I numeri 1 2 2 3 3 4 che vedrai in alto, corrispondono alle posizioni delle Ancore A NAME che vengono richiamate ad entrare nel campo di visualizzazione del Monitor. Bisogna però anche tenere presente che il procedimento tende ad allineare le A NAME con il bordo superiore della finestra, per cui può produrre scorrimento indesiderato verso l'alto dell'intera pagina se scrollabile; ma se questo DIV tabulatore è già in partenza posizionato in alto, non da' particolari problemi.

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
    <html>
    <head>
    <title>Slide Section</title>
    
    <style type="text/css">
    
    td {
     font-size: 32px;
     }
    
    a {
     color: #0000FF;
     font-family: Courier New, monospace;
     font-weight: bold;
     text-decoration: none;
     }
    </style>
    
    </head>
    <body bgcolor="#D0D090" text="#800000">
    
    <div align="center">
        
    
        <textarea rows="2" cols="22" readonly> 3200px Width strip
        /12 sections</textarea>
    
        
    
    
    <div style="width:736px; overflow: hidden; border: 1px solid #800000;">
      <table height="240" border="1" cellpadding="0" cellspacing="0" width="3200"><tr>
       <td width="7%" align="left"><a name="L1">1</a></td><td width="7%"></td><td width="7%" align="right">                  </td>
       <td width="7%" align="left"><a name="L2">2</a></td><td width="7%"></td><td width="7%" align="right"><a name="R2">2</a></td>
       <td width="7%" align="left"><a name="L3">3</a></td><td width="7%"></td><td width="7%" align="right"><a name="R3">3</a></td>
       <td width="7%" align="left">                  </td><td width="7%"></td><td width="7%" align="right"><a name="R4">4</a></td>
       <td width="7%" align="left" rowspan="3">      </td>
       </tr><tr>
       <td height="240"
           align="center" valign="middle"> 1</td><td align="center" valign="middle"> 2</td><td align="center" valign="middle"> 3</td>
       <td align="center" valign="middle"> 4</td><td align="center" valign="middle"> 5</td><td align="center" valign="middle"> 6</td>
       <td align="center" valign="middle"> 7</td><td align="center" valign="middle"> 8</td><td align="center" valign="middle"> 9</td>
       <td align="center" valign="middle">10</td><td align="center" valign="middle">11</td><td align="center" valign="middle">12</td>
       </tr><tr>
       <td valign="middle"></td><td align="center" valign="middle"><a         ></a>  &gt;</td><td></td>
       <td valign="middle"></td><td align="center" valign="middle">&lt;  &gt;</td><td></td>
       <td valign="middle"></td><td align="center" valign="middle">&lt;  &gt;</td><td></td>
       <td valign="middle"></td><td align="center" valign="middle">&lt;  <a         ></a></td><td></td>
       </tr>
      </table>
    </div>
    
    </div>
    
    
    </body>
    </html>
    Cliccando sulle freccette, vedrai nella barra indirizzi che all'URL si aggiunge un appendice, filename.html#dove
    Così ad esempio, se linki alla tua pagina da un'altra come filename.html#R3 la tua pagina si aprirà con già le schede 7 - 8 - 9 in vista. &#160;
    codice:
    Vai a Sch.8
    Enzo

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2006
    Messaggi
    91
    Grazieeee Enzo,
    scusami se ti rispondo solo ora ma ho riacceso il pc oggi!

    Il codice che mi hai passato è perfetto!

    Ho solo un'altra piccola domanda da farti, le schede che devo fa visualizzare hanno un punto in cui se io clicco scompare la scheda visualizzata e al suo posto ne compare un'altra, come se fossero fornte e retro...questo l'ho fatto con un semplcie show/hide layer e funziona, solo che ho messo i due layer all'interno dei vari td che mi avevi creato tu e la cosa che non va è che se metto position: relative; me li mette uno sotto l'altro e quindi mi allunga la pagina, non deve farlo, mentre se metto position: absolute; non seguono bene il movimento dello slider...come posso fare a farli vedere bene?

    Grazie ancora

  4. #4
    Utente bannato
    Registrato dal
    Dec 2008
    Messaggi
    78

    DIV STYLE="display: none;" / display: block;

    Mi pare più indicato; se il programma di editing vuole una risposta per div position, metti static.
    Usi qualche programma particolare per fare queste pagine?

    Per l'esempio sotto, semplicemente copia incolla nel Blocco Note che viene con Windows, poi da File fai Salva con nome e immetti unnome.html

    Start => Tutti i Programmi => Accessori => Blocco Note

    Togli i trattini da <a href="java-script: giraScheda('sch3A', 'sch3B');"> che il sistema inserisce quando invio il codice.

    codice:
    <html>
    <head><title>Schede</title>
    
    <script type="text/javascript">
    
    function giraScheda(chiudere, daaprire){
    
    	document.getElementById(chiudere).style.display=" none";
    	document.getElementById(daaprire).style.display="block";
    	
    	}
    
    </script>
    
    </head>
    <body bgcolor="#D0D090" text="#800000">
    
    <div align="center">
    
    
    <div id="sch3A" 
         style="width: 280px; height: 280px; border: 1px solid black; padding: 3px; text-align: left; display: block;">
     <div align="center">
      1 2
    
     </div>
     <hr width="80%">Prima facciata.
    </div>
    
    <div id="sch3B" 
         style="width: 280px; height: 280px; border: 1px solid black; padding: 3px; text-align: left; display: none;">
     <div align="center">
      1 2
     </div>
     Seconda facciata.
    [img][/img] 
     Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
     Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
     <img align="right" width="60">  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
     Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
     Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
     Bla Bla Bla Bla Bla 
    </div>
    
    
    </div>
    
    </body>
    </html>
    Al posto dei Link fatti con A HREF possiamo anche usare dei bottoni INPUT TYPE="button" .
    Coi Link A HREF puoi usare, inserire anche un'immagine al posto dei caratteri di testo; cioè ti fai "quel punto caldo" che dici.

    Potresti anche prendere in considerazione l'uso degli in-line frames IFRAME e quelle schede caricarle come Documento HTML esterno (fatte a parte, insomma).


    Ora devo lasciare,
    ciao

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.