Freelance Expert Technique Magento - Javascript

CONTACT
RSS

Archive for the ‘ Javascript ’ Category

jQuery Return top

Je vous partage ici un petit code permettant de créer facilement un retour en haut de page qui est vachement lol.
Le principe est que ce dernier ne doit s’afficher que si on scroll suffisamment au sein de notre page.

Je ne vais pas dĂ©tailler le code javascript car il est d’une simplicitĂ© exemplaire, le voici :

function return_to_top(){
	jQuery(window).scroll(function () {
		if(jQuery(window).scrollTop() > 500){
			jQuery('div#my_return_to_top').show('slide');
		}else{
			jQuery('div#my_return_to_top').hide('slide');
		}
	});

	jQuery('div#my_return_to_top').click(function(){
		jQuery('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
}
CATÉGORIES :

Javascript

, Tutoriels

, jQuery

Éditeur de Tags pour image avec jQuery

Salut tout le monde !
Alors ici nous allons rapidement voir comment réaliser un éditeur de Tag en javascript. Bon celui que je présente ici est assez simple, il permet simplement de placer des indicateurs révélant une information au survol.
Vous trouverez, comme d’hab’, une dĂ©mo et les sources ci-dessous. Pour les explications, merci de lire la suite :)

LIRE LA SUITE

CATÉGORIES :

Javascript

, Tutoriels

, jQuery

[JS] Appels hiérarchiques en Ajax

Nous allons voir dans ce Tutoriel comment rĂ©aliser ce que j’appellerai des Appels HiĂ©rarchiques en Ajax.
Le principe est le suivant :
1- Le Layout du site se charge sans contenu
2- Le Layout appelle un premier contenu
3- Le contenu appelé appelle à son tour un nouveau contenu

L’intĂ©rĂȘt peut ne pas paraĂźtre Ă©vident, mais il permet de dĂ©composer le chargement du site, le tout animĂ© par un petit GIF kikoolol qui embellira le tout.

LIRE LA SUITE

CATÉGORIES :

Javascript

, jQuery

[JS] Créer une barre de progression

Nous allons voir ici comment crĂ©er un rendu de chargement d’une gĂ©nĂ©ration de fichier. Dans mon cas, j’ai crĂ©Ă© ce petit script au sein d’un gĂ©nĂ©rateur de site, dont un module permet l’import et l’export d’application (permettant de passer les applys du serveur de test au serveur de prod).

Le principe est assez simple,

1- On crĂ©e 20 <img /> qui feront office d’ Ă©tapes de la barre de chargement ainsi que les emplacements pour afficher le temps restant.

2- On rĂ©cupĂšre une variable passĂ©e dans un formulaire ou n’importe quoi, tant qu’on peut la rĂ©cupĂ©rer en javascript, qui contient en seconde le temps nĂ©cessaire Ă  la gĂ©nĂ©ration du fichier (Je ne montre pas mon script ici, je ne parlerai que du rendu).

3- On crĂ©e la fonction javascript permettant de mettre Ă  jour le temps restant et d’afficher progressivement les Ă©tapes de la barre de chargement.

LIRE LA SUITE

CATÉGORIES :

Javascript

JS – Comment crĂ©er son plugin jQuery.

Bonsoir Ă  tous, ou plutĂŽt bonne nuit Ă  tous. Il sera surement tard lorsque j’aurai terminĂ© d’Ă©crire ce tutoriel, il est 0h19, j’ai du Ghinzu dans les oreilles et je suis pas franchement fatiguĂ©, passons.
Comme le titre l’indique, je vais vous prĂ©senter comment crĂ©er votre plugin pour jQuery, que ça soit pour vos projets ou pour en faire profiter toute la communautĂ©.

LIRE LA SUITE

CATÉGORIES :

jQuery

ZF – Auto-completion avec Dojo ToolKit

Auto complétion avec Zend

Pour faire un petit pied de nez Ă  mes chers collĂšgues rĂ©dacteurs et fans de jQuery, voici un lĂ©ger aperçu de l’ intĂ©gration et de l’utilisation de Dojo Toolkit dans une application basĂ©e sur Zend Framework.

Nous allons voir ici la gestion de l’auto-complĂ©tion d’un FilteringSelect, le but Ă©tant de n’Ă©crire aucune ligne de Javascript et de laisser ZF tout prendre en charge.

LIRE LA SUITE

CATÉGORIES :

Dojo

, Php

, Tutoriels

, Zend

JS – Animation d’une galerie avec jQuery Cycle Plugin

Je suis en train de rĂ©aliser un petit porfolio et je cherchais Ă  animer un ensemble de Div pour pouvoir les faire switcher entre eux. Calou m’avait parlĂ© d’un plugin jQuery permettant de crĂ©er un cycle de rotation entre plusieurs Ă©lĂ©ments. Alors voilĂ , je viens vous prĂ©senter ici un peu le bazard.

LIRE LA SUITE

CATÉGORIES :

jQuery

JS – Navigation flĂ©chĂ©e sur votre site

AprĂšs mon tuto “adapter son site au navigateur de l’utilisateur”, qui permet donc d’avoir un site plus ou moins original, je vais attaquer une autre facette de jQuery en matiĂšre de design et d’ergonomie. Une navigation flĂ©chĂ©e toute bĂȘte qui reprendra ce que j’avais fait dans mon prĂ©cĂ©dent tutoriel et qui s’adresse aux novices grĂące Ă  de nombreux exemples interactifs ;) Attention, long tuto !

LIRE LA SUITE

CATÉGORIES :

jQuery

PHP + JS : Créer un calendrier interactif avec jQuery

Nous allons ici voir comment rĂ©aliser un calendrier interactif dans le type de celui proposĂ© par Google Calendar. Je vous prĂ©viens quand mĂȘme, ça va ĂȘtre relativement long et complexe. J’ai rĂ©alisĂ© ceci dans le cadre d’un projet et je vous propose ici un turoriel sur une version “Lite”. Le but est d’obtenir un calendrier interactif rĂ©pondant aux actions suivantes : dĂ©placer des Ă©vĂ©nements, redimensionner des Ă©vĂ©nements (par le bas), Cliquer sur un Ă©vĂ©nement (Popup d’info) et double cliquer dans un espace vide (CrĂ©er un Ă©vĂ©nement). Chacune de ces actions entrainera Ă©galement un enregistrement des modifications dans la base de donnĂ©es.

Vous pouvez ci-dessous voir une dĂ©monstration de ce que vous allons obtenir. La dĂ©monstration est uniquement composĂ©e de Javascript, css et Html, l’enregistrement des actions effectuĂ©es sur les Ă©vĂ©nements n’est pas effective. Les sources du ContrĂŽleur, de la vue associĂ©e et du javascript sont disponibles tout en bas du tutoriel (Les sources ci-dessous sont celles de la dĂ©mo).

LIRE LA SUITE

CATÉGORIES :

Zend

, jQuery

JS – RĂ©cupĂ©rer l’url racine du site

Hopla, je vous prĂ©sente ici une petite fonction javascript bien pratique permettant de retourner l’url racine de votre site. Ceci sert notamment si vous dĂ©veloppez un site qui pourrait ĂȘtre amenĂ© Ă  ĂȘtre stockĂ© dans un dossier tiers de la racine du serveur.

function getBaseURL() {
    var url = location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14)); 

    if (baseURL.indexOf('http://localhost') != -1) {
        var pathname = location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);

        return baseLocalUrl;
    }
    else {
        return baseURL;
    }

}

Pas besoin de dĂ©tailler particuliĂšrement, ceci n’a rien de bien compliquĂ©, c’est juste assez pratique. Ceci m’a Ă©normĂ©ment servi dans le dĂ©veloppement d’un CMS. Étant donnĂ© que je sais pas oĂč il va ĂȘtre stockĂ©, je dois pouvoir gĂ©nĂ©rer les urls de façons automatiques sans avoir Ă  entrer l’adresse en dur du serveur.

CATÉGORIES :

Javascript