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. But what if we want to slide something from the bottom up and into view? The trick here is to use some judicious CSS. <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. Now, we can write the jQuery the same way we would with a traditional slide effect: JavaScript: Try it out:

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. For example, there is no way to animate a background image.

Using jQuery with ASP.NET Controls jQuery, a lightweight (only 19kb in size) JavaScript library has become my new best friend. It’s like mushrooms to Mario. Obviously I’m not alone since Microsoft is now distributing jQuery with Visual Studio (including jQuery intellisense). Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more Demo Processing... To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: $('#my-table').dynatable(); How it works Dynatable does three things: 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!

jQuery Change CSS Dynamically – It’s Easy! CSS Function Demo Changing your website styles dynamically is now the craze that is taking over the web! In this short, but sweet post I will explain how to do some simple yet effective CSS tricks using jQuery. This is a must know for all you avid jQuery developers! Change Specific CSS Element Tidy Table - Generate a sortable HTML table from JSON Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback. Features Extensible HTML/CSS interface. Compatible with Firefox 3.6+, Chrome, Safari 5+, Opera, and Internet Explorer 7+ web browsers. Compatible with iOS and Android mobile web browsers. Easy to set-up and customize.

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.

.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. Selected Text and Value of ASP.NET DropDownList using jQuery I recently saw a question on StackOverflow where a user wanted to retrieve the selected value of an ASP.NET DropDownList using jQuery. I have observed a lot of developers confused on when to use text() vs val(). Here’s the solution taken from my EBook 51 Recipes with jQuery and ASP.NET Controls