By:
On:
In: Javascript
With: 0 Comments

Si tenim una pàgina amb elements que varien la seva mida segons el contingut i volem que quedin ordenats sense que quedin espais en blanc, la manera més fàcil per fer-ho és utilitzant un plugin de jquery anomenat Masonry. Primer haurem de carregar el plugin col·locant-lo a la carpeta corresponent on tinguem els plguins js i després carregar-lo al <head> de la pàgina. <script src=”/path/to/masonry.pkgd.min.js”></script> El codi amb el que el carreguem i especifiquem les dimensions és: var container = document.querySelector(‘#container’); var msnry = new Masonry( container, { // options columnWidth: 200, itemSelector: ‘.item’ }); on “#container” és el nom de la id que hemRead More →

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

El toggle es un efecte javascript que desplega i plega l’element que demanis. $(“button”).click(function(){ $(“element”).toggle(); }); Els atributs que es poden donar al toggle són: Speed: “slow”, “fast” o be els milisegons. Easing: “swing” (la velocitat augmenta i disminueix gradualment) o “linear” (velocitat constant). Hi ha altres opcions en pluguins. Callback: Defineixes una acció que s’executarà despres del toggle  Read More →

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

Descrit de manera molt resumida, AJAX –acrònim d’Asynchronous JavaScript And XML– és una tecnologia que ens permet realitzar accions en una pàgina web que necessitin una resposta del servidor sense recarregar-la. Amb això aconseguim que la nostra web sigui dinàmica i, per tant, obtenir un disseny més atractiu. Alguns exemples del que podem fer: Un enllaç que comprovi si un valor existeix ja en una base de dades. Completar un camp de text de recerca amb valors suggerits per la nostra web. Un xat web. etc.Read More →

By:
On:
In: CSS3, HTML5, Javascript, MySQL, PHP, Wordpress
With: 0 Comments

A la xarxa trobem milion i milions de tutoriales de programació. Són tants, en tan diferents formats, amb tants estils diferents i enfocats en tants llenguatges, que es fa difícil buscar els millors, i això és el que volen solucionar en hackr.io. Es tracta d’una web en la qual podem accedir a enllaços de tutorials de programació android, AWK, CoffeeScript, css, Django, go, HTML 5, swift, Javascript, jQuery, Perl, PHP, Python, Ruby on Rails… de fet també hi ha tutorials de Photoshop, de SEU i d’altres matèries no relacionades directament amb programació i sí amb disseny o tècniques específiques.   Cada tutorial indicat pot rebre votsRead More →

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

El parallax et crea diferents capes dins de la web que es mouen a diferents velocitats utilitzant el scroll del ratolí. Aquest efecte crea una interacció entre les capes i una animació. Hi ha molts pluguins per fer el parallax, però deixo aqui un link del més senzill que va trobar en Jordi Màrquez i em va facilitar en una de les tutories. http://markdalgleish.com/projects/stellar.js/Read 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

Segurament alguns de nosaltres ens hem frustrat intent explicar-li a Javascript que un número ha de ser donat si l’usuari escriu una variable exactament d’una manera, o de manera diferent, o simplement activar una funció quan més d’un element compleixi els requisits. He fet un petit recull dels Operadors de comparació i operadors lògics, que serveixen per molts d’aquests casos conflictius que no sabem resoldre.   Operador Descripció Comparació == igual que x == 8 === igual valor i igual tipus x === “5” x === 5 != NO igual x != 8 !== NO igual valor i NO igual tipus x !== “5” xRead 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
With: 0 Comments

Per crear Objectes amb Javascript s’ha de seguir la següent sintaxi: var nom_objecte = { “fill_1” : { “color” : “vermell”, “tamany” : “gros” }, “fill_2” : { “color” : “blau”, “tamany” : “mitjà” } }; Un cop tenim l’objecte declarat, en podem canviar les propietats. nom_objecte[“fill_1”].color = “verd”; Per últim, si volem recórrer l’objecte amb el que seria l’equivalent a un FOREACH en PHP, ho podem fer amb el FOR (var foo in obj) . Si ho apliquem al nostre objecte: for(var fill in nom_objecte) { console.log(“L’objecte és ” + fill + ” i el seu color ” + nom_objecte[fill].color ); } L’exemple enRead 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 →