Smartcoderszone - A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, RoR, Twitter and Facebook Scripts

How to add border to table row using jquery

Sat, Jun 19, 2010

Hi Guys,

In the previous post we have learned that how to add background color of table row using jquery. Today I am posting jquery commands for adding border to any table row by using jquery simple statements.

To add border to your table row, we need to use jquery css property. One thing is noticeable is that when we want to add border around table row then we have to use content(td) function for applying border to each table data. This function is must and without it border property for table row won’t work.

$('#special_list').contents('td').css({'border': '1px solid #aaaaaa'});

Here #special_list is the id of the table row (
). Above command simply add border around whole table row.

Now if we want only top and bottom border, then we have to remove border of left and right side.

$('#special_list').contents('td').css({'border': '1px solid #aaaaaa', 'border-left': 'none', 'border-right': 'none'});

If you dont want any border around it then.

$('#special_list').contents('td').css({'border': 'none'});

You can specify which side border you want. Like this -

$('#special_list').contents('td').css({'border-left': '1px solid #aaaaaa'});

If you want border around any div then –

$('#special_list').css({'border-left': '1px solid #aaaaaa'});

Here #special_list is the id of that div.

We can change the background color of any div –

$('#special_list').css('background-color', '#cccccc');

Hope these jquery commands help you to solve your problem. More jquery stuff comming soon.

how to add background color onmouseover using jquery

Fri, Jun 18, 2010

0 Comments

Hi Friends,

In my recent project work, I need to add background color on table row (even rows) on mouse over. I used jquery for this. Its very easy to do that. You need to call two java script function – one for adding background color onmouseover and second for returning back to original background color onmouseout.

It is php dynamic listing so you need to use variable $i for separating even and odd listing rows.

<table border='0' cellpadding='0' cellspacing='0'>
<?php
$i=0;
loop start here
?>

<tr id="special_list<?php echo $i;?>" onmouseover="javascript:insertback(<?php echo $i;?>);" onmouseout="javascript:removeback(<?php echo $i;?>);">
<td>Dynamic Listing Data</td>
</tr>

<?php
 ++$i;
loop ends here
?>
</table>

In above code we just call two java script functions onmouseover and onmouseout for changing background of table rows.

Following are the code of those two javascript functions. Its a jquery code that simply uses its property of adding css.

function insertback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#cccccc');
	}
}

function removeback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#FFFFFF');
	}
}

Jquery uses its property of adding css to element’s id. Hope this script help you to improve your listing display.

Enjoy it

Google map demo using php class

Wed, Jun 9, 2010

0 Comments

Hi Guys,

Today I am posting google map demo using php api. Few months back I need to develop a google map in php for my client therefore I google and found some complex methods of generating google map. There was some script that needs latitude, longitude for gmap. All I wanted to do is to generate google map with address only. Finally I found a php class that have the simple solution.

There is some simple methods that you need to call by object of map class.

1. $map->setAPIKey(YOUR Google Map Key);

2. $map->addMarkerByAddress(YOUR Address);

3. $map->printHeaderJS();

4. $map->printMapJS();

Above two methods you need to call within <head></head> tag.

5. onLoad=”onLoad()”

This method you need to call on <body> tag onload.

6. $map->printMap();

This method display google map. Use it where you want to print google map on your web page.

You can get your gmap key from here.

You can download google map class from here.

Click here for Demo of this script.


<?php
 require_once('GoogleMapAPI.class.php');
 $map = new GoogleMapAPI('map');
 // enter YOUR Google Map Key
 $map->setAPIKey('YOUR Google map key');

 // create map markers which  indicate your location
 $map->addMarkerByAddress('YOUR Complete Address');
?>
<head>
<?php $map->printHeaderJS(); ?>
<?php $map->printMapJS(); ?>
</head>
<body onLoad="onLoad()">
<div style="width:600px; height:400px; border:1px solid #000000;">
<?php $map->printMap(); ?>
</div>
</body>

I hope this tutorial help to learn gmap implementation smartly also share your experience with this class or the Google Maps API.

Web search engine working

Tue, Jun 8, 2010

0 Comments

A web search engine is designed to search for information on the WWW (World Wide Web). The search results are usually presented in a list of results.

What is web search engine?

Search engine is the software program that searches for websites based on the input search string text. Search engines look through their own database of information in order to find what you are looking for. Search engines perform several activities in order to deliver search results – crawling, indexing, processing, calculating relevancy, and retrieving.

