background preloader

Animated Collapsible DIV v2.4

Animated Collapsible DIV v2.4
July 3rd 09': Updated to v2.4, which supports a new set of "rel" and data-image" attributes you can insert into arbitrary links to quickly create link or image link togglers. Description: This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. It's a popular effect on many social networking/ comment sites. Three distinguishing features of this script are: Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without. Have fun sliding content up and down! Demos: Directions: Step 1: Insert the following code in the HEAD section of your page Notice the code at the very top- a doctype declaration. Step 2: Insert the below sample code into the BODY section of your page: And there you have it. Setup Information In the HEAD section of your page, call animatedcollapse.addDiv() to add this DIV to be animated before finally calling animatedcollapse.init() Feature attributes String

Switch Menu Note: Modified Jan 21st, 04' by DD. Added "sitewide" and "local" cookie persistence feature. Description: Switch Menu is a unique navigational script with characteristics of a folding tree. It dynamically expands the chosen menu item when clicked on while contracting the rest. This script is DOM based, so it works in IE5/NS6/Opera7+ while degrading well with older browsers such as IE4/NS4. New: Switch Menu now supports persistence (so it remembers which menu item was last expanded) whenever you revisit the page. Demo: Click on below menu items. Directions Step 1: Insert the below code to the <HEAD> of your page: Step 2: And herein lies the HTML code for the menu itself. Customization So you're now wondering how flexible the script is when it comes to customizing the menu to your liking. Physical changes (adding/deleting items) to the menu are all done in the code of Step 2. To make cosmetic changes to the menu, it is recommended you do so via CSS, by editing the style sheet of Step 1.

JavaScript DHTML Tooltips Presenting dyn-web's JavaScript Tooltips with unobtrusive event handling and easy setup. The tooltip code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display. The JavaScript is object based, avoids the use of global variables and provides accessibility and device independent features. Tooltips are not enabled for touch devices on this page. The code supports touch, but not all tooltip implementations makes sense in that context. For more information see the footnote below and the documentation. More tooltip features are described and demonstrated [1] in the list below. The tooltip can be activated onmouseover or onclick. Even more features are demonstrated in the list of online examples on the upper right. The JavaScript Tooltip code is known to work for Internet Explorer 6+, Firefox, Opera, Safari, Chrome and should also support any other relatively up-to-date browser. Back to top

Related: