Amb CSS, es poden definir quatre tipus de posicions diferents als diversos elements que composen un document HTML. Són la posició estàtica, la relativa, la fixa i l’absoluta: Static És la que ve donada per defecte Es mou amb la finestra Agafa l’amplada de la finestra Se li pot donar la propietat float (left, right) i clear (left, right, both) Relative És igual que l’static, però posiciona respecte l’antecessor (en anglès, ancestor) sempre i quan no sigui estàtic Es pot posicionar respecte un top, un right, un bottom, o un left Fixed No es mou respecte la finestra; amb scroll no es mou No tenen en compte elsRead 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 →

Si volem comprovar quin navegador utilitza l’usuari visitant mirarem l’string de l’agent d’usuari que el navegador envia com a part de la petició HTTP. Aquesta informació s’emmagatzema dins d’una variable. A php, les variables sempre comencen amb un signe de dollar ($). La variable que ens interessa ara, per tal de conèixer la informació esmentada anteriorment, és $_SERVER[‘HTTP_USER_AGENT’]. $_SERVER és una variable especial reservada per PHP que conté tota la informació del servidor web. Es coneix com una Superglobal. Un exemple del codi per tal de saber aquesta informació seria: <?php echo $_SERVER[‘HTTP_USER_AGENT’]; ?> I un exemple del resultat d’aquest script podria ser: Mozilla/4.0 (compatible;Read More →

El switch és equivalent a els if/elseif/else on es pot comprovar diverses condicions. Es compon de: la paraula clau switch, una variable per comprovar, i un parell de claus. En el cas de l’exemple, extret del Code Academy, s’utilitza el switch am el $myNum. Llavors s’utilitzen els casos per distingir els diferents elements de la llista. En l’exemple el cas 1: echo “1”; break; comprova si $myNum és igual a 1. Si és així, es fa echo de “1”, i utilitza break per sortir del switch. Si no fos aixó, es passaria al següent cas. Si tots donen negatiu, es fa ressó del cas perRead More →

Sempre que es vulgui fer una animació d’un element al mateix CSS s’haurà d’utilitzar el següent codi: @-webkit-keyframes ‘nom_animació’ { 0% {‘inserir_estil’} 100% {‘inserir_estil’} } Cal tenir en compte que els percentatges seran els que es desitgin i que s’haurà d’aplicar el següent codi a la classe de l’element, també al mateix full d’estil, per activar l’animació, establir-ne la duració i les repeticions respectivament: -webkit-animation-name: nom;  -webkit-animation-duration: ‘numero’s; -webkit-animation-iteration-count:’infinite, numero’;  Read More →

De variables amb php en trobem de diversos tipus. Per exemple: 1. String: referent a caràcters (‘Hola’, ‘Adeu’, ‘Hola que tal’) 2. Integer: referent a nombres enters (3,-14,5…) 3. Float: nombres amb decimals (3.1416, -24,355…) 4. Booleans: variables que tenen un estat. True, false o 0 i 1. 0 equival a false i 1 equival a true. 5. Array: és un grup de valors Per a declarar una variable es fa col·locant el dolar davant. Tot seguit en mostrem un exemple: Si és un string, el text es posa entre dues cometes: Si és un integer, el nombre no va entre cometes: Si és unRead More →

El CSS3 ens permet, a partir d’un text, definir una amplada màxima i afegir punts suspensius al final. Això ho farem definint una amplada i llargada de l’element HTML que ens servirà de contenidor del text i aplicant-li les següents propietats: .llista li { margin-bottom: 5px; width: 200px; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Gràcies a aquest codi i donat un element <UL> amb la classe “llista”, obtindrem una llista on qualsevol text que sobrepassi els 200px serà tallat amb tres punts suspensius “…”. Podeu veure l’exemple: http://jsfiddle.net/adriia/wubpf/1/Read More →

Si el tema que heu escollit permet traduccions, aquí teniu una petita guia per canviar al català l’idioma del vostre tema: El primer que haurieu de fer es anar a buscar per FTP un arxiu .po dins la carpeta languages del tema de wordpress (wp_content/themes/el_vostre_tema/languages/) i descarregar-lo. Un cop descarregat, canvieu el nom de l’arxiu a ca.po Descarrega el programa PoEdit de la pàgina web oficial. Obre l’arxiu ca.po amb el PoEdit i modifica les traduccions existents pel català i guarda l’arxiu. Quan guardem, PoEdit crea 2 arxius: ca.po i ca.mo Copiem els arxius i els pujem via FTP dins la carpeta el_vostre_tema/languages/ I si jaRead More →

Si el que necessiteu és que la vostra imatge de fons s’ajusti al taman de la finestra del navegador, haureu de posar aquest codi al css: body { background-image: url(“ruta_imatge”); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; } Així de fàcil!Read More →

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 →