Salve a tutti,
qualcuno di voi conosce un modulo o un modo per ottenere che al passaggio del mouse su un link del menu si abbia la comparsa della pagina corrispondente nella #content .section e la contemporanea scomparsa di quella presente? Vorrei realizzare una sorta di anteprima delle pagine al passaggio del mouse sui link con eventuali effetti di transizione...
Spero possiate aiutarmi!
Grazie mille
Mostrare il contenuto al passaggio del mouse sopra il link corrispondente<RISOLTO>
Dom, 30/01/2011 - 02:37
#1
Mostrare il contenuto al passaggio del mouse sopra il link corrispondente<RISOLTO>
Ciao,
intendi caricare il contenuto della pagina linkata ad un link al mouseOver?
Non so perchè devi farlo al mouseOver ma, l'usabilità del sito andrebbe un pò a farsi benedire... in questi casi sarebbe meglio farlo al click... Per quanto riguarda l'implemente basta un pò di Javascript con un pizzico di Ajax...
Ti inserisco un codice di esempio, tenedo conto che alcune parti dovrai personalizzarle secondo le tue specifiche:
$('.first-menu li a').click(function(){var regExp = /^.*size\[\s*([0-9]*\s*,\s*[0-9]*)\s*\].*$/;
var className = $(this).attr("class");
var size = className.replace(regExp, '$1').split(',');
var lWidth = parseInt(size[0].replace(/ /g, ''));
var lHeight = parseInt(size[1].replace(/ /g, ''));
$('.content-wrapper .content').animate({
width: lWidth,
height: lHeight
}, 300);
getNodeInfo($(this).attr("href"));
resetNodeLink();
$(this).addClass("active");
return false;
});
function getNodeInfo(view){
$('.content-load').load(view+' .node', function(response, status){
var viewReturn = $('p', response).text();
if(!viewReturn){
alert(Drupal.t('There is an error'));
}else{
$(this).prepend('<a href="#" class="close indent">CHIUDI</a>');
$('a.close').click(function(){
$(this).parent().parent().animate({
width: "0px",
height: "0px"
}, 300, function(){
resetNodeLink();
$('.content-load').empty();
});
$(this).remove();
return false;
});
}
});
}
function resetNodeLink(){
$('.first-menu li a').each(function(){
$(this).removeClass('active');
});
}
Nel mio caso, ho una serie di link che, al click, tramite una chiamata Ajax (Jquery.load()) richiama la pagina collegata al link, prende solo la parte che interessa (nel mio caso, il div con la classe node) e lo va ad appiccicare al contenitore (.content-load). Inoltre, inserisce anche un bottone per la chiusura (nel mio caso, il div in questione compare da destra).
Infine, la funzione resetNodeLink() si occupa di mettere lo status active al relativo link clikato!
Se non ti è chiaro qualcosa chiedi pure!
P.S.: non fare copia incolla perchè dubito che funzioni direttamente così sul tuo progetta... cerca, piuttosto, di cercare di capirne il funzionamento e chiedi per qualsiasi dubbio!
;)
Ti ringrazio tantissimo, ma non ho idea di come inserirlo nel mio tema... Ho letto la documentazione ma non ci ho capito tanto... Sto facendo un tema a partire da Zen, e da quello che ho capito dovrei inserire
scripts[] = js/script.jsnel in thmename.info e metterlo nella subcartella del tema (js).Ma ho provato anche con cose semplici e non sembrano funzionare, sto sbagliando qualcosa ma non ho idea di cosa sia... se potessi darmi qualche dritta te ne sarei molto grata!
Grazie ancora per l'aiuto ;)
Ciao,
se partita con il piede giusto! :)
Per inserire uno script Javascript all'interno del tuo teme, infatti, devi aggiungere il file .js e poi richiamarlo nel file themenane.info con la dichiarazione:
scripts[] = mioscript.jsRicordati che, se modifichi il file .info, devi ricostruire la cache altrimenti non vedi le modifiche!
Per quanto riguarda lo script che ti ho girato, i passaggi sono molto semplici:
1) Su ogni link del mio menu prendo il varlore dell'attributo href e lo uso per passarlo alla funzione (getNodeInfo) che si occuperà di caricare la pagina;
2) Nella funziona getNodeInfo carico con un .load la pagina corrispondente e prendo solo tutto quello compreso nel div .node e lo inserisco nel div che andrà a contenre il contenuto caricato (,content-load);
3) Faccio un controllo per verificare che .node abbia qualcosa al suo interno, altrimenti mi restituisce un errore;
4) Inserisco il link del close con la sua relativa funzione (deve stare qui dentro, altrimenti il close non funziona);
5) Infine, con la funzione resetNodeLink, imposto gli .active alla voce di menu che ho cliccato.ù
I passaggi da fare sono questi... ti consiglio, essendo alle prime armi da quello che ho capito, di leggere qualcosa su jQuery e Javascript in generale! Sono tutte nozioni abbastanza semplici e con un pò di pratica dovresti capirne la logica che ci sta dietro!
Per qualsiasi problema, comunque, siamo qui! :)
Grazie ancora, sono riuscita a far funzionare qualche semplice script ma non riesco proprio a modificare il tuo e farlo girare sul mio sito, credo che sia troppo complesso per me, ho provato a leggere diverse guide ma nessuna spiega come si fanno cose del genere, soprattutto non capisco come faccio a prendere il contenuto e far si che appaia al mouseover... ho provato a modificare il tuo sostituendo stringhe qua e là ma nulla... poi .hover accetta solo due funzioni, come faccio a farci entrare anche quelle che dovrebbero permettere di sostituire il contenuto del link su cui si passa il mouse a quello del link attivo?
Non è che potresti consigliarmi qualche guida online dove posso trovare tutti i passaggi dettagliati?
La funzione Jquery.hover accetta due funzioni, una per il mouse_over e una per il mouse_leave. Se vuoi fare una cosa del genere, la funzione diventerebbe:
$("mio-id-o-classe").hover(function(){//mouse over
//richiami la funzione .load che carica una pagina
$("id-o-classe-di-destinazione").load(...)
}, function(){
//mouse leave
//rimuovi il contenuto caricato
$("id-o-classe-di-destinazione").empty();
});
Comunque sia, visto che sei ancora alle prime armi con javascript, ti consiglio di cominciare da cose più basilari... Javascript non è un linguaggio difficile e necessita solamente di una buona dose di prove per capire come fare le cose... è mooolto intuitivo rispetto ad altri linguaggi!
;)