background preloader

Beautiful Background Image Navigation

Pretty Date One method that I’ve been wanting for quite a while now was a simple way to format old JavaScript dates in a “pretty” way. For example “2008-01-28T20:24:17Z” becomes “2 hours ago”. Here’s some more examples: prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"prettyDate("2007-12-15T22:24:17Z") // => undefined Note that I only care about dates in the past (by far the most common use case) and only dates within the past month (anything beyond a month becomes fuzzy and impractical). JavaScript Pretty Date pretty.js (Also include a .prettyDate() jQuery plugin, for convenience.)Demo (Some examples of date conversion using basic DOM manipulation.) Example Usage In the following examples I make all the anchors on the site, that have a title with a date in it, have a pretty date as their inner text. With plain DOM: With jQuery: About

jQuery Circulate Prereqs Requires the jQuery Library as well as the Easing plugin. Usage / Options / Defaults Stopping a loop $("#anything").circulate("Stop"); Download VERY BETA: Full package (what you are looking at) Starbox - Rating stars for prototype Intro Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes. Demos Starboxes Create them in all sizes and shapes. Use indicators Let your users know what's going on. Special features Rerating, locking, ghosting, inverting, custom events and callbacks to name a few. You've clicked : element and rated rating . Installation Starbox requires Prototype , if you want to use effects Scriptaculous is required as well. Add Starbox below these libraries, the correct order is as in the example below. Add starbox.css to your header. Upload the images to the images directory. overlayImages: '.. The Google Ajax Libraries API can be used to automatically load the latest version of Prototype and Scriptaculous. How to use Styling

Sexy AlertBox Sexy Alert Box es un clon "sexy" del clásico alert de javascript. Con un aire a lightbox, cambia las feas alertas de windows por alertas mas atractivas!. Copyright (c) 2008 www.coders.me (Eduardo D. Sada) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Demos jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own. Play with the demos, view the source, build a theme, read the API documentation and start using jQuery UI today. Interactions Interactions add basic mouse-based behaviors to any element. You can create sortable lists, resizable elements, drag & drop behaviors and more with just a few lines of code. Interactions also make great building blocks for more complex widgets and applications. Widgets Widgets are full-featured UI controls that bring the richness of desktop applications to the Web. Effects Effects add support for animating colors and class transitions, as well as providing several additional easings. Utilities Utilities used by jQuery UI to build interactions and widgets.

Animated Form Switching with jQuery In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form. […] View demoDownload source In this tutorial we will create a simple animated form switch with three very common forms. We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page. So, let’s begin by creating and styling the three forms. The Markup We will create three different forms, a login form, a registration form and a password reminder form with just one input field. First, we will create a wrapper for all three forms. Then we will add each form element to the wrapper and insert the necessary input fields. Now we will add the login form. And finally, we will add the password reminder form: The CSS And that’s all the style!

Real Person This plugin is designed to help overcome automated form submission by requiring a "real person" to identify text made up of dots. The entered value is compared on the server with the generated value to determine whether processing should continue. The real person functionality can easily be added to an input field with appropriate default settings. You can also remove the real person functionality if it is no longer required. Show code $('#defaultReal').realperson(); $('#disableReal').toggle(function() { $(this).text('Enable'); $('#defaultReal').realperson('disable'); }, function() { $(this).text('Disable'); $('#defaultReal').realperson('enable'); } ); $('#removeReal').toggle(function() { $(this).text('Re-attach'); $('#defaultReal').realperson('destroy'); }, function() { $(this).text('Remove'); $('#defaultReal').realperson(); } ); You can override the defaults globally as shown below: Customise the real person functionality through additional settings. Different length: Java

Add a Copyright Notice to Copied Text I was checking out the CBC website and I noticed that if you copy and paste any text from the site a reference link appears at the bottom, indicating the source. I thought that was kind of neat and tried to figure out how to do it. Turns out, they use a service called Tynt. That’s cool and all, but I wanted to see if I could make it happen using JavaScript. All I needed my function to do was grab the copied selection, tack on a copyright notice and then add the two to the clipboard. It took a lot of messing around and I was finally able to put something together that worked in most browsers. Here is the JavaScript: Just add this between your page’s head tags, and change the copyright notice to whatever you want. Demo To test it out, copy something from the paragraph below and paste it into your favorite text editor. Aenean vel massa tellus.

Related: