download javascript plugin

jParallax by stephband

2010-01-24T07:26:00.000-08:00

What does jParallax do?
Diagram of parallax layers.

jParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

The diagram on the right illustrates what Parallax does to the html:

Demo:

demo 1
demonstrates multiple parallaxed elements per page
shows parallax by 'remote control'
shows how content inside layers can be linked to
demonstrates window resizing

more tutorials click here
or download click here

Resizable WYMEditor with jQuery UI Resizable

2010-01-24T07:14:00.001-08:00

I took pyjax's WYMEditor resizable plugin and turned it into something that works for me using jQuery UI 1.6.

To use this, include jQuery, jQuery UI core and resizable, WYMEditor, then this. In that order.

JavaScript:

1.
WYMeditor.editor.prototype.resizable = function(options) {
2.
var wym = this;
3.
// Define some default options
4.
var default_options = {
5.
start: function(e, ui) {
6.
jQuery(wym._box).data("wym_height",
7.
jQuery(wym._box).find("iframe").height()
8.
);
9.
},
10.
stop: function(e, ui) {
11.
jQuery(wym._box).data("wym_height",
12.
jQuery(wym._box).find("iframe").height()
13.
);
14.
},
15.
// resize is called by the jQuery resizable plugin whenever the
16.
// client area was resized.
17.
resize: function(e, ui) {
18.
var diff = ui.size.height - ui.originalSize.height;
19.
jQuery(wym._box).find("iframe").height(jQuery(wym._box).data("wym_height") + diff);
20.
// If the plugin has horizontal resizing disabled we need to
21.
// adjust the "width" attribute of the area css, because the
22.
// resizing will set a fixed width (which breaks liquid layout
23.
// of the wymeditor area).
24.
if( !ui.options.handles['w'] && !ui.options.handles['e'] ) {
25.
ui.size.width = "inherit";
26.
}
27.
},
28.
handles: "s,e,se",
29.
minHeight: 250,
30.
maxHeight: 600
31.
};
32.

33.
// Merge given options with default options. Given options override
34.
// default ones.
35.
var final_options = jQuery.extend(default_options, options);
36.

37.
jQuery(wym._box).resizable(final_options);
38.

39.
};

From this point, you can use a resizable WYMEditor by adding this to your postInit setting when you create a WYMEditor on the page.

JavaScript:

1.
wymeditor({postInit: function(wym) {
2.
wym.hovertools(); // other plugins…
3.
wym.resizable({handles: “s,e”,
4.
maxHeight: 600});
5.
}
6.
})

view the demo

Biggest AJAX problem

2010-01-24T06:38:00.000-08:00

Or, how I found myself in front of a 700 MB memory footprint Firefox.

AJAX is becoming the new "de facto" standard in the web application industry. Every where you look on the web there are changes and on almost all sites to approach the AJAX world. Gmail and Yahoo Mail are some of the biggest web applications implementing AJAX and the results on both are amazing.

Browser world

