MetaLab: We make interfaces. 30 Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars - Noupe Design Blog. May 07 2008 Every once in a while we like to focus on different design elements and how to use javascript and ajax to make them more interactive and more flexible to the user. In this article we’d like to present a list of over 30 hand-picked Sliders, Scrollers and scrollbar techniques you can use to achieve some special visual effects in your designs. jQuery, Mootools, Prototype and script.aculo.us are used in these examples, so every taste has its demos served.
You might be interested to check some of the designs that was mentioned in the posts below: Slider 1) Slider- Horizontal or Vertical bar and slider. 2) Simple images slider to create Flickr-like slideshows- This step-by-step tutorial explains how to customize slideshow and use it in your web projects. Download Tutorialfrom Here 3) Accessible slider- Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.
Live Demo 8 ) Yahoo! Live Demo Live Demo Live Demo Live Demo. jScrollPane - cross browser styleable scrollbars with jQuery and CSS. jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane is designed to be flexible but very easy to use.
After you have downloaded and included the relevant files in the head of your document all you need to to is call one javascript function to initialise the scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing themes. There are a number of different examples showcasing different features of jScrollPane and a number of ways for you to get support. How to use It is very simple to use jScrollPane. Then you just need to initialise jScrollPane on document.ready (using a selector which will find the content you want to apply jScrollPane to): $(function() { $('.scroll-pane').jScrollPane(); }); Download You can always find the latest code for jScrollPane on its github page.
Themes Donate. DotNetNuke Tips for Skinning, CSS, and Design - The Announcements Module and jQuery as an Accordion. Importing jQuery UI CSS into Your DotNetNuke Site - The Mighty Blog - DotNetNuke Blogs | DNN Blogs | jQuery | ASP.Net | SQL Server - The Mighty Blog. jQuery. DataTables. 40 Tooltips Scripts With AJAX, JavaScript & CSS - Smashing Magazine. Advertisement Web users love informative clues. Whatever questions and misunderstandings might occur – delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips – used correctly, they can greatly improve user experience and help users to get things done.
In Web such “responsive” hints can be provided by tooltips. Most of solutions are JavaScript- and AJAX-based, however we’ve also managed to find some lightweight CSS-based solutions. We’d like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we’ve stumbled upon during our search. Let’s take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. Tooltips: AJAX & JavaScript Solutions Nice Titles Revised An improved Nice Titles Tooltip Script with Accesskeys support. CSS-Based Solutions Further Solutions Tooltips: WordPress-Plugins Selected Scripts: Quick Overview. ClueTip Plugin Demo.
ClueTip Plugin Demo Below are quite a few examples of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code: $('a.peanuts').cluetip();.
Default Style jTip Theme Rounded Corners Theme this is the local content to load when the 'local' parameter is set to true. Fun with Overflows. Background The first is a scrollable timeline. A couple of readers requested a demo of how Plurk’s browse timeline works. In addition, in the last month, Google released a 10 year timeline – so I wanted to show how this works. The second was a request from Trevor Morris who’s involved with/runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the header pattern flowed (see example below) Watch Part 1: Scrollable Timeline Watch the scrollable timeline screencast (alternative flash version) QuickTime version is approximately 60Mb, flash version is streaming.
View the demo and source code used in the scrollable timeline screencast Part 2: Trovster’s Header Effect Watch the Trovster’s header effect screencast (alternative flash version) QuickTime version is approximately 45Mb, flash version is streaming. Scrollable Timeline Understanding the Problem The task is such: jQuery. PNG Overlay Demo. jQuery liScroll - a jQuery News Ticker. Labelify: a jQuery plugin to add labels to your textboxes. Ignore A fairly common design pattern in web forms is to have some explanatory help text for a textfield appear inside the text field, and then remove it when the user clicks into that field. It has the benefit of putting the help precisely where the user's looking. Something like this: Lots of people have done this, and I've done it too. jquery.labelify.js is a jQuery plugin to add labels to your input fields. How to use the plugin What if I don't want to use the title attribute as the text source? The plugin is customisable.
The value "label" for text will fetch the input's "tooltip" from that input's associated label: Note that this does not remove the text from the label itself; if you want that to happen then you can hide it in CSS. If "label" isn't what you want either, then you can pass a function as text. How can I make the label look different? You'll note that in the examples on this page, user-entered text in the boxes is black but the label that's added is a light grey. 15 Great jQuery Plugins For Better Table Manipulation. Table is the most difficult object to be styled, due to its browser compatibility and markup. Most of the designers and developers will use div to replace table because it is much more easier to style div than table. But, we still need table in our daily applications, one of the best example is comparison table. This article will share 15 useful jQuery table plugins for you to display, sort, filter and manipulate your data in table. 1.
DataTables DataTables is very powerful jQuery plugin which offer a lot of features. 2. uiTableFilter uiTableFilter is a jQuery plugin for filtering table rows. 3. Scrollable HTML Table plugin for jQuery able to convert a table into scrollable. 4. Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. 5.
Flexigrid is a lightweight Web 2.0 Javascript Grid for jQuery. 6. HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. Sencha.