Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images a Click here for the new version of this plugin Version 1.5 of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. All of the features here are result of your comments, so if you have more ideas, keep ‘em coming! Note: in case you haven’t already, you might want to check out article about first version of this plugin. Download easySlider1.5.zip Features This version features: auto slidecontinuous sliding"go to first" and "go to last" buttonhiding controlsoptional wrapping markup for control buttons vertical slidingmultiple sliders on one page Here are the things you can customize (with their default values) I will explain new options: controlsShow By default set to true, but if set to false it will not add any controls. controlsBefore and controlsAfter In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. controlsFade By default set to true. firstShow and lastShow auto
Button Maker Masked Input Plugin First, include the jQuery and masked input javascript files. Next, call the mask function for those items you wish to have masked. Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method. Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method. You can now supply your own mask definitions. jQuery(function($){ $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999");}); You can have part of your mask be optional. jQuery(function($){ $("#phone").mask("(999) 999-9999? If your requirements aren't met by the predefined placeholders, you can always add your own. jQuery(function($){ $("#phone").mask("#hhhhhh");}); By design, this plugin will reject input which doesn't complete the mask.
Coda Slider Effect | jQuery for Designers - Tutorials and screen How to Solve the Problem Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements: Degrades perfectly without JavaScript enabledSliding panels effect without hogging browser CPUNext and previous buttons added using JavaScript because they hold no use without JavaScriptHitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigationAny link on the page that refers back to a panel should trigger the effect and highlight the right navigation – this should happen without any extra work The hash is the emphasised part (including the # symbol) in: In fact, our version of this slider will be better than Panic’s and the current jQuery plugins if we can meet all of the requirements. I’ve provided a screencast to walk through how create this functionality. Plugins Required Markup
Control.Tabs : Unobtrusive CSS tabs for Prototype Unobtrusive CSS tabs for Prototype. Introduction & Examples Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases. This is the simplest example of a set of tabs. Note that the styling for the tabs is done with CSS, not the Control.Tabs script. This example demonstrates scripting a Control.Tabs instance. Control.Tabs is fully programmable, so in the example above the links are programmed to change which tab is active, and an event handler is registered to change the select box (and visa versa). <! JavaScript Note that this example doesn't have an style information. More Usage Examples
Create apple.com-like breadcrumb using simple CSS I believe you all know what breadcrumbs are. If I would have to make a simplest, rough definition I could say it is a navigation pattern that shows a path from the home page to the current one. If you are still unsure what breadcrumbs are (or my “definition” is too rough) be sure to read Breadcrumbs pattern explanation on Welie.com In its simplest form it usually looks like this: You are here: Home > Sample page 1 > Sample page 2 > Current page But we are going to enhance this simple form and to create a breadcrumb that is similar to the one on apple.com. Let’s create something that looks like this As you can see on the screenshot above, breadcrumb has a soft gray gradient and a separator that looks like a right arrow. So what would be the best way to create a breadcrumb? In the example above we have unordered list that has four list items. If you try to see this example in a browser you would see a simple bulleted list. First we’ll style UL element: Believe it or not that’s all. Conclusion
Frontpage Slideshow Run away, run far far away This module is tied to a commercial product, is unsupported, is poorly implemented, lacks modern features, and is poorly documented. First, it requires a third party, commercial Javascript library ($28). Second, it's not maintained at all. Third, it's implementation in Drupal is not as strong as it could be. Fourth, it has no support for Imagecache. Finally, I can find no online documentation and only a partially written README.txt file which keeps referring to FCKeditor. There are many better alternatives out there. Review by MatteusX [info] on August 11, 2010 - 14:53 Needs a lot of work to get usable. Tried this module to no avail. Review by mxa055 [info] on December 15, 2009 - 11:21 Not ready at least when you have a multilingual site. Potentially this could be a killer module because it ports the very nice joomla slideshow and seems to be really easy to configure (if it will work as advertised anytime in the future).
50+ Nice Clean CSS Tab-Based Navigation Scripts Tab navigation has been one of the most fundamental element in any modern web structure. In order to make sure visitors can properly navigate through the website. One of the biggest challenge web designers and developers faced is to integrate a simple and nice tab navigation that not only don’t confuse, but helps visitors easily understand where they should be clicking. Whether you are running a website or blog, tab navigation is probably one of the element that helps drives traffic to internal pages. If you are web designer / developer, you might be interested in these few articles we’ve previously done: jQuery Coda-Slider<IMG src=" alt="" srcset="" sizes=""> Nice sleek tabs that slides through each tab. ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library.
15 Quick Ways to Shrink Page Load Times | Web Jackalope While more and more people are using faster Internet connections, there seems to be less emphasis by web developers on optimizing pages for faster load times. We’re seeing more and more widgets and javascript-heavy pages that take a long time to load, even on fast Internet connections. It’s a breath of fresh air when a website loads quickly and cleanly. Web developers sometimes neglect some simple rules when it comes to developing a fast website, which really hurts the user’s experience. Faster pages make a better user experience. Slow load times can be a killer to even the best web design. 1. There are a lot of these tools, but I’ve always used the Web Page Analyzer to check for general errors and seeing the “health” of my site in terms of load times. 2. Pingdom is a nifty site that allows you to check for broken images and paths, as well as loading time for all of your images and scripts. 3. 4. Here’s a sample of a correctly tagged image with height and width tags: 5. 6. 7. 8. 9. 10.
10 Impressive Techniques to Spice up your WordPress Theme | DevS WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of javascript with WordPress, the possibilities are infinite. This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme. 1. Learn how to implement a Nice & CleanSliding Panel in WordPress 2.7+ using jQuery. 2. jBreadCrumb jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. 3. The basic idea of the sliding box animations is very simple. 4. Add a nice style switcher using jQuery and PHP. 5. This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars. 6. 7. jQuery (mb)Menu 1.5 8. 9.