By:
On:
In: Development, Global, jQuery
Tagged:
With: 0 Comments

The main goal of jQuery is to make it easy to use JavaScript (JS) on your website. This is the language of choice for developers when it comes to designing web applications. According to SlashData from 2020, this is the most popular programming code among developers. jQuery is a library developed in 2006 by John Resig that allows us to add an AJAX interaction layer between the web and the applications we develop by controlling events, creating animations and different effects to enrich the user experience. This library that achieves an environment where tasks and processes in JavaScript programming are simplified, making it easy toRead More →

By:
On:
In: Javascript
Tagged: , ,
With: 0 Comments

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 →

By:
On:
In: Javascript
Tagged: ,
With: 0 Comments

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 →

By:
On:
In: Javascript
Tagged: , , ,
With: 0 Comments

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 →

By:
On:
In: Javascript
Tagged:
With: 0 Comments

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 →