How search engine works?

1. Search engines crawl the Web to see what is there. This task is performed by e piece of software, called a crawler or a spider (or Googlebot, as is the case with Google). Spiders follow links from one page to another and index everything they find on their way. There are billions of pages on the web, so it is not possible for crawler to visit each link of your site daily. It may take time to crawl your pages. Keep in mind that crawlers do not see images, Flash movies, JavaScript, frames, password-protected pages and directories.

2. After a page is crawled, the next step is to index its content. The indexed page is stored in a giant database, from where it can later be retrieved. Essentially, the process of indexing is identifying the words and expressions that best describe the page and assigning the page to particular keywords.

3. When a search request comes, the search engine processes request by compares the search string in the search request with the indexed pages in the database. There are millions of web pages contains the search string, the search engine starts calculating the relevancy of each of the pages in its index to the search string.

There are various algorithms to calculate relevancy. Each of these algorithms has different relative weights for common factors like keyword density, links, or metatags. That is why different search engines give different search results pages for the same search string.

All major search engines, like Yahoo!, Google, MSN, etc. periodically change their algorithms and if you want to keep at the top, you also need to adapt your pages to the latest changes. SEO is one of the process for website optimization.

4. The last step in search engine activity is retrieving the results. It simply display relevant information on the web in endless web pages for users.

Keep Reading

Sources : www.webconfs.com, websearch.about.com, www.wikipedia.org

Introduction to Search Engine Optimization (SEO)

Sat, Jun 5, 2010

1 Comment

Search Engine Optimization (SEO) is web marketing technical term used for website promotion to major search engines. Basically SEO can be defined as the activity of optimizing Web pages or complete sites in order to make them more search engine friendly yields getting higher positions in search results.

SEO or search engine optimization is a technique used to make your Web pages highly available to your site visitor while making website clear and understandable to search engines. SEO is an inexpensive way to help your Web site get more page views by creating Web pages rank high in search engine results.

SEO results may take long time after seo optimization. This is totally based on major search engine keywords recognition and website performance techniques.

There are some basic seo things you can do in your website.
1. Your post content should be strong.
2. Focus on optimize title, keyword and description tags.
3. Valid HTML

The Title Tag displays at the top of the browser window title bar. It also appears as the linked text when customers review results from search engines. It is indexed by the big search engines including Google and yahoo.

Jquery data display from database

Wed, Jun 2, 2010

0 Comments

Hi Guys,

I am posting simple example of fetching data from database using jquery. This code display password stored in database using jquery instantly. You just need to call simple jquery function and it will return password as a response text.

First, you will create index.php in which you will copy this code. Set database connections on the top.

<?php
	mysql_connect("localhost","root","");
	mysql_select_db("jquery_test");
	$result1=mysql_query("select * from users_tb where id=1");
	$row=mysql_fetch_array($result1);
	$id=$row["id"];
?>

Include jquery file. You can download it from here.

<script language="javascript" src="jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function displayPassword(id)
{
	var aurl='show_password.php?id='+id;
	var result = $.ajax({
	type: "GET",
	url: aurl,
	data: "stuff=1",
	async: false
	}).responseText;
	if(result)
	{
		$("#password_td").html(result);
	}
}
</script>

<table width="100%" cellspacing="3" align="center" class="admin_form">
<tr>
	<td nowrap="nowrap" width="30%" class="admin_form_label">
	<a href="javascript:void(0)" onclick="displayPassword(<?php echo $id; ?>)">Show Password</a></td>
				<td class="admin_form_field" id="password_td"><?php if(isset($_GET['pass']) && $_GET['pass']!="") echo $_GET['pass'];?>
	</td>
</tr>
</table>

Now our basic structure is complete. You need to create one more file. In the jquery function, request has been sent to show_password.php with database id. This file simply echo database user password.

show_password.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("jquery_test");

$result=mysql_query("select * from users_tb where id='".$_GET["id"]."'");
$row=mysql_fetch_array($result);

$password=$row["password"];
echo $password;
?>

Excellent Adobe Fireworks Tutorials

Wed, Jun 2, 2010

0 Comments

Recently I found a useful link about adobe fireworks tutorials. Designer generally prefer photoshop for design but fireworks too can yields good results. It is also an excellent tool for design.

Here you can find those tutorials.

35 Excellent Adobe Fireworks Tutorials

Twitter mass direct message to all followers

Tue, Jun 1, 2010

