Show - Hide div en inline-block

En utilisant la fonction slideToggle, il faut déclarer notre div display: none dans notre feuille de style et quand on click sur le bouton, jQuery affiche la div en block. Mais comment faire si on veut notre div en inline-block ? Utilisez la méthode suivante :

.div {
display: inline-block;
}
$('.div').hide();

$('.bouton').bind('click', function() {
    $('.div').slideToggle( '1000','linear' );
    return false;
    $(this).text($(this).text() == "Ouvrir" ? "Fermer" : "Ouvrir"); // texte du bouton - optionnel
})

Lire la suite

Date pour tous les articles de Blogger et sa personnalisation

Avez vous un problème avec la date des articles dans un blog Blogger ? Voulez vous une date qui s'affiche en haut de tous les articles mais en format français ?

Le problème avec le système Blogger c'est qu'on ne peut pas avoir beaucoup de choix : ou on choisie le format des en-têtes de date (<data:post.dateHeader/> mais qui n'apparait que dans le premier article de la journée, ou on choisie le format de date et d'heure (<data:post.timestamp/>) mais le menu offre seulement une date à l'américaine (m/jj/aaaa ou nom de jour, mois jour, an).

Ici, je vous propose une date à la française et pour tous les articles, même pour ceux qui sont écrits au même jour. On le fait avec une modification du code xml et à l'aide d'un script, puis on peut changer son style à un type calendrier ou en rond par exemple.

Lire la suite

Animer avec jQuery - types easing et effets

Avec jQuery, on peut animer un site HTML similairement au Flash et le rendre très dynamique. Même si vous ne connaissez pas javascript comme un expert, avec l'aide de jQuery et quelques recherches sur le net, vous pouvez intégrer des scripts d'animation facilement.

Dans notre exemple on va faire défiler un objet sur la scène à l'ouverture du site, puis on rajoute un bouton avec lequel on peut animer des objets et à la fin on va faire tout disparaitre de la scène. L'exemple vient du site Zen It.

Lire la suite

Détecter et rediriger les versions d'Internet Explorer en utilisant JavaScript

Qui souffre encore de la cruauté des anciennes versions l'Internet Explorer ? Si douloureux quand on passe des jours et des semaines avec des extra codages et encore...

Pour avoir une bonne résultat de l'affichage de votre site dans les versions antérieures de IE9, il faut :
- lire des tutoriels et faire des recherches dans les pages qui parlent chinois quelque fois et dans les forums pour étudier les moyens de l'amélioration de IE.
- télécharger un logiciel, appelé IETester pour voir les changements car moi, je n'ai plus, je ne peux plus et je ne veux plus installer les versions démodées.
- télécharger le script de Modernizr, et compléter avec Boilerplate et les lier à tous mes pages pour détecter les fonctionnalités de HTML5 et CSS3 et améliorer l'affichage des effets et des éléments graphiques plus modernes dans l'ancien IE.
- rajouter les commentaires conditionnels (voir ici) dans la page html.
- rajouter une extension (plugin) de Modernizr dans mon blog WordPress qui met des scripts et codes nécessaires à tous les pages du blog, générées par le système php.

Lire la suite

Show - hide div avec jQuery

jqueryIl y a quelques années j'ai cherché une solution pour masquer des contenus, puis les afficher en défilant en douceur (smoothly) en cliquant sur un bouton sans quitter la page. J'ai trouvé une solution de masquage appelé "Peekaboo" (coup d'oeil ou coucou) avec Flash mais avec le temps passé, j'abandonne Flash à cause des problèmes cumulés. Enfin, jQuery a porté une solution très simple et ce javascript est très léger.

Je vous montre deux sortes de fonction : montrer/cacher les contenus individuellement ou montrer/cacher les contenus de tous les "div" en même temps.

Lire la suite

Parent - enfant dans CSS et javascript

Je voulais changer le style du <div> qui n'a pas ni ID, ni class. Je voulais faire dans une façon que le style appliqué n'affecte pas les autres <div> éléments. Mon <div> a un sélecteur enfant, donc je pensais à donner un style pour le parent. Je pensais également que l'envers ne marchera pas car le parent de mon <div> a plusieurs enfants, donc le style va affecter tous en même temps.

Lire la suite

Comment intégrer jPreloader dans un blog WordPress

J'avais un problème avec jPreloader (le préchargeur), il ne voulait pas marcher dans la partie blog (ici) de mon site. J'utilise "Twentyeleven child theme" et la dernière version de WP (3.7.1 à l'époque).

J'ai fait trois changements qui ont résolu le problème, si quelqu'un a le même problème, j'espère mon explication va vous aider.

Lire la suite