NANANE DEVELOPPEMENT WEB JQUERY MAGENTO ZEND

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