Laith Zraikat: Web Development

CSS Series #1: Simple navigation menu with rollover effects

Mon, 29 May 2006 23:47:00 GMT

I have decided to start writing a series of articles on CSS because of the many questions I get from friends and fellow developers seeking answers to specific questions like this one.

Creating rich menus has always been a major issue for most web developers. I remember when I first started doing web design back in 97, my jaw used to drop each time I saw a sliding menu or one with rollover effects. Back then if you wanted a really rich menu, you had to use Java palettes, which was rocket science to most designers.

Fortunately today, a wide array of rich interface elements are possible using only CSS and a little JavaScript which can be learned in minutes.

A common question people ask is: How do I create a tabbed menu with rollover effects?

The approach I like most is one that employs CSS, very little JavaScript, and of course HTML. I will start by explaining the HTML components of our menu and then move on to the CSS part.

The magical HTML List:

Almost every designer uses the ordered list <ol>, or the un-ordered list <ul> at least a few times in every project. Most people think they should use it only when they want to create numbered lists or bullet lists. Well, that was true back in the days when the Yahoo homepage had a gray background and Amazon.com had the jungle theme.

Today, it is very important to know what kind of markup you need to use and why. You will come across a variety of ways to achieving he same result and it will be up to you to decide which is best for your case. Having said that, I think there is one rule of thumb that should apply to all cases: Always use semantic markup.

Semantic means "descriptive", hence "descriptive markup". To demonstrate, take the following site menu. The first example does not use any semantic markup:

HTML:

Site Menu
<blockquote>
<a href="/">Home</a><br/>
<a href="/">Overview</a><br/>
<a href="/">Services</a><br/>
<a href="/">Contact</a>
</blockquote>

Notice how the list effect is achieved by using <blockquote> and <br>, which were not made specifically for formatting a list of items. Anybody can use these two tags to display a whole lot of things, none of which are item lists.

The second example shows semantic markup that represents the site menu:

HTML:

Site Menu
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/">Overview</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>

If we use the first method, only a human will be able to figure out that this code represents a hierarchal list of items. Another down side is that the list may be rendered differently on different platforms, so your list or menu in this case may not be comprehensible on a mobile phone for example.

Another advantage of using the html list is that you can represent a hierarchy of items in the form of nested lists very easily by starting a new list inside any of the main list items. If you wanted to have sub-lists using the first method, you will make a big mess out of your html, and it will just look stupid.

Arrange it horizontally:

CSS:

/*Setting the display for the list items to inline will arrange them horizontally*/
#menu li{
display: inline;
}

Note: You notice that I use #menu as a prefix for all my styles. This is because my main menu ID is "menu". This causes my styles to only affect the html elements inside "expenses". You don't have to use a prefix unless you have more than one menu and you want to have different styles and behavior for each. However, I always like using it as a standard. You can, however, substitute "#menu" with "ul" in your css and it will work just fine.

Note: I used "/**/" in the first css example above. Anything you write between "/*" and "*/" is considered a comment and will not affect your css. It's just to remind you and let other designers know what this style is for.

Give it some style:

We need to apply some styles to our menu to make it look nicer.

CSS:

/*Sets the style for the main menu*/
#menu {
margin: 0px
margin-top: 15px;
padding: 0px;
width: 500px;
}

#menu li {
display: inline;
margin: 0px;
}

#menu li a {
padding: 6px;
border-bottom: 0px;
background-color: #9c0;
text-decoration: none;
color: #fff;
border: 1px solid #666;
}

Note: Those of you accustomed to setting colors in your web page by manually inserting its hex code may find it strange that I used only 3 digits instead of the usual 6 for my colors. Abbreviation is possible when the two digits for each of the basic colors (red,green,blue) are the same, by representing every color with one digit. For example: #99cc00 can be referred to as #9c0, #ff9900 --> #f90, #ffffff --> #fff…..etc. This form is supported in both IE and FF.

Roll it over:

Imagine you could talk to the browser, and tell it to create a rollover effect. You would say: "when the user puts the mouse pointer over the link, please change its background color to white and text color to grey". Here's how we say it in CSS:

#menu li a:hover {
background-color: #fff;
color: #666;
}

