Create interesting photos online

April 22nd, 2009 by Sunil

Today I have created some interesting photos online. Have a look.

These photos I have created with PhotoFunia. It is an online photo editing tool. It is very easy to use and we can select it from 100 of effects.

After creation of image effects, we can download it to computer, save as avatar, we can publish it to blog or we can send it as a post card.

Hope you will like this.

Posted in Personal | 2 Comments »
Tags: , , ,

Find the biggest from the unordered list or ordered list

April 13th, 2009 by Sunil

Yesterday I came around the situation to find the biggest li from the list of unordered list (UL). I have done that. And added a class which is the bigger in the list. Same can be apply to the ordered list (OL) too. I think it will be helpful for the others too. It is using jQuery as javascript framework. 

If you have any questions or alternate solutions please let me know.

The code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Find the biggest from the unordered list or ordered list</title>
<script type='text/javascript' src='jquery-min.js'></script>
<script type="text/javascript">
    $(document).ready(function() {
		len=$("#list li").length;
		bigger=0;
		for(i=0;i<len;i++)
		{
			val1 = $("#list li").eq(i).text().length;
			if(val1 > bigger)
			{
				bigger = val1;
				pos =  i;
			}
			else
			{
				bigger = bigger;
 
			}
		}
	alert("postion "+ (pos + 1) + " is the biggest with "  +bigger+ " characters");
	$("#list li").eq(pos).addClass('bigger');
});
</script>
</head>
<body>
    <ul id="list">
	    <li>123</li>
		<li>1234</li>
		<li>123456789</li>
		<li>12345</li>
 
	</ul>
</body>
</html>

Download the source

Posted in Web Development | 2 Comments »
Tags: , , ,

How to create a simple navigation using CSS and XHTML

April 12th, 2009 by Sunil

When I wrote about the Unobstructive image gallery listing using CSS, many people asked me to post some tutorial on this blog. So that will be helpful for others. So I decided to create some tutorials on this blog. This is the first step for that.

Here I am trying to make simple navigation, which uses the html tag unordered list (ul li). It would be nice if we are using unordered lists for navigation menus. We can easily manage the navigation though DOM and it may help a little bit on SEO (Search Engine Optimisation).

Before creating this navigation, I am expecting that you may have some simple idea about HTML and CSS. 

First, we have to create one simple html like the following on your favorite html or text editor. I am using intype editor for creating the document and I personally like to code it by hand. I am not using any other user interface software for creating the html elements.

So the html code will be like the following

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="style.css" type="text/css"  />
<title>Create simple navigation using CSS and XHTML</title>
</head>
<body>
<ul class="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="#">Site map</a></li>
		</ul>
</body>
</html>

 
So, our html is ready!

Next, we need to create the CSS.

Since we are not creating any other pages, I am only covering the styles required for the current page. Before that, we need to add the style sheet path to the document like this inside the head tag.

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

Now I am creating the style sheet required for the page

I wrote the following code on the style sheet style.css file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body{
margin:0;
padding:0;
font-family:verdana, arial;
font-size:12px;
}
ul.nav{
margin:0;
padding:0;
list-style:none;
}
 
ul.nav li a{
text-decoration:none;
}

Now the vertical navigation is ready. You can add color for the anchor tag as you wishes like this

ul.nav li a{
text-decoration:none;
color:red;
}

If you want to add some color on the mouse over, you simply need to add the color for the element

ul.nav li a:hover{
color:green;
}

So the mouse over is also ready. You need to add proper padding, margin to the ul li tags, and then it will look nice.

Now I am changing this to horizontal navigation. For that we need to float the li selector. So it will looks like this

ul.nav li{
float:left;
padding-right:15px;
}

 
Padding-right used for the space required after the each menu. So the basic menu is ready.

Download sample file Less than 1 KB.

This is the very basic navigation style that can be creating with XHTML CSS. We can enrich the menu by adding background colors, background images or roll over effects. That all things I will explain another time.

Hope this tutorial will be interesting to you. If you have any doubt, suggestions or questions please post comment.

Posted in Web Development | 4 Comments »
Tags: , , ,

Create charts with Google Chart API for your web applications

April 3rd, 2009 by Sunil

First of all I am thanking to every one to make my last blog a hit. I got a lot of comments even one guy from Microsoft. Once again thanks to everyone

Google is always coming with innovations that make the people life easy. Hope you have remembered my post in google category. That was about “Language translation ajax api for Indian languages from Google”. Like that couple of weeks back Google has announced Google maps ajax api. If you are a web developer you can simply use the Google Chart API to create charts (dynamically) for your web applications. It was using by Google for their Google Finance, Google Video etc. It looks nice and tones of options.

Different types of charts available with Google chart API

  • Line charts
  • Bar charts
  • Pie charts Updated!
  • Venn diagrams
  • Scatter plots
  • Radar charts
  • Maps
  • Google-o-meters
  • QR codes

How to generate the chart?

We can simply generate the chart by calling the url like this


http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

eg: 

http://chart.apis.google.com/chart?

chs=250×100
&chd=t:60,40
&cht=p3
&chl=Hello|World

Where:

http://chart.apis.google.com/chart? is the Chart API’s location.

& separates parameters.

chs=250×100 is the chart’s size in pixels.

chd=t:60,40 is the chart’s data.

cht=p3 is the chart’s type.

chl=Hello|World is the chart’s label.

I am not able to describe all the options. Please have a look at the Google chart API documentation.

Posted in Web Development | 1 Comment »

Categories

My Twitter updates

Subscribe my free newsletter by email

Recently updated posts

Latest comments