If you ask a JavaScript developer about what is the biggest problem of JavaScript programming it will probably tell you it's browsers' incompatibilities. This is a very big issue and as long as the major players will not come to an understanding (and unfortunately they won't) and provide a common ground it will remain a big issue.

I will not mention here other problems from the CSS world for example.

Fortunately along with AJAX came a lot of frameworks and libraries that address this problem and hide the ugly details from the programmer.

The PROBLEM

In my opinion there is a worse problem then hacking your way around bugs and differences. That problem is represented by memory leaks.

JavaScript VM comes with a garbage collector and aside from some edge cases you might encounter, it does a pretty good job. Once you close a page a lot of work is done behind the scene to clear unreferenced objects. A lean, mean cleaning machine.

Well... AJAX can mess this up. The page is not closed any more.

The problem is not AJAX in itself as a programming paradigm but in what it can do for the application. With AJAX you can retrieve data from the server without closing the page and rebuilding it. And that data is placed inside the same page and manipulated by JavaScript programs. New DOM objects are created over and over, new JavaScript objects are created based on those data, new events are attached to all this objects. Few programmers destroy those object and unattache the events.

AJAX is still young and most of the people that have done some AJAX implementation for their site are just pulling some HTML parts from the server and using innerHTML to replace the content of a div element. No harm done. As the applications are becoming more and more complex the use case changes. XML or JSON is pulled from the server and DOM objects are created based on them. It is very easy to forget something.

Unfortunately most JavaScript programmers are sloppy. They were taught to be that way by the old browsing habits. There was no need to clean after you. When the page needed some more information, it was regenerated on the server and rendered again by the browser. A clean sheet to work on. Everything that was persistent were the cookies on the browser.

Taking care of your things in JavaScript is harder than you think. Very good programmers missed this. I was using an AJAX application from a well known company (not here to throw the stone) and after heavy usage for about two days without closing my browserFeature Articles, it reached the respected 700 MB footprint in my laptop's memory.articlesfactory

Validating Form Input in JavaScript

2010-01-24T06:31:00.000-08:00

This time we'll make a form that collects information about the
visitor at your site. You must have filled-in copious
registration forms or survey forms where you had to enter your
name, your email, your address, etc. Sometimes users,
intentionally or unintentionally, enter wrong information that
can either spoil your database scheme or give you lots of useless
data and hence, waste your precious server space.

To avoid such problems, as much as it can be managed, we
programmatically try to make sure, that data is entered in an
orderly fashion, and no unusable fields are entered. Checking
individual fields of the form does this.

We'll see a form here with three fields: Name, Phone and Email.
In this form, no field should be left blank, there should be no
numbers in the Name field [1,2,3,4,.], and in the Email field, no
email should be without the "@" sign. We can carry out more
complex validations, but at the moment, these three should
suffice.

/// Remove the extra dots while testing. They have been just
inserted so that some email programs don't freak out at the
presence of a JavaScript in the email.

<..script language="JavaScript1.2">
function CheckName(HoldName)
{
NoNumThere='true';
for(i=0; i
{
for(j=0; j<10; j++)
{
if(HoldName.charAt(i)==j.toString())
{
NoNumThere='false';
break;
}
}
if(NoNumThere=='false')
{
break;
}
}
return NoNumThere;
}
function CheckMail(HoldMail)
{
IsValid='true';
if(HoldMail.indexOf("@")<=0)
{
IsValid='false';
}
return IsValid;
}
function checkfields()
{
var AllFilled='true';
for(i=0; i<3; i++)
{
if(visitor.elements[i].value.length==0)
{
alert("The field [" + visitor.elements[i].name + "] can not be
left blank.");
AllFilled='false';
visitor.elements[i].focus;
return;
}
}
if(AllFilled=='true')
{
var NameValid=true;
var EmailValid=true;
NameValid=CheckName(visitor.vname.value);
EmailValid=CheckMail(visitor.vemail.value);
if(NameValid=='false')
{
alert("Sorry, your name can not contain numbers.");
visitor.vname.focus;
}
if(EmailValid=='false')
{
alert("Sorry, this does not seem like a valid email
address.");
}
}
if(NameValid=='true' & EmailValid=='true')
{
alert("RIGHTO!!!");
}
}

Copy and paste the code as it is, and save the entire content as
a new HTML page. Then load it on to your browser. Unless you see
the result, it'll be difficult to follow the script if you do not
have prior programming background. The first condition is, none
of the fields can be submitted blank. Click on the submit button
without entering anything and observe the reaction.

Here, we are making ample use of the recently learnt for(){.}
loop. Then we have used function too, to carry out certain
validations. Our main function, checkfields(), is associated with
the OnClick attribute of the "Submit" button, that is, when you
click on the "Submit" button, this function gets triggered.

Some new terms in today's script are: true, false, charAt(),
toString(), break, indexOf(), string.length, and
orm.elements[ ].

A quick explanation to make things easier:

If at 10:30 pm, I say, "It is night", then

var fact='true'

and if I say at 10:30 pm that "It's afternoon", then

var fact='false'

Which explains the use of true and false, which are also called
Boolean operators, which means, a Boolean variable can either be
true or false, but NEVER both.

Until we learn about arrays, every character in a string has an
index position. For instance, if we have

var city="Delhi"

then city.charAt(0)="D", city.charAt(1)="e",
city.charAt(2)="l"...city.charAt(4)="i".

toString(), converts another data type to a string data-type. For
example,

var num1=31
var num2=21
var char1=num1.toString()
var char2=num2.toString()

So,

num1+num2=52
and
char1+char2=3221

In the second case, instead of being added, the variables are
being concatenated, which indicates that they are strings, not
numbers. We'll see its application later.

break, true to its name, breaks something. In this case, it
breaks the loop in which it occurs, and takes the execution of
the program to the line immediately after the loop, without
meeting the condition required to complete the loop.

indexOf() tells us about the position of a particular character
in a string. Look its use in the following code:

var city="Delhi"

Referring to this code, city.indexOf("e") should give us a value
1 and city.indexOf("h") should give us a value 3.
city.indexOf("z") should give us a value less than zero,
indicating that it does not belong to the given string.

String.length gives us the length of the string, for instance, if
city="Delhi", then city.length would give us 5.

Again, elements[ ] is an array, and we haven't dealt with them
yet, so we leave the rest of the explanation to the next section. article

Jquery Lavalamp

2010-01-22T06:36:00.000-08:00

This is the easy part. Most of the javascript work is taken care by the Lava Lamp plugin itself. As a developer, you just have to include the mandatory and/or optional javascript files and fire a call to initialize the menu.

nclude a reference to the jQuery library and the LavaLamp plugin. Optionally, include the easing plugin as well. It has many cool effects, that are not contained in the core. For instance, the “backout” effect used in this demo is part of the easing plugin.

download|homepage and demo