[JQUERY; CSS] Sito a Blocchi

**Secchiello** · 24-02-2011, 10:26

Buon giorno a tutti,
avrei bisogno di una vostra opinione...sto per creare un sito dove ho 4 quadrati disposti a formare un quadrato piu' grande, vorrei che al click di un singolo quadrato mi si allarghi il tutto andando a coprire gli altri tre quadrati liberi, sostanzialmente cliccando su un quadrato dovra' essere visualizzato un solo quadrato grande dove visualizzero' informazioni e quant'altro.
Secondo voi e' fattibile come cosa, io avrei pensato di utilizzare jquery, non avendo ancora scritto nulla, mi spaventa un po' la gestione dei css, voi che fareste ?
Un saluto, e grazie anticipatamente per eventuali vostri commenti.

**fcaldera** · 24-02-2011, 10:55

copia e incolla
demo : http://jsfiddle.net/fcalderan/uTB7y/

codice:

<!doctype html>
<html lang="it">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>


    <style>
    body {
        background  : #000;
        font        : 16px, Arial;    
    }
    #cnt {
        width       : 500px;
        height      : 500px;
        position    : relative;
        z-index     : 1;
        margin      : 0 auto;
    }
    
        #cnt section {
            width       : 250px;
            height      : 250px;
            position    : absolute;
            z-index     : 1;
            text-align  : center;
            cursor      : pointer;
        }

    
    #b1, #b2 { top     : 0; }
    #b2, #b4 { right   : 0; }
    #b3, #b4 { bottom  : 0; }
    #b1, #b3 { left    : 0; }
    
    </style>


    <script>
        document.createElement('section')
        $(document).ready(function() {
            $('section').bind('click', function() {
                var $this = $(this), transition = {};
                    
                transition = ($this.hasClass('opened'))
                    ? { width: '250', height: '250' }
                    : { width: '500', height: '500' };
                  
                if (!$this.hasClass('opened')) {
                    $this.css('z-index', '2')    
                }   
                              
                $this
                    .stop()
                    .animate(transition, 500, function() {
                        $this.toggleClass('opened')
                        if (!$this.hasClass('opened')) {
                            $this.css('z-index', '1')    
                        }   
                    });
            });
        })
    </script>
</head>




<body>

    <div id="cnt">
        <section id="b1" style="background: #575066;">
            <h1>HTML5</h1>
        </section>
        <section id="b2" style="background: #78626F;">
            <h1>looks</h1>
        </section>
        <section id="b3" style="background: #5A6752;">
            <h1>great</h1>
        </section>
        <section id="b4" style="background: #C0899C;">
            <h1>dude!</h1>
        </section>
    
    </div>

</body>
</html>

**Secchiello** · 24-02-2011, 11:10

bhe, che posso dire : mille grazie

**Secchiello** · 02-03-2011, 11:41

Rieccomi...
e' solo che ho capito il metodo per far apparire i quadrati piu' larghi, fino qua' grazie a fcaldera che ha fatto praticamente tutto...unico problema che mi sovviene ora e' :
se ho 5 quadrati, e ogni quadrato si "apre" in una maniera differente, ovvero il primo in alto a sinistra deve star fermo senza animazione, il secondo in alto si deve aprire coprendo il quadrato formato dagli altri tre, il terzo in alto deve solamente cambiare colore (e su questo ok nessun problema, richiamo lo script che mi cambia l'immagine interna al click), il 4 quadrato (o il primo in basso) si deve aprire come il secondo in alto, e il 5 quadrato in basso a sinistra deve aprirsi a rettangolo (ovvero coprendo solo il quadrato superiore).
Ok e' un po' un'idea complicata.
Io vorrei, per i due quadrati che si aprono nella stessa maniera ma anche per il quadrato che si apre a rettangolo, scrivere una funzione che riutilizzo, semplicemente passando i parametri in base all'apertura, mentre per il quadrato in alto quello che rimane della sua stessa forma ma cambia solo colore, scriverei una funzione ad hoc.
Scusate (so che per molti potrebbe sembrare banale).
Un saluto.
e Grazie anticipatamente.

**Secchiello** · 03-03-2011, 19:43

Ok risolto anche quella parte che chiedevo...in una maniera un po' brutale e ignorante, pero' risolta.
Ora pero' ci sarebbe un altro piccolo problema...semplicemente, ho creato un secondo div all'interno di uno dei quadrati che si aprono, che all'apertura si sovrappone al primo con un fade in e all'uscita cliccando su un quadrato esce in fade out, all'interno di questo div ho inserito un form, unico problema e' che avendo optato per il click mi ritrovo, che quando clicco su una text area o sul bottone d'invio mail, mi si chiude con il mio bel fade out tutto il quadrato. argrgrgr...che dite devo sostituire il click per l'apertura con un mouse over ?...oppure, potrei aggiungere una classe che se presente allora il form non e' stato compilato quindi disabilito il click. Mha.
Fate sapere se avete idee.
Ciao e grazie in anticipo

**fcaldera** · 03-03-2011, 19:58

Originariamente inviato da Secchiello
Ok risolto anche quella parte che chiedevo...in una maniera un po' brutale e ignorante, pero' risolta.
Ora pero' ci sarebbe un altro piccolo problema...semplicemente, ho creato un secondo div all'interno di uno dei quadrati che si aprono, che all'apertura si sovrappone al primo con un fade in e all'uscita cliccando su un quadrato esce in fade out, all'interno di questo div ho inserito un form, unico problema e' che avendo optato per il click mi ritrovo, che quando clicco su una text area o sul bottone d'invio mail, mi si chiude con il mio bel fade out tutto il quadrato. argrgrgr...che dite devo sostituire il click per l'apertura con un mouse over ?...oppure, potrei aggiungere una classe che se presente allora il form non e' stato compilato quindi disabilito il click. Mha.
Fate sapere se avete idee.
Ciao e grazie in anticipo

nell'evento click devi controllare su quale elemento hai cliccato effettivamente
ovvero controlli event.target.nodeName

http://api.jquery.com/event.target/

oppure fai chiudere la finestra cliccando su un link con una "X"

**Secchiello** · 12-03-2011, 19:32

mmm capito, anche se pero' ho ancora un paio di dubbi. (scusate non sono ancora molto rodato su Jquery)
allora :
http://jsfiddle.net/luke984/RzmWp/
innanzitutto questo e' quello che ho fatto per ora...se si clicca sul quadrato azzurro si potra' vedere come si allunga e sfuma nella form, unico problema e' quello che, quando clicco nella form mi si chiude (e tra l'altro rimane aperto il div della form percui...salta tutta l'impaginazione), poi vorrei capire una cosa, se io volessi fare in modo che il quadrato quello senza animazione, potesse chiudere tutte le altre finestre che un'utente puo' aver aperto, cosa dovrei fare ?
Un saluto.
e grazie comunque per la sopportazione.

**Secchiello** · 15-03-2011, 20:56

scusate, lo so che rompo, ma proprio nulla ?

Perdonatemi ancora un saluto

Discussione: [JQUERY; CSS] Sito a Blocchi

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY; CSS] Sito a Blocchi

Permessi di invio