Sliders. Lecteur Audio. Creating a “Filterable” Portfolio with jQuery. If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make "filtering by category" a little more interesting with just a little bit of jQuery. Our portfolio is nothing more than a simple unordered list: Note: I was by no means a part of creating these wonderful sites; I am just using them as examples. We are going to assume that our portfolio can be broken down into 5 categories: DesignDevelopmentCMSIntegrationInformation Architecture In order to use the categories we have defined, we will convert them to lowercase and replace all spaces with hyphens: Design = designDevelopment = developmentCMS = cmsIntegration = integrationInformation Architecture = information-architecture Now that we have the portfolio pieces in place, we are going to need some way to navigate through them.
HTML5 and jQuery filter images Portfolio | images filter,image gallery,html5. We will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more. The HTML The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag: index.html <! In the body, there are a number of the new HTML5 elements. The #stage unordered list holds our portfolio items. You can put whatever you want in these li items and customize the portfolio further. The jQuery What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions.
Script.js – Part 1 Each tag is added to the itemsByTags object as an array. It would be best to create a helper function that will handle it for us: script.js – Part 2 Great! HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library.
Fancy Sliding Form with jQuery. Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images. […] View demoDownload source Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step.
This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images. So let’s start! The Markup The HTML will consist of a wrapper container where we will place a form with fieldsets. The navigation with all the links to the steps will be an unordered list that is initially hidden. The CSS The main wrapper and the steps container will have the following style: The class step will be given to each fieldset. The single link elements will have a neat CSS3 gradient as background: The JavaScript And that’s it! Barre de progression animée en CSS pur. Nous allons mettre une image de fond sympathique dans le "container" et définir la largeur (width) et la hauteur (height). Le premier enfant (span) aura pour fonction de représenter la barre de progression.
Nous allons positionner le second enfant (em) en absolu par-dessus la barre de progression et lui donner une position gauche à la valeur d'arrêt désirée. L'élément em à le même fond que le "container" ainsi il donne un effet d'arrêt de la barre de progression à un certain pourcentage. Pour conserver ceci aussi beau que possible, j'ai utilisé une balise HTML de définition de list (dl) pour plusieurs valeurs. Pour une barre de progression vous pouvez utiliser autant d'élément que vous le désirez.
J'ai décidé d'utiliser les styles directement dans le HTML pour le placement de la balise em. Comment est-elle faite ? Dans mon exemple, j'utilise une barre de progression de 200 pixels de large. Barre de progression en CSS | DarineKo. Créez une barre de progression animée en CSS - Tous les tutoriels et articles sur le développement Web (HTML, CSS, JavaScript, jQuery, dot.net), des tests mobiles et développement Perl/Tk | Site Personnel de Rodrigue Hunel. Avant tout une traduction de l'excellent article Pure CSS Animated Progress Bar publié sur CSS Globe, il a pour but de vous donner une technique pour créer une barre de progression animée en utilisant que du code CSS. Voici une astuce, très simple, vous montrant comment créer une barre de progression animée en n'utilisant que du CSS.
Pour la mettre en oeuvre, nous avons besoin que de trois éléments : un conteneur et deux balises imbriquées. Nous devons personnaliser notre conteneur afin de lui mettre une belle image en arrière-plan et fixer sa largeur et hauteur. La première balise (span) sera la barre de progression. Pour que ce soit assez clair, j'ai utilisé une liste de définition avec plusieurs valeurs. J'ai décidé de gérer le positionnement à gauche de la balise em en définissant son style avec la méthode inline (c'est-à-dire directement dans le code (X)HTML). Comment fonctionne-t-elle ? Dans mon exemple j'utilise une barre de progression de 200px de large. Voici le code complet : PHP - Récupération de données | CommentCaMarche. Mars 2014 PHP rend très simple la récupération de données envoyées par l'intermédiaire de formulaires HTML. Création d'un formulaire Grâce à la balise FORM du langage HTML, il est très simple de créer des formulaires comprenant : des champs de saisie des cases à cocher des boutons radio des listes à choix multiples des champs "hidden" (cachés) pour transmettre certaines informations ...
Pour utiliser un tel formulaire capable d'envoyer des informations à un script PHP, il suffit de mettre le nom du fichier PHP qui réceptionnera les informations en tant que valeur de l'attribut ACTION de la balise FORM. Voici ce à quoi peut ressembler un formulaire en HTML, permettant d'envoyer les coordonnées d'une personne à un fichier PHP nommé test.php3 : Le résultat de ce code est le suivant (le bouton Envoyer est volontairement désactivé) : Nom : <INPUT type=text size=20 name=nom> Prénom : <INPUT type=text size=20 name=prenom> Age : <INPUT type=text size=2 name=age> <INPUT type=submit value=Envoyer>
Cours de PHP - Les sessions. Voyons maintenant un tutorial vraiment important pour la sécurité de vos scripts : les sessions. En effet, afin de transmettre des variables de pages en pages, plusieurs possibilités s'offrent à vous : les divers champs des formulaires, qu'ils soient hidden ou non.passer les variables directement à travers les liens.utiliser les cookies.utiliser les sessions.
Cependant, toutes ces possibilités n'offrent pas le même niveau de sécurité. En effet, certaines de ces possibilités sont vraiment pratiquent dans leurs modes d'utilisation (comme les cookies par exemple mais tout le monde n'est pas obligé d'accepter les cookies), ce qui implique, dans la majorité des cas, un bas niveau de sécurité (cas du passage des variables par les liens, ce qui implique que les variables seront visibles de tout le monde).
De même, faire dans chaque page un formulaire contenant des champs hidden permettant de faire circuler les différentes variables à travers toutes les pages du site n'est pas vraiment pratique. <? BgMax - Image de fond ajustée. Script : bgMax v1.1.1langage : javascriptcatégorie : moduleusage : Un background-image toujours adapté aux mesures de la fenêtre du visiteur, avec en prime une apparition en fondu.tags : effets spéciaux - image Concept Une image de fond, quand elle est bien soignée, peut apporter à un site web un bel atout graphique. Hélas, avec la variété croissante des tailles d'écrans, on ne sait jamais dans quelles conditions le visiteur pourra profiter de notre belle image. bgMax permet de pallier ce problème, et d'aller même un peu plus loin. adaptation des mesures de l'image à celles de la fenêtre plusieurs modes d'ajustement apparition de l'image en fondu (optionnel) Intégration Pour commencer, il faut charger le script, en insérant le code suivant entre les balises <head> et </head> de la page : Ensuite, on déclenche l'éffet par un tout petit bout de javascript placé en fin de page, juste avant la balise </body> : <script type=\"text/javascript\"> bgMax.init('dossier/mon-image.jpg'); </script> Options.
Ultime Generator.