Vertical CSS menu with dashes

I have been really very busy this month. Hardly had time to post anything on my blog. So thought I better post a short quick tutorial of a dashed vertical css menu.

Preview (it will look like this at the end)

(Link 1 is hovered in the image)

HTML (the ever popular unordered list!):

<div id="menu">
<h1>My menu</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Now you will require some css.

CSS code:

#menu {
font-family: Arial;
width: 150px;
padding: 0px;
margin: 0px;
}

#menu h1 {
display: block;
background-color:#666666;
font-size: 16px;
padding: 5px 0px 5px 5px;
border: 1px solid #000000;
color: #ffffff;
margin: 0px;
width:147px;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#menu ul li {
margin: 0px;
padding: 0px;
}

#menu ul li a {
font-size: 14px;
display: block;
border-bottom: 1px dashed #bbbbbb;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Tabbed navigation using jQuery

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

Requirements
You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<ul>
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>
</ul>

<br />

<div id="box-1">
Box 1 content here
</div>

<div id="box-2">
Box 2 here...
</div>

<div id="box-3">
Do you really need Box #3?
</div>
</div>

CSS - some floats for ul and li

.ui-tabs-hide {
display: none;
}

ul {
margin: 0px;
padding: 0px;
}

ul li {
float: left;
padding-right: 10px;
list-style: none;
}

br {
clear: both;
}

a {
font-weight: bold;
text-decoration: none;
}

jQuery
Add this code at the end of your webpage (right before the closing body tag)

<script type="text/javascript">
$(window).bind('load', function() {
$('#container-1 > ul').tabs();
});
</script>

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.

CSS form design without tables

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family: Arial, Verdana, sans-serif;
}

form p {
clear: both;
}

fieldset {
width: 350px;
border: 1px solid #ccc;
}

legend {
font-weight: bold;
font-size:1.2em;
}

label {
font-weight: bold;
width: 120px;
float: left;
}

input[type=text] {
width: 200px;
}

textarea {
width: 200px;
height: 100px;
}

input[type=submit], input[type=reset] {
font-size: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.

<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>

Switch CSS stylesheets using jQuery

CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.

This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.

Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage

<link rel="stylesheet" href="default.css" type="text/css">

The list of options available to your visitors
List your available stylesheets here (follow the format)

<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>

Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});

// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});

// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>

Change or set HTML tag attribute using jQuery

It is sometimes necessary to change the attributes of a particular HTML tag of your webpage using javascript, especially when you are coding rich web applications. Let it be the class of an element, or the href attribute of an anchor tag.

In this tutorial, I am going to show you how to do it utilising jQuery javascript library quickly.

HTML code (inside BODY tag)
First, we will place a sample image and a link in our webpage.

<a id="clickMe" href="#">Change the image below</a>
<br />
<img id="myimage" src="current_image_file.jpg" />

Now we want the src attribute to change from current_image_file.jpg to new_image_file.jpg (a click event will be required).

jQuery code (place this JavaScript inside HEAD tag)

<script type="text/javascript" src=".jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "new_image.gif"});
});
});
</script>

Rounded corner navigation bar without images using CSS and jQuery

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.

<script type="text/javascript">
$(document).ready(function() {
$("#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)

#nav {
width: auto;
}
#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#nav li {
background-color: #e9e9e9;
}
#nav li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #919191;
padding: 10px;
}
#nav li a:hover {
text-decoration: underline;
}
#nav .active {
text-decoration: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu

<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>

Generate favicon online and implement it in your webpage

What is a favicon?
A favicon is an icon associated to a website (or a particular section of a website) - also called as the website icon. There are a few options available to implement a favicon in your webpage, but the most traditional one is by placing a favicon.ico file.

- favicon establishes your brand
- it helps users identify your site from browser tabs
- also, helps visually identifying your site from bookmarks

Generate favicon.ico files online
favicon.cc is a great tool (favicon generator) for creating customized favicons quickly.

Some cool features by favicon.cc:
draw your favicon in MS Paint like interface (colour picker available)
upload images directly (for converting image files into .ico file)
animations (animate your favicon)
share your icon with others

