background preloader

Slide Elements in Different Directions

Slide Elements in Different Directions
Although jQuery has a nice set of slide methods — .slideDown(), .slideUp(), and .slideToggle() — sometimes we may want to slide an element in a different direction. Fortunately, it's pretty easy to do. Reverse the Slide Direction With the built-in slide methods, elements are shown by sliding them down and into view. <div id="slidebottom" class="slide"> <button>slide it</button> <div class="inner">Slide from bottom</div></div> To get the inner div to slide up, we'll anchor its bottom edge to the bottom of the bottom of the nearest positioned ancestor (in this case, the #slidebottom div): Other properties such as width, padding, margin, and background-color have been set for these elements, but only the essential properties for modifying the slide behavior are shown above. Note: I'll be using the term positioned to refer to elements that have the CSS position property set to something other than "static." Now, we can write the jQuery the same way we would with a traditional slide effect: Related:  jquery

.toggleClass() Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument, while animating all style changes. Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. All class animation methods, including .toggleClass(), support custom durations and easings, as well as provide a callback for when the animation completes. Not all styles can be animated. This plugin extends jQuery's built-in .toggleClass() method.

demonstration Manipulation aisée de la DOM et des évènements jQuery permet une sélection aisée d'éléments de la DOM en utilisant les selecteurs, répondant à la syntaxe CSS et XPath. Pour plus d'information, rendez-vous sur la partie de la documentation consacrée aux sélecteurs.L'utilisation des évènements est également facile, avec des fonctions permettant d'assigner des fonctions à un évènement donné sur des élements. Exemple: Assignation d'une action sur un lien. Cliquez sur le lien pour déclencher l'action qui lui est associée. Lien de test //code HTML <a title="lien de test" id="lien_test">Lien de test</a> //code javascript $("#lien_test").click( function(){alert('bonjour !') Exemple: Assignation d'une fonction permettant de changer le style des élements de la liste d'id 'liste'. texte1 texte2 texte3 Les effets Test montrant l'effet 'FadeOut' / 'FadeIn' qui fait disparaitre un calque, avec la vitesse voulue. function testFade() { $('#effet).fadeOut("slow"); $('#effet).fadeIn("fast"); } Création de plugins

Créer un compte à rebours / chronomètre en HTML 5 + Javascript Ici nous allons voir comment créer un compte à rebours en Javascript, en utilisant jQuery. Pour commencer, voici le code HTML qui va servir à afficher le temps restant avant la fin du compte à rebours : nombre de jours, heures, minutes, secondes : Le but du jeu va donc être de remplir les 4 <span> en javascript, à intervalle régulier (toutes les secondes), au fur et à mesure que le temps passe et qu'on se rapproche de la fin du décompte. Pour gérer le compte à rebours, ils nous faut 2 informations de base : La date "cible" : celle à laquelle le compte à rebours se termine, et vaut 00:00:00 La date courante En faisant la différence entre ces 2 dates, ont va connaître le nombre de secondes qui nous sépare de la fin du compte à rebours. Pour calculer le nombre de jours, heures..., je vais utiliser une fonction dateDiff écrite dans le cadre d'une autre FAQ : Calculer la différence entre 2 dates en Javascript. On va aussi utiliser jQuery pour sélectionner les 4 span ci-dessus.

La meilleure méthode pour exécuter une fonction javascript dans un lien HTML | Le Coin du Webmaster Par Webmart | septembre 30, 2008 Après avoir essayé divers façons d’exécuter une fonction Javascript dans un lien HTML pour un menu dynamique dans un de mes sites, afin d’afficher des sous-catégories, je me suis rendu compte que chacune comportait certains problèmes. Par exemple: <a onclick="javascript: afficher_sous_categories();">Catégorie principale</a> La fonctionnalité est correcte et marchait avec la plupart des navigateurs standards (fureteurs), sauf qu’Internet Explorer ne considère pas ça comme un lien réel mais plutôt comme un anchor (lien vers une section de la même page), dû à l’absence de la partie href, et ne supportait donc pas les attributs CSS comme a:hover afin de lui donner une apparence différente lorsque le curseur de la souris se situait au-dessus, un comportement relativement important dans un menu dynamique. <a href="#" onclick="javascript: afficher_sous_categories();">Catégorie principale</a> <a href="javascript: afficher_sous_categories();">Catégorie principale</a>

.fadeToggle Description: Display or hide the matched elements by animating their opacity. The .fadeToggle() method animates the opacity of the matched elements. When called on a visible element, the element's display style property is set to none once the opacity reaches 0, so the element no longer affects the layout of the page. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. Easing The string representing an easing function specifies the speed at which the animation progresses at different points within the animation. Callback Function If supplied, the callback is fired once the animation is complete.

Ouvrir un lien dans une nouvelle fenêtre en quelques lignes de jQuery This post is more than 4 years old. It might not reflect my current skills and convictions. J’ai toujours trouvé qu’il était du ressort de l’utilisateur de choisir s’il voulait (ou pas) ouvrir un lien dans une nouvelle fenêtre (ou un nouvel onglet). Jakob Nielsen pense d’ailleurs la même chose et l’a même intégré dans un article où il liste 10 erreurs fréquentes sur un site, article qu’il a publié en… 1999 ! Par contre, je peux totalement comprendre quand on me demande de forcer l’ouverture dans une nouvelle fenêtre. En effet, la plupart du temps, l’utilisateur ne sait pas qu’il a le choix… Ce serait trop bête de le perdre juste parce qu’il a ouvert un lien vers un autre site dans la fenêtre courante ! D’un point de vue programmatique, depuis des années, l’usage pour ouvrir un lien dans une nouvelle fenêtre est d’utiliser l’attribut target="_blank" sur la balise <a>. Il a donc fallu ruser et faire appel à JavaScript pour s’en sortir. Ca fonctionne très bien ! Parfait.

jQuery: how to trigger hover out Présentations HTML5 – 4 frameworks et une télécommande Présentations HTML5 – 4 frameworks et une télécommande Si vous faites des conférences ou donnez des cours, peut être réalisez vous vos présentations en full HTML5/CSS comme il est possible de le faire avec des frameworks comme : Ça c'est déjà un grand pas pour se libérer d'outils comme Powerpoint ou Keynote. Mais avez vous pensé à RemotePrez ? Et RemotePrez est compatible avec tous les frameworks cité ci-dessus. Merci à Florian pour l'info Vous avez aimé cet article ?

JQuery Redirect to URL after specified time

Related: