Archive for the ‘Website Design’ Category

Creating a list rotator using about 10 lines of mootools code :)

Well recently i had to design a list rotator and use mootools to create the effect. Did some thinking and got a simple logic to do so . Remove the first element, get the list and append the data of the first element to the list. Well so it rotates and the effect looks cool. [...]

Right click menu, awesomeness

If you have not seen this effect in action, i recommend you to visit akismet.com and right click on their logo, else here is a Demo that i made. I’ve got to say seeing this in the akismet site was quite inspiring. Well, isn’t it a cool effect and I have got to say they [...]

Don’t focus on me, Dim others. Cool effect via CSS3 or jQuery

In this effect, instead of the element in focus having some changes, rest of the elements go DIM or have a decreased opacity so that the elements outstands. Here is a Demo and a basic code for the effect can be found below The HTML <div id="navigation"> <ul> <li><a href="http://blog.avinash.com.np">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a [...]

Nifty navigation effect using jQuery and CSS

Designing navigation is one of the most important part of the web development cycle. It becomes more important because each site requires its own type of navigation and not to forget, people do like to see something different in their website. Here’s an example of the navigation in action To start with, the only tricky [...]

CSS Sprites – What? Why? and How?

I had this article on the pipeline for quite too long and right when i was in the middle of it, i found the best article (http://css-tricks.com/css-sprites/)that says exactly what i wanted to, but in a much better way. So, why waste energy writing an article that has already been :). Other awesome articles regarding [...]

The Previous page, Next page dilemma

I don’t know why i never thought of this but recently, i just landed to a random page of a blog. Now, i wanted to see some older posts but there were two links “Next Page” and “Previous Page” . Frankly speaking this is a little too confusing because in one way, i had to [...]

adieu Internet Explorer 6 (IE6)

Recently i had the time to check on the Browser Statistics for all the visits in my site. It was a sweet surprise to see that exactly 1 visitor used Internet Explorer 6 (Grow up man!!). I think finally the time has come to ditch the support for IE6 and move on to better codes [...]

Bye Bye Analytics, Hello! Piwik !!!

It just happened! I was browsing through the gnome.org website and reading about the tshirt design contest that they are going to host and then came the thought. gnome.org uses google analytics or not ???. Did a bit of digging and then found piwik to what I call is the diamond (as i had done [...]

Lavalamp effect using jQuery

Before i start on how to get the effect, here is the final outcome . Lava Lamp effect The most important concept for this effect is the absolute positioning and the morphing of the element. The HTML <div id="navigation"> <ul> <li id="selected"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Details</a></li> <li><a href="#">Feedback</a></li> </ul> <div id="blob"></div> </div> [...]

Setup Ruby on rails on ubuntu 10.04

Pretty easy, sequence of commands and we’re done First, update all repositories sudo apt-get update Installing the default ruby stack apt-get install irb ruby rdoc libopenssl-ruby ruby-dev Download rubygems from http://rubyforge.org/frs/?group_id=126 then install as below tar xzvf rubygems-1.3.7.tgz cd rubygems-1.3.7 sudo ruby setup.rb have gem point to the 1.8 binary sudo update-alternatives –install /usr/bin/gem gem [...]