Posts Tagged ‘ Tips & Tricks ’

How To Enable Writing to Status Bar (window.status) in Firefox

Monday, April 6th, 2009 By Nikhil

Another old school memory supplemental…

Why do we to enable windos.status?
Javascripts could to be a nightmare when you have something to debug .  Firefox does have a few handy addons, like Firebug thats makes our lives easy  and   Also , the vote for the  most popular debug  technique in Javascript must go to “ALERT()” .  Anywaz! There are few instances when adding ALERT do debug your mis-behaving Javascript  is just isn’t a good idea. For example! you have dragble item whose position  needs to be alerted …. NO NO! Dont do it! … you will  just get  infinite alerts  or you wont be able actually drap your dragable. Well! There are more good situations, where you might writing out debug texts to the status bar, much more usful… Believe me! Its Experience!

IE by default left you write to the browser STATUS Bar  using the syntax “window.status = ‘ something to debug’ “, but FireFox doesn’t  . So to enable windows status change , you can do either of the following.

Open about:config in browser ( type “about:config this into the address bar )  and search for
.  Change it to false… just click on the entry to toggle its state.

OR Alternatively

Tools → Options → Content → Enable JavaScript / Advanced → Change status bar text

And also note that … to write to the status bar in your Javascript, IE is just ok if you use a short syntax i.e. status =’ some debug text’ but in FireFox, you have to use in full syntax i.e.  window.status = ‘ something to debug’

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

A Good UI Design must be standards compliant. or should it? My TOP 10 UI Design Rules

Thursday, March 12th, 2009 By Nikhil

Neither I am very new to User Interface(UI) development nor  am I  a veteran and as I always put it, I fit into the profile of UI developer more than that of a designer, with no regrets. Oh Well! What was I writing about? … For a while( must be in years not any less) now , every now and then when I do get into a bit of UI Design ( when the professional designer has gone on a holiday), I  always cant stop thinking  whether my design should be properly complient or not (sincerely,  not that I could achive 100% standards compliance, If I wanted too ).  Then I tell myself,  what crap! …  The design should be simple, nice  and primarily seem usable ,  it should not make visitors run away… or bounce ( to be technical).  What good would  a nice tableless CSS layout be  to the visitor, who is oblivious to all the smart HYPERTEXT and Cascading Style Sheet  under the skin of your webpage…  Zilch!
It should look nice and be easy to use …  then comes the all standards stuff.

I stumbbled accross this blog entry by  Jason Fried of 37 Signals (For those who are not aware 37 signals  are  the onces who have created some awesome web apps like Basecamp, Campfire etc)  who wrote something similar in 2004 and believe me, almost 5 years and  not much changed since that …  I was happy to read his post , as I totally agree with what he has to say and the also the fact , her is not sure about what is telling about its just his gut feeling and so is mine :)

Jason Fried  : “There’s way too much talk about CSS and XHTML and Standards and Accessibility and not enough talk about people. CSS and Standards Compliant Code are just tools — you have to know what to build with these tools. Great, I’m glad your UI doesn’t use tables. So what? Who cares if it still doesn’t let people achieve their goals. Web standards are great, but people’s own standards include getting things done (and that’s still too hard to do online).

UI designers are making the same old fundamental “forgetting about the human being on the other side” mistakes — except this time their code looks better. Humans — not code validators — use interfaces.”

Checkout Jason Fried’s full article

DISCALIMER :  This doesnt mean that we shouldn’t bother about standards at all.  Standards are good to have and stick to them as much as possible .  We only have to understand that Good UI design doesnt always mean 100% Standards Complience or Vice-Versa ….

From my list of my lessons learnt,  I follow a few UI Design and Development Golden Rules …  Heres the TOP 10 … not that you have follow them too …  :)

1. Take care of your users. The users can make or break your site. DONOT make user look like an total idoit , utterly incapable of using your website. That is BAD!

2. Keep Simplicity and Ease of  Use your primary guidlines. Too many  things  on the screen, the higher the probability that a user will get confused or distracted from their original task.

3.  Be in the LIMITS … DONOT indulge too much into USABILITY,  ACCESSIBILITY and STANDARDs.  Use standards effectively and make them understood to the team . This will ensure right consistency in the product

4. Prototype the requirement. Since , these days the Use Interfaces are RICH , Prototyping always is better  than  just making simple wireframes and the latter is void of decent interactions, it would fail to provide the client a clear picture of the final product that is being developed. Always, It is easier to convert the prototypes into final deliverables. Also! with prototyping any interaction issues could be ironed out earlier in the development cycle.

5. Consistency in your design and interaction is very Important. Donot confuse your user with unpredictable interactions and gizmos.

