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:

Suckerfish Dropdowns A note from the editors: While innovative for its time, this article no longer represents modern best practices. “DHTML” dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns. Meet the markup#section1 Article Continues Below To start, we should use the best method for defining a navigation menu — a list. Quite straightforward really — nice and neat HTML that, as a result, is highly accessible. Styling it#section2 To get started, all of the lists need to be jigged around a bit — namely, the padding and margin set to zero and the list-style set to none: Now we need to transform the first-level list into a horizontal menu bar. The next step is to tackle the second-level lists that will be the dropdowns themselves: And now, making the sucker work.

Responsive Mobile Menu 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

Simple JavaScript Inheritance I’ve been doing a lot of work, lately, with JavaScript inheritance – namely for my work-in-progress JavaScript book – and in doing so have examined a number of different JavaScript classical-inheritance-simulating techniques. Out of all the ones that I’ve looked at I think my favorites were the implementations employed by base2 and Prototype. I wanted to go about extracting the soul of these techniques into a simple, re-usable, form that could be easily understood and didn’t have any dependencies. Additionally I wanted the result to be simple and highly usable. Here’s an example of what you can do with it: A couple things to note about this implementation: Creating a constructor had to be simple (in this case simply providing an init method does the trick).In order to create a new ‘class’ you must extend (sub-class) an existing class.All of the ‘classes’ inherit from a single ancestor: Class. Simple Class Creation and Inheritance Initialization Super Method

7 Best Websites to Step-by-Step Learn jQuery jQuery has recently become the most popular and flexible Javascript Library that have added a lot of ease and efficiency for web developers and web designers. With it’s growing popularity it has become inevitable for everyone developer to learn this very language. jQuery is a fast, concise and easy to comprehend javascript library that simplifies complex task like HTML document traversing, Ajax interactions, animating, and event handling. It eases client-side HTML scripting. jQuery was released in January 2006 by John Resig with an Open Source license. jQuery is being used by 43% of the top 10,000 sites and thus you can estimate the growing popularity among developers. jQuery Understanding jQuery shouldn’t be much of a hassle for the web developers who are already into the business and have successfully created projects using css and html but for beginners this task can seem to be a tedious job, especially when they don’t know where to start from and what are the reliable resources.

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>

JavaScript Inheritance Patterns | David Shariff | Front End User Interface Engineer In this post, I am going to introduce to you 3 different ways of how you can implement inheritance in JavaScript. You will see inheritance implemented in languages such as Java by allowing a class to inherit state and behavior from a superclass, where each superclass can have many subclasses. This means that in Java an object is an instance of a class, which can inherit other classes. Now in JavaScript, being prototypal by nature, an object can inherit from an object. For the rest of this post, I will introduce the Pseudoclassical, Functional and Prototypal inheritance patterns in JavaScript. Pseudoclassical pattern The Pseudoclassical pattern tries to replicate inheritance in a way that is familiar to those who come from a Java or C like background. A pattern which uses a constructor function and the new operator, combined with a prototype added to the constructor is said to be Pseudoclassical. In JavaScript, one way to do this inheritance is: Functional pattern Prototypal pattern Summary

How to Get IE8 to Support HTML5 Tags and Web Fonts - tatiyants.com Internet Explorer has long been the bane of web developer’s existence, largely due to its limited and buggy support for standards. Though things improved some in IE9, it doesn’t yet have the market share that would allow you to ignore its older siblings. And while it’s debatable whether you need to worry about IE7 (I don’t), IE8 is popular enough to demand attention. The good news is that it’s possible to get IE8 to do decent things with modern web technologies. In this post, I’ll focus on two: HTML5 tags and Web Fonts. HTML5 Elements HTML5 has a whole bunch of new elements for adding semantic meaning to your pages. Since IE8 doesn’t know anything about these, it won’t recognize styles applied to them via CSS. Another important thing to point out is that HTML5 elements are displayed as block by default, but IE8 doesn’t know that either. Note that if you’re using an HTML5 aware reset stylesheet (like this one), this is probably already taken care of for you. Web Fonts References: tagged with:

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.