- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Script desktop per mootools
-
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/
-
Una cosa del genere in Jquery può andare?
-
Grazie, molto interessante il link. Però le icone non si possono posizionare sul desktop
-
Attendiamo allora qualcuno che sappia gia...
-
Ho provato anche a dare il class alle icone e a mettere position:absolute ma niente
-
Nessuno ha qualche idea in merito???
-
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.
-
Il problema non sta nel css. Se tolgo il makeDraggable si posiziona tutte correttamente, solo che ovviamente non ho la funzione drag
-
Per farmi un'idea puoi copiare l'html relativo al problema, ossia solo quello in cui vi sono le icone?
-
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]
-
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 Iconposition:absolute;con la seguente
float:left;e i div si vedono affiancati.
-
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.
-
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.
-
@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.
-
-
@zampi91 said:
Ecco tutto completo:
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'); **});
-
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
-
@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 inserendofloat:left; left:0;che il js?
-
Si ho fatto come hai scritto...
-
Ti allego una immagine di come viene visualizzato su Firefox su windows, Internet explorer 8 su windows e firefox su Ubuntu:
