Outweb

Étiquette : javascript

Faire un indexof travaillé avec H5AI

de

On août 4, 2011

dans Outils

Temps de lecture : < 1 minute

H5AI est un projet développé avec HTML5 qui a pour but de remplacer la page indexof par défaut de apache. C’est dans cette optique que H5AI propose plusieurs types de vue, un moteur de recherche interne ou encore un bandeau cliquable nous indiquant notre position dans l’arborescence de fichiers, depuis le root du dossier où H5AI est mis en place.

Voici un exemple en images du type de rendu que vous pouvez avoir sur un dossier contenant plusieurs types de fichiers différents. Vous pouvez remarquer que le projet détecte le type de chacun des fichiers afin d’afficher la bonne icône.

Modèle de page « en maintenance »

de

On juillet 22, 2011

dans JQuery

Temps de lecture : < 1 minute

Si vous avez une mise à jour à faire qui risque de provoquer des erreurs, de type 404 ou autre, pendant le temps de la mise en place, il vaux mieux afficher une page d’avertissement expliquant brièvement la situation à l’utilisateur.

Grâce au plugin JQuery lwtCountdown, vous pouvez très simplement ajouter un compte à rebours propre et animé, afin d’éviter la page toute simple et moche. Bien sûr, il vous faudra connaître au préalable la date de retour en ligne. Pensez à prévoir toujours un peu plus que nécessaire. 🙂

Voici un exemple de page faite avec lwtCountdown :

Pour lancer le compte à rebours à partir d’une date, il vous suffit de faire appel au plugin de la manière suivante :

jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		21,
						'month': 	12,
						'year': 	2012,
						'hour': 	11,
						'min': 		0,
						'sec': 		0
					}
				});
			});

Quand la date butoir est atteinte, le compteur reste à 0, pas de chiffre négatif comme on peut parfois le voir.

Ajuster la taille de vos textareas en fonction du contenu

de

On juillet 14, 2011

dans JQuery

Temps de lecture : < 1 minute

AutoResize est un plugin JQuery qui permet de faire un textarea extensible en fonction du contenu, comme le fait actuellement Facebook pour les commentaires. Ceci évite les pages de formulaire où un textarea fait 15cm sur 8, le truc pas esthétique quoi…

Voici comment appliquer le plugin sur un textarea ayant pour id « comment ».
Après, libre à vous de changer le sélecteur pour l’appliquer à tous vos textareas, ou juste à ceux d’une classe précise.

$().ready(function(){
$('#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
});

Vous l’aurez compris, ce plugin s’adresse aux développeurs soucieux de l’ergonomie de leur site Internet et qui en ont marre de voir des barres de scroll apparaître dans leurs textareas.

Fièrement propulsé par WordPress & Thème par Anders Norén