Note: "hover" is called a Selector. A selector is the condition which is matched, will trigger the changes specified in the style class to the element which it is related to- in this case the <a> tag in our menu.

Tab it:

You may want to create a tab effect by presetting one of the links to be selected when displayed on a certain page…"Services" for example. You can do that by defining a new css class, for example "selected", and then assigning it to the link you wish to display as selected:

CSS:

#menu li a:hover, #menu selected {
background-color: #fff;
color: #666;
}

HTML:

<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/">Overview</a></li>
<li><a href="/" class="services">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>

And you have a menu:

Implementing Image rollover using CSS

Fri, 28 Apr 2006 17:12:00 GMT

Using Css makes your life easier when you want to make changes to your design and helps you think in an Object Oriented manner when designing.A friend of mine asked me to explain how to create a roll-over effect without having to use any JavaScript, so I wrote this for him an thought it's worth sharing.

This tip only works in FF. For IE you'll have to do just a little bit of JavaScript.

To use CSS only in FireFox:

CSS:

.Icon
{
background: url(http://laithz.jeeran.com/blogimages/bul3.gif);
}

div:hover.Icon
{
background: url(http://laithz.jeeran.com/blogimages/bul2.gif);
}

.Icon, div:hover.Icon
{
height: 102px;
width: 71px;
background: no-repeat;
cursor: pointer;
}

HTML:

<divclass="Icon"></div>

For IE, we have to use JavaScript in addition to CSS:

CSS:

.Icon
{
background: url(http://laithz.jeeran.com/blogimages/bul3.gif);
}

.IconOn
{
background: url(http://laithz.jeeran.com/blogimages/bul2.gif);
}

.IconOn, .Icon
{
height: 102px;
width: 71px;
background: no-repeat;
cursor: pointer;
}

JavaScript:

function SwitchStyleClass(Obj, NewClass)
{
Obj.className = NewClass;
}

HTML:

<divclass="Icon"onmouseover="SwitchStyleClass(this, 'IconOn');"onmouseout="SwitchStyleClass(this, 'Icon');"></div>

Enjoy!

Back to Nature

Wed, 05 Apr 2006 14:27:00 GMT

The beautiful thing about blogs is that without their CSS, they all look almost the same.

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

Jeeran Imports Blogger.com

Thu, 02 Mar 2006 22:10:00 GMT

I am so thrilled to announce that "Jeeran Blogs" is officially out of beta phase.
A lot of enhancements have been put in, including a prettier UI. The most significant feature in this update is the Blogger Importer. If you want to move from Blogger.com to Jeeran Blogs, you can now take all you posts and comments along. Nothing is left behind ?, and with no hassle at all. All you have to do is submit a request to our support team and they will do the rest.

Among the people who moved to Jeeran during the testing phase and who we want to thank are:

Sabri Hakim:
previously (sabrihakim.blogspot.com), now (http://www.sabrihakim.com/)
Talasim:
previously (zeidkoudsi.blogspot.com), moved in with (http://www.talasim.com/)
Proactivity Group:
previously(proactivitygroup.blogspot.com),now (proactivitygroup.jeeran.com)

Read more about our Blogger Importer.

Another major enhancement is the ability to further customize the look of your Blog. We have given you full control over your template's CSS code, which means that you can change almost any element in your Blog.

Thanks goes to the entire Jeeran team on a job well done; Developers, writers, designers, testers and most importantly our customer support for helping our members and keeping then happy ? And to our partners who continue to help and support us in our mission to change the world.

More amazing things to come from Jeeran, so stay tuned. This is just the beginning.

ASP.Net 2.0 "How to" Videos

Sat, 25 Feb 2006 15:00:00 GMT

Recently released video lessons on the common questions about the new features in ASP.Net 2.0. They will provide clear, easy, and straight to the point examples on how to perform some advanced functions. They are great for all levels, newbie to expert.

The topics covered:

Caching (2 parts)
Create a full-featured customer login protal
Data: create data driven web sites
Form Building
Localization
Master Pages and Site Navigation
Membership and Roles
Profiles and Themes
Web Parts and Personalization
Tips and Tricks: covers a wide range of techniques for enhancing ASP.Net web pages.

For a more detailed description and download links, read:
ASP.NET 2.0 How Do I Video Series is here -- a must see

Amazon Associate Books Rotator for your Blog using AJAJ

Sat, 18 Feb 2006 21:24:00 GMT

Last week I wanted to list some of the books that I've read and/or recommend. So I thought I'd also make some money while I'm at it. I created an Amazon reseller account and stared creating affiliate links.

Since Amazon does not have an automated way to generate code that will rotate several books, I decided to create one using JavaScript Asynchronous Callback and JSON.

This small solution consists of 2 files:
1. books.txt: contains the list if ISBN's for the books
2. books_json.js: JavaScript file that contains the code which will retrieve the list of ISBN's through xmlHTTPRequest, and then pick a random book and displays it.

This is how the code looks:

Book.txt:

{"Book":
[
{"Code": "0393058581"},
{"Code": "1590595009"},
{"Code": "1590593898"},
{"Code": "0385483821"},
{"Code": "0684855542"},
{"Code": "0375727205"}
]
}

Books_json.js:

// Settings you can modify
var affiliateID = "numbersixteen-20";// Your amazon associate ID
var Width = "120px"; // Box Width
var Height = "240px";// Box Height
var fcl = "000000";// Text Color
var lcl = "0000ff"; // Link Color
var bcl = "000000";// Frame (border) color
var bgl = "ffffff"; // Background color

//Ony modify if you know what youre doing
var dataURL = "/books.txt";

//Create the XMLHTTPRequest object
var requester;
try
{
requester = new XMLHttpRequest();
}
catch (error)
{
try
{
requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
requester = null;
}
}

// Open the XMLHTTPRequest, set the method to GET, give it the URL to fetch and set (Asynch = true) so the rest of the page can still download while the data is downloaded

requester.open("GET", dataURL, true);
requester.send(null);

// When the request is done, we call stateHandler which will perform the the needed actions IF we actualyl got a response.
requester.onreadystatechange = stateHandler;

function stateHandler()
{

// The XMLHttpRequest has finished requesting the data
if (requester.readyState == 4) {

// The data was receieved successfully
if (requester.status == 200)
{
// There no need ot do anything if no text was received.
if (requester.responseText != "")
{
// Get the JSON list of book ISBN's and compile it
var Books = eval( '(' + requester.responseText + ')' );
// Generate a random index from the Books Object
var whichBook=Math.floor(Math.random()*(Books.Book.length));
// Get the Book ISBN
var Book = Books.Book[whichBook].Code;
requester = null;
// Build the HTML code to place in the page
var amazonCode = "<iframe src='http://rcm.amazon.com/e/cm?t="+ affiliateID +"&o=1&p=8&l=as1&asins="+Book+"&fc1=" + fcl + "&IS2=1&lt1=_blank&lc1=" + lcl + "&bc1=" + bcl + "&bg1=" + bgl + "&f=ifr' style='width:"+Width+";height:"+Height+";' scrolling='no' marginwidth='0' marginheight='0' frameborder='0'></iframe>";
// Dump the HTML code on the page
document.getElementById('bookList').innerHTML = amazonCode;
}
}
else
{
requester = null;
}
}
return true;
}

Installation on your blog:
1. Upload the JavaScript and Data files into the root folder of your web site
2. Add the following in your HTML where you want the books to appear:

Download the source code and example:
books_json.zip

In case you want a version that uses XML, here it is:
books_xml.zip

AJAJ (Asynchronous JavaScript and JSON)

Fri, 10 Feb 2006 19:00:00 GMT

JSON (JavaScript Object Notation) is gaining wide appeal as an alternative to XML for transporting data objects between applications. In fact a JSON is closer than XML to transporting true data objects because it is more object oriented and can be mapped more easily to object oriented systems. Being a subset of JavaScript, JSON can be understood by any C-based programming language, and is almost language independent.

With XML you had to serialize the object on the server, send to the client, and then de-serialize on the client to get the object –that’s if you were using SOAP. Without using SOAP, you will have to write more code to parse the incoming XML. With JSON, all you have to do is send the text from the server, compile it on the client and you end up with an object.

Example:

Suppose we wanted to send a message from the server to the browser using asynchronous callback, we have the option of sending it as XML or JSON (and of course we can always use plain text)

XML:
<Messages><Msg><Type>1</Type><Text>Hello JSON!</Text></Msg></Messages>

JSON:
{"Msg": [{"Type": "1", "Text": "Hello JSON!"}]}

To parse the Data and display the message, you'll have to use a different approach for each:

XML: We have to parse the XML as text, and even then it remains text as we go through it.

Asynchronous callback code.....
.
.
var ResponseXML = myHTTPRequest.responseXML();
var Messages = ResponseXML.getElementsByTagName("MSG");
var MessageText;
var MsgType;
for(var i=0; i< Messages.length; i++) {
MsgType = Messages [i].getElementsByTagName("Type")[0].childNodes[0].nodeValue;
MessageText = Messages [i].getElementsByTagName("Text")[0].childNodes[0].nodeValue;
document.write(MsgType +','+ MessageText);
}

JSON: Simply run the text through the compiler. After that, you're dealing with an object not text.

Asynchronous callback code.....
.
.
var ResponseText = myHTTPRequest.responseText();
var Messages = eval( '(' + ResponseText + ')' );
var MessageText;
var MsgType;
for(var i=0; i< Messages.MSG.length; i++) {
MessageText = Messages.MSG[i].Text;
MsgType = Messages.MSG[i].Type;
document.write(MsgType +','+ MessageText);
}

Notice that the JSON form is shorter in terms of amount of text sent to the browser and simpler in terms of the code needed to extract the data. Using JSON in this manner also happens to be much faster because instead of parsing text –which we know is a very intensive process- in the case of XML, we are simply compiling it using the eval function which is extremely fast.

However, there are security issues associated with using JSON, namely, the risk of cross-site-scripting. If an attacker sends malicious code as JSON, this code will be activated once it is compiled on the client and can potentially be used to hijack a user's session for example.

What I like about JSON is its simplicity. You can transport an entire data table or even a dataset as text, and convert it into a true data object in one step. It is very promising and threatens to overthrow the X in AJAX.

AHAH! the proof!

Wed, 25 Jan 2006 21:19:00 GMT

A new acronym is picking up. I can't believe this is happening again, but its good this time, because this new acronym goes to prove that the first one was not solid.

I guess since there are AJAX specialists, then we'll expect to see AHAH specialists. But I doubt any of them will have the guts to say it in a conversation ... "I'm an AHAH! specialist" ... the other guy will go "What? what did I do?"

Are you a great Graphic, Web, and UI designer who wants to help change the world? We want you!

Mon, 16 Jan 2006 16:05:00 GMT

We are seeking to hire a web and graphic designer to take charge of Jeeran's creative department. The candidate is expected to possess the following qualities:
Leadership, self-learning, creativity, ambition, design vision.

For more details, view: Jeeran Careers section

Designers vs. Developers? I prefer Teams!

Mon, 09 Jan 2006 22:01:00 GMT

Jad Madi raised a topic that I'm sure all designers and developers think about regularly during their career: Who is better, developers or designers?

In my years of experience, I put on many hats: graphic/web design, development, architecture and analysis, management, even painted some walls while we were building our new offices. In each I felt that my work was not just very important, but essential to the success of the company. And that's the truth.

In a team, every member is an essential component that plays a unique role in pushing the ship toward its destination.

Having done both design and development, and now that I have to supervise our development team, I don't get to do as much hands-on development as I would like to, so I get to look at both fields from an unbiased point of view. I see them both as essential and in-separable, for two simple reasons:

A great application has to be developed by someone who has the great programming skill and can produce an error/bug free experience for the user. Someone who can "design" his application with performance, security, scalability, in mind and compose the code in a way which is comprehendible to other developers on the team.
This great application will be worth exactly "zero" if nobody can figure out how to use it, so it needs a very good designer who can "develop" an intuitive user experience. The user experience is the only single factor which can determine the success or failure of an application. If people can't use it, they won't buy it, and the company can’t pay the bills. Simple.

Now, can you imagine one without the other?

When it comes to producing software, both designers and developers have to be "designers and developers". Designing and producing high quality, bug free code is an art, and developing the user experience involves much more than just designing the interface.