6. Understand your “Design Mission Statement” .  Aways focus on the primary action of the page beign designed. Also, make a list of  your seconday actions on the page, and prioritise them.

7. Provide proper feedback to the site users.   With most of the websites designed around AJAX , provide visual cues to the user about changes to page . The user has to given an acknowledgement of the completion of  any task he performs.  Donot make the user wait and guess, for eg. provide progress indicators for file uplaods.

8. Use controls  appropriately. For e.g  Use  Select drop down list  for small lists only , donot let the user choose one of 200 cities using select boxes.  Understand the difference between a button and a link. A link and button have different purposes , donot use one for the other . Provide the right control  to make interacting with a page easier.  Avoid using Menus, that are more that two levels deep. Do not reinvent the wheel. Use standard controls, customise them only if very necessary. Define any custom controls required for your site  first hand, so that they could be created and tested independently, ready for use accross site.

9. Donot  ITERATE too much on the design. Remember! The whole  product consists more that design alone.  Build appropriate timelines  into your project schedule for design iterations and stick to it.  Iteration helps us to find out what works and what doesnt , pick out the trouble spots.  As a good interface takes time,  provide time for iterations  in the begining of the development cycle,  so that  design iterations doesnot directly equate to REWORK.  Too much rework could jeopradize deadlines.

10. Sit back and think like a user sometimes.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Calling Multiple Windows Onload Functions In Javascript

Saturday, March 7th, 2009 By Nikhil

Heres another little peice of Javascript trickery that I had to dig around because the situation commaned it. In one of my web sites, I had this situation where I had to implement “windows.onload” twice. The first thing that would came to an inexperienced mind like mine ( I have to honestly say that, since I have been using javascript Frameworks and libraries, I have forgotton to do simple things on my own… sad but true), is the following method…


Sorry to say but, this wont work… dont want to discuss the execution science of Javascript much … but according to my recent experience, only the last function (onloadfn3) will ill actually get executed.

In normal situations, unlike mine (which I’ll talk about a little later)… you could do one of the following to execute mutliple onload functions ….

OR something like this

function doOnLoad() {
window.onload = doOnLoad;

For my current situation , I cannot use either of the above…
Why did I need to call windows.onload twice, rather that calling two functions within a single onload function? Here is quick look at my problem statement…

“My Site pages are structured like the WORDPRESS theme…. i.e. there is a common Header.php and Footer.php that gets included into all the site pages. There is an onload function implementaion in the Footer.php to do some common onload functions. AND there are few pages that need to something of their own ONLOAD , apart from those done by the common onload function. If I assign callback function directly to the window.onload handler, it will over-ride previously assigned callbacks in the Footer.php”

…. Is my problem understood :) ?

