Post Top Ad

Post Top Ad

Sunday, September 14, 2008

10:03 AM

Create Parallax Effects On The Fly With jParallax

jParallax is a jQuery plugin which enables you to create Parallax effects.
This effect simply moves layers in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts & create a depth.



Info: If you’re new to parallax effects, check the demo to see it (Parallax in Wikipedia).
jParallax simply provides the necessary options for creating the animation like layer controlling, positioning & timing.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://webdev.stephband.info/parallax.html
Demo: http://webdev.stephband.info/parallax_demos.html
Via: http://ajaxian.com/archives/jparallax-turns-elements...

Saturday, September 13, 2008

10:00 PM

jQuery Image Gallery Plugin: Galleria

Galleria is an image gallery jQuery plugin.
It loads the images one by one from an unordered list and can present them:
  • scaled
  • unscaled
  • centered
  • cropped inside a fixed thumbnail box


The beauty of Galleria is behind the ease of creating a gallery. Simply create an unordered list, add some images and it will create a chic gallery.
Another nice feature is the support of browser history. You can use your browser’s back & forward buttons

Other features of this jQuery image gallery:

  • Unobtrusive javascript
  • Lightweight (4k packed)
  • Displays the thumbnail when the actual image is loaded
  • CSS powered - create your own gallery style
  • Super fast image browsing since the images are preloaded one at a time in the background
  • Stylable caption from image or anchor title
  • jQuery plugin - takes one line to implement
  • Can fire events so you can customize the images behaviour onLoad
 Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://devkick.com/lab/galleria/
Demo: http://devkick.com/lab/galleria/demo_01.htm
7:23 PM

Flexible JavaScript Tree Menu: dTree

While creating a filebrowser for a project, I have tried several JavaScript tree menus and found this one the easiest to work with.
dTree is an easy to setup & use classic JavaScript tree menu.
With a XHTML 1.0 strict validated output, this tree menu supports unlimited number of levels and remembers the state between pages.


Other features of dTree:


  • Can be used with or without frames
  • Possible to have as many trees as you like on a page
  • All major browsers supported
  • Alternative images for each node
The items don’t need to be in an order within the code as you can re-order them. This is a functional feature when creating the menu from a database.
The script is well-documented and this example shows how flexible it is.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.destroydrop.com/javascripts/tree/
Demo: http://www.destroydrop.com/javascripts/tree/example/
4:14 PM

Form Validation + Ajax Submit With ProtoForm

ProtoForm is a "very easy to implement’, lightweight (4kb) & unobtrusive form validation & Ajaxed submit solution that depends on Prototype.

It can validate:

  • e-mail
  • date
  • telephone number
  • URL

Parameters are mentioned within the attributes like:

This makes it very easy to implement (a negative point can be requirement to define the ids in a specific way).
ProtoForm also sends data and shows response with Ajax, highlights the form field on focus and on error.

 Requirements: Prototype
Compatibility: All Major Browsers
Website: http://www.cssrevolt.com/upload/files/protoform/
10:26 AM

JavaScript Coverflow With Canvas

This is another Coverflow script which uses canvas for the effects.
The script is very easy to implement & works smoothly.


Images can be browsed via scroll wheel or left-right keys besides the mouse clicks. And, it is tested with other javascript libraries like jQuery, MooTools, Dojo and Prototype.
For the canvas support in IE, checkout ExplorerCanvas.

Requirements: No Requirements
Compatibility: All Major Browsers (Explorer Canvas can be used for IE)
Website: http://radnan.public.iastate.edu/coverflow/
Via: http://ajaxian.com/archives/4331

Friday, September 12, 2008

11:55 PM

Difference between http:// and https://

The main difference between http:// and https:// is
It's all about keeping you secure

HTTP stands for HyperText Transport Protocol, which is just a fancy way of
saying it's a protocol (a language, in a manner of speaking) for information to
be passed back and forth between web servers and clients.

The important thing is the letter S which makes the difference between HTTP and HTTPS.

The S (big surprise) stands for "Secure".

If you visit a website or webpage, and look at the address in the web browser, it will likely begin with the following: http://.

This means that the website is talking to your browser using the regular
'unsecure' language.

In other words, it is possible for someone to "eavesdrop" on your
computer's conversation with the website.

If you fill out a form on the website, someone might see the information you
send to that site.

This is why you never ever enter your credit card number in an http
website!

But if the web address begins with https://, that basically means your computer is talking to the website in a secure code that no one can eavesdrop on.

You understand why this is so important, right?

If a website ever asks you to enter your credit card information, you should
automatically look to see if the web address begins with https://.

If it doesn't, there's no way you're going to enter sensitive information like a
credit card number!
9:58 PM

jQuery Image Crop Plugin: Jcrop

For the last weeks, several JavaScript image crop resources are published at WebResourcesDepot. This is because, the increase in use of such interfaces as image-based applications are on the rise & many web applications offer their users to edit their avatars besides only uploading them. So, you may need one of them : ) .
Jcrop is a cross-browser jQuery image crop plugin.


Some features of Jcrop:

  • Attaches simply to any image in your HTML page
  • Supports aspect ratio locking
  • Callbacks for selection done, or while moving
  • Keyboard support for nudging selection
  • Support for CSS styling
  • Advanced API including animation support
An example of this plugin here & a sample PHP code to complete the server-side of the crop here.
P.S. Thanks to Kelly for the suggestion.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://deepliquid.com/content/Jcrop.html
Demo: http://deepliquid.com/content/Jcrop_Examples.html