0 Comments

Hi Friends,

Recently I had started developing twitter scripts. Here I am posting one of my twitter application entitled “Twitter mass direct message to all followers”. You can post direct message to all followers directly. You need to just type your message in message box and then select all of your followers and press submit. That’s it.

Many of my friends wanted facility to contact directly to all followers directly. It is a very simple script of sending mass message to all followers. There is no database required. You just need to put script files on your server and log in with twitter username/password. It is the simplest installation of any script.

Main Features of Twitter Mass Message Script.

1. Easy Installation (Just need to transfer files on your server).

2. Just login with twitter username/password, this script wont store username/password.

3. Web 3.0 graphics, icon. Script having interactive user friendly graphics based on twitter theme.

4. You can see list of all your followers.

5. You can select one or more or all followers.

6. Message for where you can type your message.

7. After sending message you can see list of followers .

If you have any problem in this script, you can contact to me at amitkumarpaliwal@gmail.com always available on this.

DEMO

Click here for purchase

Conversion bytes to GB/MB/KB in php

Mon, May 31, 2010

0 Comments

Simple calculation to convert bytes to gb, mb and kb.


<?php
 $byte=1073741824;
if ($byte >= 1073741824)
 $byte_gb = round($byte / 1073741824 * 100) / 100 . " GB";
if ($byte >= 1048576)
 $byte_mb = round($byte / 1048576 * 100) / 100 . " MB";
if ($byte >= 1024)
 $byte_kb = round($byte / 1024 * 100) / 100 . " KB";
else
$byte_byte = $byte . " bytes";
 echo $byte_gb."&nbsp;".$byte_mb."&nbsp;".$byte_kb."&nbsp;".$byte_byte;
?>

Sophisticated Javascript validations

Fri, May 28, 2010

3 Comments

In the previous post you have read about basic javascript validations. Here I am posting some complex javascript validations like validation to restrict user to enter “only characters”, “only number”, “char and num both” and email validation.

Here demo contains some basic fields for validation.

<form method="post" name="myform" onsubmit="return validate()">
First Name: <input type="text" name="fname" id="fname">
Phone: <input type="text" name="phone" id="phone">
Address: <input type="text" name="address" id="address">
Email: <input type="text" name="email" id="email">
Male: <input type="radio" name="rad" id="rad" value="Male">Male
Female: <input type="radio" name="rad" id="rad" value="Female">Female
<input type="submit" name="submit" value="submit">
</form>

You need to just call validate function on onsubmit on the form. In this validation code, I used “match” function that checks input string with the regular expressions like [a-zA-Z], [0-9a-zA-Z], [0-9].

<SCRIPT language="JavaScript" type="text/javascript">
function validate()
{
flag=true;
error="";

var alphaExp = /^[a-zA-Z]+$/;
var alphaExp1 = /^[0-9a-zA-Z]+$/;
var numExp = /^[0-9]+$/;
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

	if (!document.myform.fname.value.match(alphaExp))
	{
		flag=false;
		error+="Please enter only characters in First Name \n";
		document.myform.fname.focus();
	}
        else 	if (!document.myform.phone.value.match(numExp))
	{
		flag=false;
		error+="Please enter only numbers in phone \n";
		document.myform.phone.focus();
	}
        else 	if (!document.myform.address.value.match(alphaExp1))
	{
		flag=false;
		error+="Please enter num and char only in address \n";
		document.myform.address.focus();
	}
	else if (!document.myform.email.value.match(emailExp))
	{
		flag=false;
		error+="Please enter valid email id \n";
		document.myform.email.focus();
	}
	else if (document.myform.rad[0].checked==false && document.myform.rad[1].checked==false)
	{
		flag=false;
		error+="Please check at leat one radio \n";
		document.myform.rad[0].focus();
	}
         if(flag==false)
        {
	         alert(error);
	         return flag;
         }
}
</script>

This validation script contains smart ways to deal with some complex validations. You can see input string directly checks with regular expressions that yields desired results quickly.

With this code email validation is now easy to perform and implementation.

Enjoy it

smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

How to add border to table row using jquery

how to add background color onmouseover using jquery

Google map demo using php class

Web search engine working

Introduction to Search Engine Optimization (SEO)

Jquery data display from database

Excellent Adobe Fireworks Tutorials

Twitter mass direct message to all followers

Conversion bytes to GB/MB/KB in php

Sophisticated Javascript validations

Categories

Blogroll