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.

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

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.

.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.

How to Get IE8 to Support HTML5 Tags and Web Fonts - 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:

jQuery: how to trigger hover out 10 Powerful jQuery Full-Screen Slider - XDesigns If you are a designers or artists who wants to showcase an online portfolio on your website, then you will need a powerful tool that can maximize visibility of your works, one of which is a fullscreen slider. This is the best way for showcasing your artwork in creative way, especially for photographic work. There are many available jQuery slider plugins, either free or premium that have full-screen or full-width feature. To help you find the best one, in today’s post we present some of them. 1. Superslides is a full-screen slider plugin for jQuery. Demo | Download 2. A tutorial on how to create a fullscreen slideshow with unique slide transitions using jQuery and CSS. Demo | Download 3. FFSlider is first Fullscreen Slider resizable with unique transitions and configuration. Demo | Download 4. Fancy Thumbnail Slider is a Fullscreen carousel slider with lot of features and settings. Demo | Download 5. Full Width Slider is easy to use jQuery image slider that has responsive design. Demo | Download

JQuery Redirect to URL after specified time