0 comments 2010-04-09

CSS and Javascript have revolutionized web development scene and now websites are better looking, more interactive and highly dynamic... all thanks to these two. Out of their many awesome uses, one of the feature which is used in quite a few websites these days is to give user the ability to change look and feel of website. Many user like to use this facility to change font size, colors and page layouts as per their comfort so this post will show how to attract more such users.
To do this we have to create additional CSS, mark it as alternate stylesheet and write javascript code to switch to this stylesheet when corresponding link is clicked by user on this page. Sound too much to do? Then look at the Demo and read on for step wise procedure for more details.

First step is to create two CSS files, one default and another alternate. In alternate CSS file put those styles which you want to apply when user clicks on the link.

Second step is to include these files on your page and specify which one is preferred and which one is alternate stylesheet. here is how it would look like:

<link href="default_black.css" media="all" rel="stylesheet" title="black" type="text/css"></link>
<link href="white.css" media="all" rel="alternate stylesheet" title="white" type="text/css"></link>

Note the "rel" attribute of link tag, this specifies which one is alternate CSS. In this case "default_black.css" is default(which means first time page will be loaded with this CSS) and "white.css" is alternate. The title attribute is used to identify which CSS needs to be enabled and which one should be disabled.

Third step is to get styleSwitcher.js and styleswitcher-load.js and include it in your page.
<script type="text/javascript" src="styleswitcher.js"></script>
<script type="text/javascript" src="styleswitcher-load.js"></script>

Fourth step is to create links on your page which will call "setActiveStyleSheet" method with title as argument. Javascript code with then fetch the CSS file with title given by you and enable that CSS after disabling all other preferred CSS. Here is how link should look like:
<a href="#" onclick="setActiveStyleSheet('black'); return false;">Black</a>
<a href="#" onclick="setActiveStyleSheet('white'); return false;">White</a>
Please note 'black' & 'white' are values of title attributes in link tags of CSS files.

Thats it, you are ready to go!
I am using this on my personal website to try it out, so you can have another illustration if you want.

More about styleSwitcher.js and styleswitcher-load.js
styleSwitcher.js has functions to get and set required CSS file and while doing that, it also puts a cookie having title of current stylesheet.
styleswitcher-load.js has function which is executed at onload to check which stylesheet should be loaded ont he basis of cookie which was set by styleSwitcher.js. Another function set a cookie whenever page is unloaded so that next time when page is loaded it gets correct CSS title.

1 comments 2010-03-20

Recently I was reading books about Object Oriented design and analysis to refresh my designing skills. While doing that I came across few interesting design principles, I hope these will be helpful to new developers/designers
  1. Identify the aspects of your application that vary and separate them from whats stays the same.
  2. Program to an Interface, not an implementation.
  3. Favor composition over inheritance.
  4. Strive for loosely coupled designs between objects that interact.
  5. Classes should be open for extension, but closed for modification.
  6. Depend on abstractions. Do not depend on concrete class.
  7. Talk only to your Immediate friends - Principle of least knowledge.

0 comments 2010-03-04

These days many websites prefer to have fixed width body which is horizontally centered, and if you also want to create website like that, you would probably use "margin:auto;" style in your main container div inside body. This will work fine in most of the CSS2 and CSS3 compliant browsers(Firefox, Chrome) but in IE this page would not be centered!
Click here to see the Demo in IE.
You might be thinking "WTF is wrong with IE??".
Well there are many things which are wrong with IE, and this is just one of those.
Here is a workaround to fix this issue, use "text-align:center;" in BODY to align 'block' elements like "DIV". YUI also does the same in their reset css.
Click here to see the Demo with IE fix.
By now you must have noticed that we have to fix side effect of text-align when we use this approach, if you haven't noticed that in Demo, then again have a look at it.

0 comments 2010-02-12

As a web application developer, I tend to use XSLs very frequently, so I used the following technique to test my XSLs without spending money in buying professional XML/XSL editors like Oxygen. This trick will quickly allow you to test your XSL using XALAN's command line utility:

  1. Copy XML, XSL and XSLT processor jar in one folder. I am using XALAN(Download it from here) with jre 1.6(which should be installed on your machine). If you want to run this in many folders, you should put xalan.jar in one central location and add it to your CLASSPATH
  2. Run the following command in that directory 
  3. C:\test > java -cp c:\xalan.jar org.apache.xalan.xslt.Process -IN input.xml -XSL transformer.xsl -OUT output.xml
  4. output.xml is ready

To learn more about this command line utility, visit http://xml.apache.org/xalan-j/commandline.html and start saving money and time.

1 comments 2010-02-04

I owe you many laughs Mr Geatbong (aka. Arnab), but there is no price of happiness so can't pay you back in hard cash ;). Nevertheless many congratulations from my side for your book.

Now coming to the point why I have written this post, Greatbong is writing a book and he need publicity, so he has organized a contest in which I am participating and doing publicity of his book. Here are the rules:

The rules.
1. On your blog, provide a link to this page. (http://greatbong.net/book). Embedding the above picture in your blog would be nice but not needed.
2. Then write down your top 10 Hindi movie lines or top 10 English movie lines (You can do both if you want. Only one set is required for the contest). If you cannot think of top 10, make it top 5. Cannot think of even 5? Make it top 3. No problem. Only restriction: no two lines from same movie. This done to make it fair for other movies so that they dont get swamped by Gunda or Loha or Sholay.
3. Tag five friends to do the same.
4. Come over to the comment-space of this post and post your blog’s link so I can go and read it.
Remember: Before starting the tag, paste points 1 and 4 on your blog so that the rules are available to anyone who wishes to pick the tag up from your blog.
Here are some tags:

Now all the formalities are done, and here comes my favorite dialogs, in no specific order...

  1.  Naam hai mera Bulla, aur rakhta hoon mein hamesha Khullaaaa [Bashir Babbar ki jai ho!!]
  2. Teja mein hun, kyunki mera naam bhi teja hai. [Most logical dialog in any Hindi movie]
  3. Yeh to sirf hamare pipe ka kamaal tha, shukar hai tumne hamare rumaal ko haath nahi lagaaya, nahi to wahin dher ho jaate.[Very hard to choose just 1 dialog from 'Tiranga']
  4. Kisi desh ki unnati ki pehchan agar kisi cheez se hoti hai toh woh hai gutter. Woh gutter ke liye jiye. Aur gutter ke liye mare. Marte hue unke aakhri shabd the, GUTTER. [Well said Mr D'Mello from Jaane Bhi Do Yaaron]
  5. Rightey haand sey khaatey ho na tum log bread aur butter ?? [You have to watch Haasil to understand why everyone in our college remember those dialogs]
  6. Itni jaldi kya hai, thoda aaram aaram se peena chahiye, woh kehte hain na "Hold the Drink!" [I always remember this, especially after Khosla ka Ghosla].
  7. Dushmano ki lashon par bhangra karne waala kabhi langda nahi hota. [Don't remember this epic's name]
  8. Prem naam hai mera. Prem Chopra [Har shabd se kameenapan tapakta hai]
  9. Aur jab yeh Dhai kilo ka haath kisi par padhta hain na, to aadmi uthta nahi, uuth jata hain [One and only Sunny Paaji in Damini]
  10. Doodh, doodh, doodh. Mein mathura ka rehne waala hoon, isliye mein sirf doodh peeta hoon. [Vinod khanna in Farishtey]
  1. Nice Guy Eddie: C'mon, throw in a buck!
    Mr. Pink: Uh-uh, I don't tip.
    Nice Guy Eddie: You don't tip?
    Mr. Pink: Nah, I don't believe in it. [Mr Pink, I also don't believe in it :), from Reservoir dogs]
  2. Stan: Oh my God, you killed Kenny! Kyle: You bastard! [Vulgarity at its best, South Park: Bigger Longer & Uncut]
  3. Tuco: I like big fat men like you. When they fall they make more noise. And sometimes they don't get up. [One of mane memorable dialogs from The Good, The Bad and The Ugly]
  4. Rory Breaker: If you hold back anything, I'll kill ya. If you bend the truth or I think you're bending the truth, I'll kill ya. If you forget anything, I'll kill ya. In fact, you're gonna have to work very hard to stay alive, Nick. Now, do you understand everything I've said? 'Cause if you don't, I'll kill ya. [Best dialog to scare the shit out of your opponent, from Lock, Stock and Two Smoking Barrels]
  5. Jules: Say 'what' again. Say 'what' again, I dare you, I double dare you motherfucker, say what one more Goddamn time! [No one can say this better than Samuel Jackson, from Pulp Fiction]
  6. Gus: He got off before he got offed. [very witty dialog at crime scene, from Basic Instinct]
  7. President Merkin Muffley: Gentlemen, you can't fight in here! This is the War Room. [That's why Dr. Strangelove is the best black comedy]
  8. Harry Callahan: I know what you're thinking. "Did he fire six shots or only five?" Well, to tell you the truth, in all this excitement I kind of lost track myself. But being as this is a .44 Magnum, the most powerful handgun in the world, and would blow your head clean off, you've got to ask yourself one question: Do I feel lucky? Well, do ya, punk? [I always speak same dialog whenever I hold even a toy gun, just like Dirty Harry]
  9. The greatest trick the Devil ever pulled was convincing the world he didn't exist.[I agree. From Usual suspects]
  10. Sol: You ain't from this planet are you, Vincent? Who is gonna mug two black fellas, holding pistols, sat in a car that is worth less than your shirt?  [No one in Snatch looked like a sane man from planet earth]

0 comments 2010-01-17

I am using Eclipse since few years and always liked their basic settings of font and appearance, but few days back when I was debugging a large source code file, I had to scroll up and down a lot even though those code sections were just 30-40 lines apart. So I thought of changing font size to see more code in my small laptop screen and debug it fast, but to my surprise when I went to change font size in preferences section, I was confused with so many options shown to me. I can understand by giving these many options they are allowing users to customize every part of IDE but it could have been lot simpler. Anyways, I wasted lot of time to figure it out so, I am putting my findings here to help other poor souls like me.

  1. In Eclipse, go to Window > Preferences > General > Appearances > Colors and Fonts
  2. Don't panic if you see lot of options, go to 'Basic' node and select 'Text Font'.
  3. Click 'Change' button and change the font size as per your requirement.
Doesn't it look so easy when you read this article? It is, but for new users this is not at all intuitive.
Anyways, Happy coding!

0 comments 2010-01-14

Not only Munna Bhai, I also saw Bapu's bhoot :)

Shot @ Nandi Hills, Karnataka, India