How to implement it in your webpage?
Just add this code in the HEAD tag of your webpage:

<link rel="shortcut icon" href="http://yoursite.com/favicon.ico">

Placing text over image using CSS position property

There are a few techniques available to perform this task using css. But I am going to show you the most effective one in this tutorial - this involves css position property.

I will be using this image (a cow) in this tutorial.

In our html code, there needs to be three div elements
1. container (for both image and text)
2. image (the cow)
3. text (Moooooo...)

Here is the code

<html>
<head>
<title>frinity.blogspot.com</title>
</head>
<body>
<div id="container">
<div><img src="cow.jpg" /></div>
<div style="position: absolute; left: 20px; top: 160px;">
<span style="font-weight: bold; color: #fff;">Moooooo...</span>
</div>
</div>
</body>
</html>

Its the CSS positioning that makes it happen.

Output (screenshot):

Toggle div element using jQuery

What is Toggling?
Basically a show/hide feature for your webpage elements. For example, you may have a login box in your webpage, and you want your visitors to click on a button for showing or hiding the element.

This tutorial will show you how to implement a simple toggle effect in your webpage using jQuery.

As always, we will require some HTML content first

<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>

jQuery code
This is the code that makes the 'textBox' element toggle

$("#textBox").toggle();

But we want to toggle the element only when you click on 'Toggle my text' link. And this code will make it happen:

$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});

Final Code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
</html>

Change div content with jQuery

This is a quick tutorial for understanding the basics of jQuery.

Create a new HTML file with this code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// javascript here (jQuery)
</script>
</head>
<body>
<--- HTML content here -->
</body>
</html>

Right now, the page will just load the jQuery library.

Lets get some HTML content first

<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>

jQuery code
Now we will add some javascript so that the content of 'textBox' element changes to something else once you click on 'Change my text' link.

$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});

As soon as your page is loaded in your browser, a function is declared so that whenever you click on the link (with 'changeText' id), the content of the 'textBox' element will be changed to 'My text is changed!'.

Final output:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});
</script>
</head>
<body>
<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>
</body>
</html>

Three column CSS layout with blueprint framework

In one of my previous articles, I mentioned about Blueprint CSS framework. Now I am going to show you how to use it for designing your web layouts. I am using Blueprint 0.6 for this tutorial.

Before we begin, I need to tell you about its grid. Blueprint's default width for all layout is set to 950px consisting of 24 columns (width units). These columns can be controlled directly by your HTML code (divs with class attributes). You will not be required to touch your CSS files for that.

Layout (three column)
In this tutorial, we will follow a three-column layout with a header and a footer.

Directory structure for your files

Create a new HTML document with this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">

<title>frinity.blogspot.com</title>

<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">

</head>
<body>

<div class="container">

<h1>Header</h1>
<hr />

<div>
First column here
</div>

<div>
Second column (main content)
</div>

<div>
Third column
</div>

<hr />
<div>Footer</div>

</div>

</body>
</html>

Now its time for adding some 'class' attributes to your HTML for creating the columns. Notice that I said the whole layout consists of 24 columns (or 24 width units). For example, you may want the first column to be 6 units wide, the middle column 12 units, and the third and last column to be 6 units. Therefore, the three columns equal to (6 + 12 + 6) = 24 units.

Notice the code highlighted in bold

<div class="column span-6">
First column here
</div>

<div class="column span-12">
Second column (main content)
</div>

<div class="column span-6 last">
Third column
</div>

Dont forget to add 'last' in the class attribute of your last column. This is important.

Final HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">

<title>frinity.blogspot.com</title>

<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">

</head>
<body>

<div class="container">

<h1>Header</h1>
<hr />

<div class="column span-6">
First column here
</div>

<div class="column span-12">
Second column (main content)
</div>

<div class="column span-6 last">
Third column
</div>

<hr />
<div>Footer</div>

</div>

</body>
</html>

Save your HTML file, and open it in a browser. Your layout is ready!