Archive for the 'Javascript' Category

23
Apr

Styling an input type=”file”

By Ahsan 1 Comment
Categories: Javascript and css

If you are ever in a situation where you need to style an input element with type=”file”, you will be very surprised to find that almost no styling is possible directly. This is because, no browser supports styling for <input type=”file”>. Only the “size” attribute was there, that gave some control over its width. Other than that, I had no luck.

Lucky I stumbled upon this page: http://www.quirksmode.org/dom/inputfile.html. This has a very clever techique, that actually styles an input element of type=”text” and an image, makes the original input type=”file” invisible, and places it over the fake input, to give the impression of a styled file uploader. A very sexy hack indeed!

20
Apr

Creating & Using Classes in Javascript

By Ahsan 0 Comments
Categories: Class, Javascript and Object Oriented

Well, many of us know that javascript is an object-oriented language, but actually using it can be quite tricky. What was interesting was the way you define classes in JS. For example if we want to define a class called “student” with name, id and major as variables, and getName(), getId(), and getMajor() as methods of the student object, this is what we need to do:


//contructor for our student class
function Student(name, id, major)
{
this.name = name;
this.id = id;
this.major = major;
}
//methods for our Student class
Student.prototype.getName = function()
{
return this.name;
}
Student.prototype.getId = function()
{
return this.id;
}
Student.prototype.getMajor = function()
{
return this.major;
}

Now, if we want to use our javascript Student class, this is what we do:


var newStudent = new Student(”Ahsan”, “003052040″, “Computer Science”);
alert(newStudent.getName()+ ” ” + newStudent.getId() + ” ” + newStudent.getMajor());

This should print the student information.

27
Feb

Things To Look in JavaScript Libraries

By Ahsan 7 Comments
Categories: Javascript and Javascript Library

Nowadays, JS libraries are everywhere. The choices are so many that lot of us are left confused, not knowing which one to have, and which ones to ignore. After going through the same confusion, I came up with the following features that I look in a Javascript Library:

  1. It should simplify HTML traversing and DOM manipulation
  2. It should simplify handling of events preferably unobstructively
  3. It should simplify Ajax implementation
  4. It should simplify animation and visual effects
  5. It should have a small footprint i.e. its size should small
  6. It should be easy to integrate (or easy to make it communicate) with server-side logic.
  7. It should be easy to learn.

Any JavaScript library having the above features should be a good one. But having said that, I already can name a few with all the above features. But hey, nobody said it was going to be easy! ;)

19
Feb

The White Space Problem in DOM

By Ahsan 3 Comments
Categories: DOM, Javascript and Whitespace

There I was, after going through a few beginning DOM tutorials, I finally thought of getting my feet wet. So I wrote myself a simple HTML:

<html>
<head>
<title>My DOM Title</title>
</head>
<body>
<h1>My DOM Heading</h1>
<p>DOM is so easy!</p>
</body>
</html>

And added the following JS to the onload event of the body:

onload=”var obj = document.documentElement.firstChild.nextSibling.firstChild; alert(obj.innerHTML);”

The document.documentElement point to the root of the document, which is the <html> element. The firstChild of <html> is the <head> element. The <head> element’s nextSibling is the <body> element, and its firstChild is the <h1> element. So it should alert the innerHTML of the <h1> element i.e. “My DOM Heading”.

But to my surprise, the alert shows an undefined message. After doing abit of research on the issue, I was finally able to understand the problem: Whitespace. The browser considers the endline between elements as whitespace, and these whitespaces are parsed as DOM nodes. So when I referred to document.documentElement.firstChild, it actually pointed to the whitespace between the <html> and <head> element. Therefore, my JS actually pointed to the whitespace between the <head> and <title> elements. Funny isn’t it?

By the way, I only found this problem in Firefox. IE seemed to be working fine.