View original post found on Smashing Magazine Feed authored by Smashing Editorial
February 18th, 2010 — web20
Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.
This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
You may want to look at similar CSS-related posts that we published last months:
[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]
CSS Layouts: Techniques And Workarounds
Facebook Style Footer Admin Panel
Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 2.
Adaptable View: How Do They Do It?
This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”
Easy Display Switch with CSS and jQuery
A quick and simple way to enable users to switch page layouts using CSS and jQuery.
Quick Tip – Resizing Images Based On Browser Window Size
In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.
One Page Résumé Site
A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.
Pegs: Automate Display: fixed++
Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.
CSS 100% Height
A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.
CSS3 Drop-Down Menu
A clean, simple a nice navigation menu, designed by Nick La.
CSS Trick for a Scrolling Transparent Background Effect
Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.
Fluid Images
By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?
Scroll/Follow Sidebar, Multiple Techniques
A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.
Vertical Centering With CSS
There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.
Create YouTube-like adaptable view using CSS and jQuery
Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.
How To Create a Horizontally Scrolling Site
If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!
Purely CSS – Faking Minimum Margins
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.
Create Sidebars of Equal Height with Faux Columns
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.
Setting Equal Heights with jQuery
Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.
Quick Tip: Centered Fake Floats
There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.
6 Flexible jQuery Plugins to Control Web Page Layouts Easily
A collection of six jQuery plug-ins to manage page layouts easily.
Four Methods to Create Equal-Height Columns
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.
How to: CSS Large Background
A tutorial with various CSS examples for how to create a large background using either a single image or double images.
A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.
Perfect Full Page Background Image
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.
Smart Columns With CSS and jQuery
In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.
Images And Visual Effects With CSS
A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.
Rolling a coke can around with pure CSS
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!
Grayscale Hover Effect With CSS and jQuery
A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.
Codename Rainbows
Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.
3 Easy and Fast CSS Techniques for Faux Image Cropping
This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.
Image Rollover Borders That Do Not Change Layout
With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.
Horizontal Stripes
This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.
Nine Techniques for CSS Image Replacement
Put nine different techniques of image replacement to the test.
Bokeh effects with CSS3 and jQuery
This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.
A Stationary Logo That Changes on Page Scroll with CSS
Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.
Silhouette Fade-Ins
To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.
Creating Triangles in CSS
Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.
A parallax optical illusion with CSS: The Horse in Motion
Time for some fun with CSS and optical illusions.
Pure CSS Line Graph
The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.
Zooming with jQuery and CSS
This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.
Create Resizing Thumbnails Using Overflow Property
This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.
Cross-browser drop shadows using pure CSS
Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.
Date Badges and Comment Bubbles for Your Blog
One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.
CSS Tables And Web Forms
UX trick: display form data as tabular data
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.
Tables: Not As Evil As You Think
Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.
Perfect Drop-Down Log-In Box Like Twitter Using jQuery
This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.
Make a Select’s Options Printable
When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.
Twitter-Like Log-In With jQuery and CSS
This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.
Clean and Pure CSS Form Design
This tutorial illustrates how to design a pure CSS form without using HTML tables.
CSSG Collection: Free Comment Styles
This is the second CSSG collection from CSS Globe.
Have a Field Day with HTML5 Forms
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.
Editable/Printable Invoice
Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.
How to Mask Passwords Like the iPhone
Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.
Make Web Forms Suck Less With Labels
We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.
FancyForm: JavaScript checkbox replacement
FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.
jQuery checkbox v.1.3.0 Beta 1
A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.
Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.
Fluid Search Box
Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.
Last Click
Browser Pong
A whole new pong game using three browser windows for the ball and racquets. Clever!
Related posts
You may want to look at similar CSS-related posts that we published last months:
(kk) (jb) (vf) (al)
© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 48 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, jquery
View original post found on Smashing Magazine Feed authored by Smashing Editorial
June 21st, 2009 — ajax, web20
JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.
Many things that were once accomplished using Flash objects can now be built using JavaScript – with the added benefit that it is free, typically more web and mobile accessible under most circumstances using best practices for development techniques, and without the need to use proprietary software for development.
Though JavaScript has been around for a while, new tools, techniques, and information are constantly being pumped out to continually push the technology into greater heights. In this article, we wish to share with you a huge list of fresh and new tools and resources that JavaScript developers will find useful and informative.
Here are a few other posts that you might find interesting:
Useful JavaScript Tools
FireUnit
Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit.
Sugar Test
SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.
JS.Class: Ruby-style JavaScript
JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.
JSON Formatter and Validator
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.
Faux Console: Simulating a Firebug, Safari or Opera debugging in IE
Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.
JS Bin
JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like Twitter or Facebook groups. Be sure to check out the video introduction to see JS Bin in action.
PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.
Page Speed
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow that evaluates your web pages for performance. Read more about Page Speed best practices to see what aspects of a web page are being evaluated. YSlow and Page Speed are based off Steve Souder’s work (who worked for Yahoo! and now works for Google).
prettyPrint
prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about them, which you can then use for debugging purposes or simply for gathering data about them for documentation.
Spket IDE
Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter feature gives you unparalleled control and standardization for you or your team’s JavaScript code formatting standards.
Obtrusive JavaScript Checker
Obtrusive JavaScript Checker, created by Robert Nyman, is a tool for finding inline JavaScript on web pages. It highlights elements that have inline JavaScript properties and provides a summary report when you mouse over them. The tool is available as a Firefox extension or a Greasemonkey script.
Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and other web pages. The tool works automatically: it finds blocks of code, detects a language and highlights it accordingly.
Javascript Compressor
Javascript Compressor is a web-based tool for compressing your JavaScript to reduce their file sizes. It works by removing unnecessary characters (such as extra tabs and spaces). Developers who use the tool to compress their code can also use the decoding feature to uncompress their source code. It also obfuscates your code, making it harder to read – which can be desirable if you want to delay prying eyes from analyzing your publicly-available code base.
Firediff
Firediff is a Firefox/Firebug extension that allows you to track changes in the DOM and CSS. By logging these changes, you can gain information about how web applications work, and what elements (and what properties) are being altered by way of DOM manipulation.
RockStar Web Profiler
RockStar Web Profiler (aka Razor) logs and profiles information about client-side performance. It provides developers with a console for analyzing the data gathered by the tool. Check out the RockStar Web Profiler presentation to get an overview of its many awesome features.
bookmarklet maker
This plain and simple web tool allows you to create JavaScript-based bookmarklets. Usage is simple: simply copy and paste your source code into it and it will output the processed code in the lower pane.
Tiny JS
Tiny JS is an online directory of small but powerful plugins for popular JavaScript/Ajax libraries (MooTools, jQuery, and YUI at the moment). Its aim is to hunt down and feature lightweight plugins that give you a lot of bang for the buck.
JSCharts
JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. It’s enough to include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.
Glimmer
Glimmer is an interactive design tool for incorporating slick JavaScript-based animation effects using the jQuery library. Glimmer comes with a wizard-style user interface which can reduce the amount of coding that you have to write manually.
JSSPec
A testing environment for JavaScript that runs on IE 6+, Firefox 2+ and Safari 3+. The tool shows differences between expected value and actual value, displays the failed line exactly and supports conditional execution. Released under GNU and available for free download.
CodeRun Code Search
CodeRun’s Code Search tool lets you search and view user-submitted Ajax, PHP, and .NET source code. Once you’ve found a script or project that you’re interested in, you can edit it via their web-based IDE without having to download the project locally.
BaseJS: A Mobile (Safari) Javascript Framework
a simple, lightweight framework created specifically for Mobile Safari (perfect for iPhone development).
MochaUI
MochaUI is a web-based tool for building web application interfaces built on top of the MooTools JavaScript framework. Jump right in by taking MochaUI for a spin in their demo page.
Utility Libraries and Components for JavaScript
narwhal
narwhal is a server-side JavaScript library following the ServerJS standard. Developers can create and share “packages” for website widgets, site features, programming patterns, in a similar fashion as PEAR for PHP.
uploadify
uploadify is a useful jQuery plugin for dealing with file uploads. It’s powered by a simple PHP script for handling the server-side stuff. Be sure to check out the uploadify demos to see the plugin in action.
Blackbird
Blackbird lets you log messages in JavaScript using a simple and intuitive JS-based API. The library also provides you with an attractive console GUI for viewing and analyzing messages. No more annoying alert() functions to see your objects’ contents (which can be frustrating for printing out array values) and for setting breakpoints.
Booklaylet
Booklaylet is a JS library for letting you easily deploy your bookmarklet applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.
JavaScripTools
JavaScipTools is a collection of useful JS components, functions, and classes with the aim of addressing some of the more common web developer tasks such as parsing and formatting of data types (i.e. date and time). It also comes with a dynamic table function for creating sortable HTML tables.
Doodle.js
HTML 5’s Canvas element gives developers a way to draw stuff on web pages programmatically. Doodle.js is a utility library/framework for working with more complex and robust Canvas drawing processes. Check out Spiral Pattern demo and the Marbles in Space (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.
liteAJaX
liteAJaX is a lightweight JavaScript class for working with AJAX. This library is perfect for projects that don’t use a JavaScript/Ajax framework or projects that don’t need a more robust and fully-featured framework.
Burst
Burst is a vector animation engine for HTML 5’s Canvas element. With it, you can create smooth, Flash-like animation effects for browsers that support Canvas.
JSTestDriver
JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action.
jsPDF
This library allows you to create PDF’s using nothing else but JavaScript. See the jsPDF demo page to see the library in action.
Useful JavaScript Libraries
GlassBox
GlassBox is a beautiful and refreshing take on modal windows that creates an interesting feeling of transparency as if you were looking through a glass. Check out the example page to see different types of GlassBox implementations.
jQuery TOOLS
jQuery TOOLS is a toolbox that gives developers some of the most popular UI design patterns at their disposal in an easy-to-use manner. View some of the things you can do with jQuery TOOLS in the project’s demo page.
Moousture
Moosture is a JavaScript library for dealing with mouse gestures, written on top of the MooTools framework.
Tablecloth
Tablecloth is a lightweight and unobtrusive JavaScript library for styling and adding dynamic user interaction to HTML tables.
Unobtrusive Table Actions Script
This simple and lightweight library brings together a set of common and useful functions for dealing with HTML tables, such as zebra-striping rows, highlighting rows on mouse over, and column highlighting.
LivePipe
LivePipe is a set of widgets and controls for adding common user interaction components to web applications using the Prototype JavaScript framework.
JavaScript Graphical / Virtual Keyboard Interface
This JavaScript package adds a virtual keyboard interface into web pages.
Tipmage
Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.
qGallery
qGallery is a simple but beautiful JavaScript for creating image galleries with smooth and slick animation effects.
Educational JavaScript Resources and Tutorials
Ajax Frameworks Decision Center
For large companies, committing to a JavaScript/Ajax framework such as Prototype, MooTools, or jQuery is a big decision because it affects a large amount of employees and will dictate the direction of the company’s client-side interaction and RIA development philosophies. Using the Ajax Frameworks Decision Center gives you an organized, quantitative, and thorough method for making a solid decision.
jQuery vs MooTools
This single-page site by MooTools Dev Team member Aaron Newton is a comparative look into jQuery versus MooTools.
Ajax Framework Analysis Results
This analysis of popular JavaScript/Ajax frameworks (Dojo, Ext JS, GWT, YUI) is a great resource for gathering research data for your own frameworks: the analysis matrix factors in criteria such as scalability, extensibility, quality and quantity of documentation, and much more. You can adapt this matrix, tweak their weights, and modify criterions to help you decide which JS framework to go with.
Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial, you’ll learn how to create a multi-tiered drop down menu with the use of the jQuery library.
Easy Display Switch with CSS and jQuery
This tutorial outlines a method for using jQuery to smoothly-transition into different viewing modes, which can be helpful in image galleries.
Create a Slick and Accessible Slideshow Using jQuery
This is a step-by-step jQuery tutorial that I wrote for creating a simple and slick slideshow that can be adapted to display different content types. Check out the demo page to see the slideshow in action.
Learning Advanced JavaScript
John Resig has a slideshow-style, web-based tutorial on advanced JavaScript development. It is a wonderful stepping-stone for JavaScript developers ready to make the leap into RIA development using JavaScript.
JavaScript tests & Compatibility tables
This resource is a well-organized cheatsheet for JavaScript methods cross-browser compatibility backed by sample tests that you can run to see how they work (or don’t work) in your browser.
Code Conventions for the JavaScript
On this page, you can find suggested coding conventions for JavaScript. It is important to note that there is no one correct convention, but this is a great place to start developing your own.
About the Author
Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals. If you would like to contact him, send him a tweet and follow him on Twitter.
© Smashing Editorial for Smashing Magazine, 2009. |
Permalink |
47 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ajax, jquery, js, tools, useful
View original post found on Ajaxian » Front Page authored by Dion Almaer
March 10th, 2009 — ajax
Allan Jardine has updated his popular DataTables rich data grid control. Allan told us what his aims were for this 1.4.1 release:
Being fairly happy with the options that DataTables presents to the end user, I’ve focused this release on providing tools for the developer. A plug-in API, non-destructive DOM manipulation (the biggest weak point of the old versions) and documentation are the major new features.
If you take a look at the new rich API you will see that can manipulate the data in the table, build filters, fetch remote data, and more.
What does DataTables feature again?
- Variable length pagination
- On-the-fly filtering
- Multi-coloum sorting with data type detection
- Smart handling of column widths
- Fully internationalisable
UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided
- State saving
- Hidden columns
- Dynamic creation of tables
- Ajax auto loading of data
- Custom DOM positioning
- Single column filtering
- Alternative pagination types
- Non-destructive DOM interaction
- Sorting column(s) highlighting
- Extensive plug-in support
Sorting, type detection, API functions and pagination
- Fully themeable by CSS
- Solid documentation
View original post found on Smashing Magazine Feed authored by Noura Yehia
January 15th, 2009 — ajax
by Noura Yehia
JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.
To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.
You may want to take a look at the following related posts:
Dynamic Content
1. Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.
2. Spoiler Revealer with jQuery
A simple technique that hides some content first and fades it in once a link is clicked.
3. AJAX Upload
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.
4. FCBKcomplete
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.
5. Create Accessible Charts Using Canvas and jQuery
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.
Form Manipulation
6. Radio Button and Check Box Replacement
This jQuery tool replaces radio buttons and check boxes with a more appealing display.
7. Submit a Form without a Page Refresh
8. jQuery AJAX Contact Form
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.
9. Simple jQuery Form Validation
This jQuery form shows live form-input validators both server-side and browser-side.
Navigation Menus
10. jQuery Context Menu
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.
11. Kwicks for jQuery
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.
12. jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”
13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.
14. How to Create a MooTools Home Page-Inspired Navigation Effect
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!
15. CSS Sprites2
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.
Manipulating Content
16. jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
17. Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.
18. Pagination
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.
19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.
20. Creating a Slick Auto-Playing Featured-Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.
- Demo can be found here.
- Download files here.
21. haccordion
A simple horizontal accordion plug-in for jQuery.
Tabular Data and Grids
22. Table Row Checkbox Toggle
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.
23. Tablesorter
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.
24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.
25. Scrollable HTML Table
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.
Lightbox Techniques
26. Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.
27. FancyBox
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.
28. Facebox Image and Content Viewer
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.
29. jQuery.popeye
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.
Image Galleries and Viewers
30. Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.
31. Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Browser Tweaks
32. Setting Equal Heights with jQuery
A script to equalize the heights of boxes within the same container and create a tidy grid.
33. jQuery IE6 PNG Transparency Fix
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.
34. BGI frame
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here.
35. Fix Overflow
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.
36. Lazy Load
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here.
37. Maxlength
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.
Animation Effects
38. Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.
39. jQuery Fading Menu – Replacing Content
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”
40. Build an Animated Cartoon Robot with jQuery
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.
41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.
42. Use jQuery for Background Image Animations
Animate your menu whenever a user hovers over an item with this effect.
Image Manipulation
43. Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
44. jQZoom
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.
Miscellaneous
45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.
46. Sortable Lists
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.
47. Amazing Music Player Using Mouse Gestures and Hotkeys
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.
48. Script for Tracking Outbound Links in Google Analytics with jQuery
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.
<script type="text/javascript">
$('#content a:not(.popupwindow)').filter(function() {
var theHref = this;
if (theHref.hostname && theHref.hostname !== location.hostname) {
$(theHref).not(".noAutoIcon").addClass("offSite");
$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
var code=event.charCode || event.keyCode;
if (!code || (code && code == 13)) {
if(pageTracker){
var fixedLink = this.href;
fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
fixedLink = '/outgoing/' fixedLink;
pageTracker._trackPageview(fixedLink);
};
};
});
};
});
</script>
49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
Related posts
You may want to take a look at the following related posts:
About the author
Noura Yehia is a Web designer and blogger who can be found at Noupe and Devsnippets. If you want to connect with the author, you can follow her on Twitter.
View original post found on Ajaxian » Front Page authored by Rey Bango
January 14th, 2009 — ajax
Disclosure: I’m a member of the jQuery Project team
Back on January 14, 2006, a brash, young and talented developer named John Resig put out a personal project to the OSS world and hoped it could benefit *someone*. Little did he know that 3 years later, his side project would become one of the most influential frameworks for developing JavaScript-based applications. Today, the jQuery project turns 3 years old which, considering the churn rate for open source projects, is a monumental achievement. So it makes sense that on the project’s 3rd birthday, the team has announced the release of jQuery v1.3, the latest and greatest release of jQuery which includes the new Sizzle selector engine.
Along with the inclusion of Sizzle, jQuery v1.3 includes a bevvy of new features:
- Live Events: Event delegation with a jQuery twist
- jQuery Event Overhaul: Completely rewired to simplify event handling.
- HTML Injection Rewrite: Lightning-fast HTML appending.
- Offset Rewrite: Super-quick position calculation.
- No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.
The details of the release can be found via the release notes.
In addition to that, Remy Sharp donated a new dynamic API browser to the jQuery project which makes searching the jQuery API extremely easy:
The API browser includes:
- All the latest jQuery and jQuery UI documentation.
- The ability to mark pages as favorites for those pages you keep wanting to return to.
- Syntax highlighting in the code examples
- Live running of examples within the browser
- Links to edit and experiment with the code examples
In addition, Tane Piper & Remy worked together to provide an AIR app version of the browser so you can view the API locally.
The biggest update though is that the jQuery projects (i.e. jQuery & jQuery UI) will be part of the Software Freedom Conservancy thus making the projects true non-profit endeavor and providing a number of benefits to both the project and the jQuery community including:
- It allows the current project members to continue to manage the projects and maintain ultimate responsibility for the direction of current and future efforts.
- It allows the projects to be considered a true non-profit efforts allowing us to be able to accept donations and contributions without incurring tremendous personal financial liability.
- The copyright of the code will be assigned to the conservancy thus ensuring that no single person will own contributions or assets of the project.
- It may allow corporations to write off time when an employee contributes to a project.
- Most importantly, it ensures that the jQuery projects will always be open and free software
With so many new individuals & corporations contributing to the project, doing this became a big priority to protect the investments made by the jQuery community.
This is a lot of great news for jQuery developers and here’s wishing jQuery a happy 3rd birthday.
View original post found on Ajaxian » Front Page authored by Dion Almaer
November 12th, 2008 — ajax, ui
John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:
He made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time – all of which is done by moving the mouse over the times that you desire. The final click is anywhere – filling in the time that was chosen. It’s hard to explain, you simply have to try it.
One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.
I would be remiss not to mention John’s other post of the day, where he goes into detail on CSS Animations and CSS Animations.
View original post found on Ajaxian » Front Page authored by Dion Almaer
October 15th, 2008 — ajax
An interesting top 12 list has been published, on using Javascript to fix 12 common browser headaches:
- Setting Equal Heights (jQuery example:
$("#col1, #col2").equalizeCols();)
- IE6 PNG Alpha Transperancy support
- Changing CSS Classes in JavaScript
- Browser selectors in CSS (
$('html').addClass($.browser);)
- min-/max- height & width support
- Center Elements Vertically / Horizontally
- Display Q tags in Internet Explorer
- Increase the size of click targets and get more call-to-action conversions
- Lazy loader
- bgiframe: Helps ease the pain when having to deal with IE z-index issues.
- ieFixButtons: fixes the buggy behavior of the element in Internet Explorer 6 and 7
- Fix Overflow
As you will see, most of the solutions are jQuery plugins, but you could roll your own.
View original post found on Ajaxian » Front Page authored by Ben Galbraith
July 21st, 2008 — ajax
Edward Tufte has long had a following of fans in the field of information visualizations. Among his interesting taxonomy of visualization types is the “Sparkline“, which he describes as “data-intense, design-simple, word-sized graphics”.
While Tufte originally suggested that computer displays are too low-resolution to effectively make use of Sparklines (vs. printed page), James Dempster pointed us to some work the folks at Splunk have done to join a long line of folks who have given it a go anyway.
The resulting jQuery plug-in is really nice. Now if only they had the ability to overlay two line graphs over the same area using a transparent fill… ;-)
(Oh, and there’s also a simple Sparkline generator for Google Charts over at style.org.)
View original post found on Ajaxian » Front Page authored by Rey Bango
July 18th, 2008 — ajax
Developers are always looking for a great grid control that is easy to use, customizable and, of course, feature-rich. Paulo Mariñas has created just that for jQuery developers. Flexigrid is an extremely flexible grid control with provides many of the features highly-desired by developers. These include:
- Resizable columns
- Resizable height and width
- Sortable column headers
- Cool theme
- Can convert an ordinary table
- Ability to connect to an ajax data source (XML and JSON[new])
- Paging
- Show/hide columns
- Toolbar
- Search
- Accessible API
Version 1.0b3, which was recently released provides:
- Fixed paging problem on multiple instances
- Mootools and Prototype noConflict() compatibility problems fixed
- New onError event on ajax interaction, (it will pass what the server said in a variable called data), allowing you to handle server problems
- New $().flexAddData method, allows you to directly add new data to the grid using your own data source.
- New preProcess API, allows you to modify or process data sent by server before passing it to Flexigrid, allowing you to use your own JSON format for example.
- Single Rows Select just use { singleSelect: true } in the options
Get more information at the Flexigrid main page.
View original post found on Ajaxian » Front Page authored by Dion Almaer
June 9th, 2008 — ajax, ui
Paul Bakaus & the jQuery UI Team has released a major update jQuery UI 1.5.
There seem to be three major pieces to the news:
API Refactoring
What we came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:
- $(”div”).draggable() creates a draggable
- $(”div”).draggable(”destroy”) destroys it
- $(”div”).draggable(”method”) calls another method on the plugin.
The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.
In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.
Effects: Internalizing Enchant
One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant” was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.
We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).
Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!
As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.
Create your own Themes, with help
ThemeRoller is an application itself that allows you to create themes on the fly and save them out. The Filament Group did the work and blogged about how.
The jQuery team also wanted to give a shout out to Liferay, “who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations.”