Well! there are few solutions that I did find. They all are very similar and mainly implementions of a solution given by Simon Willison (…

Solution :

Simply add this javascript code to site …

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
       window.onload = func
    } else {
       window.onload = function() {
           if (oldonload) {

And call it instead of the usual “windows.onload”

addLoadEvent(function() {
/* more code to run on page load *

Advantages of this code snippet …
1. Primarily, It lets you have multiple windows.onload events, called from seperate parts of your code, without overridding the previous definition
2. It is really unobtrusive. It can be placed in a file with your other scripts or in a separate file.
3. It works even if window.onload has already been set.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

How to include PHP code inside a Smarty Template

Tuesday, February 24th, 2009 By Nikhil

I thought this one will be a doodle to find in google, as many you us UI and script writers would need to do this on a day to day basis, that is include a bit of peice of PHP code snippet(.php) into a Smarty Template (.tpl).  I realized that easier/popular  your query, even more difficult to find the exact answer…   a million search results but most of them reffered to “file” includes in Smarty … which has the following syntax

    {include file=”include/header.php”}

This actually inlcuded the file fine but as text , What I wanted was the result of  included file .(Note the above is used include template inside a template file). Finally with a bit persiverance …. I stumbled across a slighty modified syntax, which was the answer to my requirement … so here it is… if you havn’t found  one already

{include_php file=”include/header.php” }

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Adding DropShadow To Images Using CSS

Wednesday, February 18th, 2009 By Nikhil

Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!

In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”‘s ) about Using CSS Clip Property for show off only

Original Image


CSS DropShadow Results
View Demo  | Download sourcefiles

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Understandng The CSS Clip Property

Tuesday, February 17th, 2009 By Nikhil

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component :) )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. :). You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

original_image  clip_demo
Original Thumbnal/Image Clip Requirements for Sqaure Thumbmail


CSS Clip Results


View Demo  |  Download sourcefiles

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

How to include a WordPress Blog in another site

Monday, February 2nd, 2009 By Nikhil

This question crossed my mind a few times before, when I was working on sites earlier too, which used WordPress to show blogs or new kind of content in some part of the site/portal.Being a novice in PHP and around WordPress, I kept procastinating it, thinking ” this isnt my peice of cake”. Finally! this requirement came upto my nose, when started diggin around a bit for solution.
I was surprised to find that it really was easier than I actually thought it was, to display a list of headlines or the latest post on any other page outside of the WordPress-powered section, just using a little bit of PHP and the WordPress API.

Here is what to do :-
For reasons of explanation, assume that your site is and you have the news section for this site on ( which is running WordPress). Now the requirement is to show the latest post from on the home page of the main site ,i.e.

Step1: In your index.php add the following peice of code , Include the WordPress API file. You can add this to the top of the page you want your post to appear on.

define(‘WP_USE_THEMES’, false); // Disbable use of WordPress Theme
require (‘/var/’); // Include WordPress API
query_posts(‘showposts=1′); // Get Latest Post

In the above peice of include , we are getting only the single most recent post. if you want to try more variations feel free to dig into, query_posts() documentation .

Step 2: Now, In the part of the Index/Home page where you want to show the latest WordPress post from , use the following code. Needless to say, feel free to ad your styling divisions, spans and classes as per your design needs.

Step3 : There is no Step 3 … Thats it … you are done!

OfCourse, You can try a few variations as per your requirements ( as I mentioned earlier, refer to query_posts() documentation ) . Heres some taster …

How show a specific post/page as opposed to the latest post:-
This can easily achived by altering the arguments to query_posts() to include the page ID or page slug


or You can control the number of posts:

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Loading JavaScripts Dynamically

Thursday, December 25th, 2008 By Nikhil

Sometimes to keep the pageweight down … we have split our scripts into fragments…These javascript fragments can be loaded as and when required ( on an event or on click of a  link or button etc.).

Loading Javascripts dynamically is simple and pretty straight forward  as below… 

<script type=“text/javascript”>
function loadNewScript(source){
  var s = document.createElement(‘script’);
  s.setAttribute(‘src’, source);

and you can have the following call link anywhere in the body , or you can have this script “onLoad” of the document itself…

<a href=“javascript:loadNewScript(‘myDynamicScript.js’);”>Load Dynamic Script</a>


<body onload=”loadNewScript(‘myDynamicScript.js’);”>

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Mis-behaving IE8 : CSS Layout breakages (Targeting a browser version using Meta Tags in IE8)

Wednesday, December 17th, 2008 By Nikhil

If you are css person, you would know the pain in getting your layouts working cross-browser. IE8 is yet another spanner in the works for us developers. Anywaz! if you hit upon this issue, Like I did yesterday, where your perfectly working CSS in IE7 (and earlier) and  Firefox  has suddenly started throwing tantrums in IE8 , TRY This … It nicely seemed to fix my problems for the moment ….

Using Meta declaration, we can specify the rendering engine we would like IE8 to use. So to force IE8 to render as IE7 … Insert the following Meta Tag into the head of your document:-

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

By default IE Meta would be:-

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
which would make IE8 render the page using the new standards mode.

If required, this syntax could be used to accomodate for other browsers as below:

<meta http-equiv=”X-UA-Compatible” content=”IE=8;FF=3;OtherUA=4″ />


IF you are yet unfamiliar with the sort of animal called “Doctype” … here is some quick read
Setting the DOCTYPE in XSL

For a more in depth understanding about DOCTYPES , try visiting these links…
A List Apart : Fix Your Site With the Right DOCTYPE!
A List Apart : Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Note: Though many of us HTML/CSS people have been neglecting the importance of DOCTYPE decleration in our documents , Setting the right DOCTYPE , is usually the answer to most cross browser issues.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

What are CSS Resets?

Tuesday, March 11th, 2008 By Nikhil

A CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.

We all  have been the through the nightmares of writing cross-browser CSS’s.  So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies.  CSS Resets , are simple few lines of CSS that you begin your CSS with , giving you a clean base  to start building your  upon.

The CSS resets that I normally tend to use looks like this

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
html {font-size: 76%;}
table {
fieldset, img {

ol, ul {

h1, h2, h3, h4, h5, h6 {

Reset the browser font size

Also note the reset that has been applied to browser font size in the following line …

html {font-size: 76%;}

The above CSS resets the browser font size to 10 pixels, and this makes it possible to work with relative font sizes (which is every important from a WAI compliance prespective)
For e.g., in the following definition, font-size in a span is set to 10 pixels and that in the paragarph is set to 14 pixels…

span {font-size: 1em;}
p {font-size: 1.4em;}

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter