Primerament, haurem de crear el botó: <a href=”#” class=”scrollToTop”>Scroll To Top</a> A la classe .scrollToTop li podrem donar l’estil que vulguem per CSS. En el nostre full de JavaScript, introduirem el següent codi: $(document).ready(function(){ //Comprova si la finestra està al Top, sinó mostra el botó $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(‘.scrollToTop’).fadeIn(); } else { $(‘.scrollToTop’).fadeOut(); } }); //Clicar l’esdeveniment per pujar fins al Top $(‘.scrollToTop’).click(function(){ $(‘html, body’).animate({scrollTop : 0},800); return false; }); });  Read More →

En algunes ocasions volem crear els clàssics radio buttons personalitzats, amb imatges o divs, per exemple, per crear un formulari de selecció de sexes, entre home i dona, que segons el que seleccionem, posteriorment podrem fer aparèixer unes variables o unes altres o fer uns moviments o uns altres. Només necessitarem tenir la imatge o el div del propi botó de selecció (amb classe pròpia – en aquest exemple seran .home i .dona) i una classe .true, la qual podria no tenir cap propietat CSS. Per tant, un exemple seria: $(‘.home’).click(function(){ //Desactiva els dos botons. Serveix per si canviem de botó selector $(this).removeClass(“true”); $(‘.dona’).removeClass(“true”); //HomeRead More →

Un dels punts forts de jQuery és la facilitat amb què es poden assolir certs efectes que, programats d’altra manera amb Javascript, ens portarien unes quantes línies més de codi. Per exemple, el .animate() ens permet animar les propietats CSS d’una etiqueta HTML (capa, llista, enllaç). La podem cridar amb un “handler” (gestor d’esdeveniments) com el .hover(). Així doncs, imaginem que tenim una capa que volem que quan l’usuari es posa a sobre amb el ratolí, disminueixi la opacitat a un 40%. El codi quedaria de la següent manera aplicant un .animate() a seques: $(document).ready(function(){ $(“#foo”).hover(function(){ // Això s’executa quan l’usuari entra amb el ratolíRead More →

Per crear un menú desplegable en jQuery, Primer necessitarem una llista com aquesta link 1 link 2 sublink 1 sublink 2 link 3 Que amb HTML seria el següent: link 1 link 2 sublink 1 sublink 2 link 3 El primer que necessitem és fer invisibles els sub-menus amb un classe CSS. Per exemple: ul ul { display:none; } A continuació, haurem de carregar la llibreria jQuery, que la podem descarregar de la pàgina oficial, al <head> de la nostra web. I només falta posar l’script que farà que el meu sub-menu es faci visible o invisible si entro o surto amb el ratolí. AquestRead More →