Navigazione

  • CATEGORIES
  • Discussioni
  • Non letti
  • Recenti
  • Hashtags
  • Popolare
  • Utenti
  • Registrati
  • Accedi
Privacy - Termini e condizioni
© 2020 Search On Media Group S.r.l.
  • Registrati
  • Accedi
  • CATEGORIES
  • Discussioni
  • Non letti
  • Recenti
  • Hashtags
  • Popolare
  • Utenti
  • Stream
  • Interest
  • Categories
  1. Home
  2. Categorie
  3. Coding e Sistemistica
  4. Coding
  5. Script desktop per mootools
Questa discussione è stata cancellata. Solo gli utenti con diritti di gestione possono vederla.
  • Z
    zampi91 User • 5 set 2010, 15:15 ultima modifica di

    Script desktop per mootools

    Salve a tutti.

    Sto cercando da tempo uno spunto per poter creare uno script per ricreare l'effetto desktop, mi spiego meglio.

    Io ho un div grande come tutta pagina, al cui interno si trovano delle icone (i programmi), che se cliccate sue volte apre la finestra ed esegue il programma predefinito. Volevo inoltre permettere di scegliere la disposizione di queste icone effettuando il drag.

    La funzione per spostarla l'ho creata, però a me manca uno script che mi crei una griglia in cui posizionare le icone, in modo che queste non si sormontino.

    Leggendo le librerie di mootools ho trovato la funzione grid:

    [PHP]
    $$('.Icon').makeDraggable({
    container: $('Desk'),
    grid: 70
    });
    [/PHP]

    Questo mi divide il div in caselline in cui posso spostare le icone. Il problema però sta nel fatto che quando apro la pagina tutte le icone sono una sopra l'altra.

    Ecco le foto di cosa succede:
    img690.imageshack.us/i/icosorm.png/

    così invece è come dovrebbe essere:
    img442.imageshack.us/i/icook.png/

    0 Miglior Risposta Ringrazia Cita Rispondi

      1 Risposta Ultima Risposta
      Caricamento altri post
      Rispondi
      • Topic risposta
      Effettua l'accesso per rispondere
      • Da Vecchi a Nuovi
      • Da Nuovi a Vecchi
      • Più Voti
       

    • marcocarrieri
      marcocarrieri ModSenior • 5 set 2010, 15:20 ultima modifica di

      Una cosa del genere in Jquery può andare?

      sonspring.com/journal/jquery-desktop

      0 Miglior Risposta Ringrazia Cita Rispondi

        1 Risposta Ultima Risposta
      • Z
        zampi91 User • 5 set 2010, 15:31 ultima modifica di

        Grazie, molto interessante il link. Però le icone non si possono posizionare sul desktop

        0 Miglior Risposta Ringrazia Cita Rispondi

          1 Risposta Ultima Risposta
        • marcocarrieri
          marcocarrieri ModSenior • 5 set 2010, 16:05 ultima modifica di

          Attendiamo allora qualcuno che sappia gia... 🙂

          0 Miglior Risposta Ringrazia Cita Rispondi

            1 Risposta Ultima Risposta
          • Z
            zampi91 User • 5 set 2010, 16:06 ultima modifica di

            Ho provato anche a dare il class alle icone e a mettere position:absolute ma niente

            0 Miglior Risposta Ringrazia Cita Rispondi

              1 Risposta Ultima Risposta
            • Z
              zampi91 User • 7 set 2010, 14:24 ultima modifica di

              Nessuno ha qualche idea in merito???

              0 Miglior Risposta Ringrazia Cita Rispondi

                1 Risposta Ultima Risposta
              • A
                ayrton2001 Super User • 9 set 2010, 16:01 ultima modifica di

                Ciao zampi91,
                non conosco bene mootools ma credo che occorre posizionarle tramite CSS.
                Per esempio puoi dare alla classe icon questo stile

                
                .Icon {
                float:left;
                width:70px;
                height:70px;
                }
                
                

                Dove 70px è la dimensione che hai impostato per la cella della griglia.

                0 Miglior Risposta Ringrazia Cita Rispondi

                  1 Risposta Ultima Risposta
                • Z
                  zampi91 User • 10 set 2010, 15:54 ultima modifica di

                  Il problema non sta nel css. Se tolgo il makeDraggable si posiziona tutte correttamente, solo che ovviamente non ho la funzione drag

                  0 Miglior Risposta Ringrazia Cita Rispondi

                    1 Risposta Ultima Risposta
                  • A
                    ayrton2001 Super User • 10 set 2010, 18:31 ultima modifica di

                    Per farmi un'idea puoi copiare l'html relativo al problema, ossia solo quello in cui vi sono le icone?

                    0 Miglior Risposta Ringrazia Cita Rispondi

                      1 Risposta Ultima Risposta
                    • Z
                      zampi91 User • 12 set 2010, 09:35 ultima modifica di

                      Come richiesto ecco il codice:

                      Pagina HTML:
                      [PHP]<div id="Desk">
                      <div class="Icon" ondblclick="javascript:openWin('0','Account', 500, 500, 500, 500);"><div class='IconImg'><img src="applications/images/Account.png" /></div><div class='IconText'>Account</div></div>
                      <div class="Icon" ondblclick="javascript:openWin('1','MyApp', 300, 300, 600, 600);"><div class='IconImg'><img src="applications/images/MyApp.png" /></div><div class='IconText'>MyApp</div></div>
                      </div>[/PHP]

                      codice CSS:
                      [PHP]#Desk{
                      position:relative;
                      min-height:500px;
                      width:100%;
                      }
                      .Icon{
                      margin-right:20px;
                      position:absolute;
                      height:65px;
                      width:50px;
                      z-index:1;
                      padding:20px; 10px;
                      }
                      .IconImg{
                      height:48px;
                      width:48px;
                      }
                      .IconText{
                      height:15px;
                      width:50px;
                      font-size: 0.65em;
                      text-align:center;
                      } [/PHP]

                      0 Miglior Risposta Ringrazia Cita Rispondi

                        1 Risposta Ultima Risposta
                      • A
                        ayrton2001 Super User • 12 set 2010, 18:11 ultima modifica di

                        Potrei sbagliarmi, ma io rimango convinto che il problema è il CSS.
                        Ho riprodotto l'errore con il tuo codice, ma mi è bastato sostituire la riga della classe Icon

                        
                        position:absolute;
                        
                        

                        con la seguente

                        
                        float:left;
                        
                        

                        e i div si vedono affiancati.

                        0 Miglior Risposta Ringrazia Cita Rispondi

                          1 Risposta Ultima Risposta
                        • Z
                          zampi91 User • 13 set 2010, 11:31 ultima modifica di

                          Ho provato come consigliato ma l'effetto non cambia.

                          Ho provato a togliere il javascript che mi permette il drag delle icone e queste si dispongono correttamente, quando riattivo il js si posizionano erratamente.

                          0 Miglior Risposta Ringrazia Cita Rispondi

                            1 Risposta Ultima Risposta
                          • Z
                            zampi91 User • 13 set 2010, 11:32 ultima modifica di

                            Ho provato come consigliato ma l'effetto non cambia.

                            Ho provato a togliere il javascript che mi permette il drag delle icone e queste si dispongono correttamente, quando riattivo il js si posizionano erratamente.

                            0 Miglior Risposta Ringrazia Cita Rispondi

                              1 Risposta Ultima Risposta
                            • A
                              ayrton2001 Super User • 13 set 2010, 16:34 ultima modifica di

                              @zampi91 said:

                              Ho provato come consigliato ma l'effetto non cambia.

                              Ho provato a togliere il javascript che mi permette il drag delle icone e queste si dispongono correttamente, quando riattivo il js si posizionano erratamente.
                              Puoi postarmi anche il codice javascript che utilizzi? E se puoi anche fornirmi i file javascript utilizzati.

                              0 Miglior Risposta Ringrazia Cita Rispondi

                                1 Risposta Ultima Risposta
                              • Z
                                zampi91 User • 13 set 2010, 18:01 ultima modifica di

                                Ecco tutto completo:

                                megaupload.com/?d=XNCRLSP3

                                Grazie per le risposte

                                0 Miglior Risposta Ringrazia Cita Rispondi

                                  1 Risposta Ultima Risposta
                                • A
                                  ayrton2001 Super User • 13 set 2010, 18:48 ultima modifica di

                                  @zampi91 said:

                                  Ecco tutto completo:

                                  megaupload.com/?d=XNCRLSP3

                                  Grazie per le risposte
                                  Verifica così:

                                  
                                  .Icon{
                                      margin-right:20px;
                                      float:left;
                                      **left:0;**
                                        height:65px;
                                        width:50px;
                                        z-index:1;
                                        padding:20px; 10px;
                                        border: red solid 1px;
                                  }
                                  
                                  

                                  $$('.Icon').each(function(el) {
                                  var drag = new Drag.Move(el,{
                                  grid: 112,
                                  preventDefault: false,
                                  onStart: function() {
                                  el.setStyle('z-index',z++).fade(0.7);
                                  },
                                  onComplete: function() {
                                  el.fade(1);
                                  }
                                  });
                                  **el.setStyle('position','relative'); **

                                    }); 
                                  
                                  0 Miglior Risposta Ringrazia Cita Rispondi

                                    1 Risposta Ultima Risposta
                                  • Z
                                    zampi91 User • 14 set 2010, 11:21 ultima modifica di

                                    Ok così si posizionano di fianco.. non capisco perchè venga lasciato uno spazio al centro.

                                    Ovvero, non si dispongono una affianco all'altra ma lasciano tra di loro lo spazio per un'altra icona

                                    0 Miglior Risposta Ringrazia Cita Rispondi

                                      1 Risposta Ultima Risposta
                                    • A
                                      ayrton2001 Super User • 14 set 2010, 13:16 ultima modifica di

                                      @zampi91 said:

                                      Ok così si posizionano di fianco.. non capisco perchè venga lasciato uno spazio al centro.

                                      Ovvero, non si dispongono una affianco all'altra ma lasciano tra di loro lo spazio per un'altra icona
                                      Hai modificato sia il file css inserendo

                                      
                                      float:left;
                                      left:0;
                                      
                                      

                                      che il js?

                                      0 Miglior Risposta Ringrazia Cita Rispondi

                                        1 Risposta Ultima Risposta
                                      • Z
                                        zampi91 User • 14 set 2010, 13:17 ultima modifica di

                                        Si ho fatto come hai scritto...

                                        0 Miglior Risposta Ringrazia Cita Rispondi

                                          1 Risposta Ultima Risposta
                                        • A
                                          ayrton2001 Super User • 14 set 2010, 15:09 ultima modifica di

                                          Ti allego una immagine di come viene visualizzato su Firefox su windows, Internet explorer 8 su windows e firefox su Ubuntu:

                                          image

                                          0 Miglior Risposta Ringrazia Cita Rispondi

                                            1 Risposta Ultima Risposta
                                          Caricamento altri post
                                          Rispondi
                                          • Topic risposta
                                          Effettua l'accesso per rispondere
                                          • Da Vecchi a Nuovi
                                          • Da Nuovi a Vecchi
                                          • Più Voti