Freelance Expert Technique Magento - jQuery

CONTACT
RSS

Archive for the ‘ jQuery ’ 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 – 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

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 – Adapter son site au navigateur de l’utilisateur

Il est possible que vous ayez besoin d’adapter votre site en fonction de la taille du navigateur du client. Nous allons donc voir comment faire cette manipulation avec une image qui s’adapte Ă  la taille du navigateur, le tout grâce Ă  jQuery.

LIRE LA SUITE

CATÉGORIES :

jQuery

JS – GĂ©nĂ©rateur d’interface avec jQuery

Comment amĂ©liorer l’interactivitĂ© de l’utilisateur avec l’esthĂ©tique de son site Web ? PlutĂ´t que de faire un formulaire de configuration avec des radiobutton ou des select, je vous propose ici un tutoriel pour rendre le tout bien plus interactif.

Le principe est assez simple, tout est basĂ© sur le principe du Drag’n'Drop avec l’aide de jQuery. Les Ă©vĂ©nements jQuery devront bien entendu ĂŞtre associĂ©s Ă  des appels Ajax afin de mĂ©moriser le tout. Nous ne verrons ici que le html et le javascript.

LIRE LA SUITE

CATÉGORIES :

jQuery