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;
	});
}

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

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

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

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

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

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

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

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.

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