javascript & jquery

To create a password meter using Javascript

Posted on September 21st, 2011 in javascript & jquery

We can see various type of password strength meter when we are registering on different types of websites. Here I will show you how to create a simple password strength meter using JavaScript and PHP.
There will be three steps:
1st create a html form:
{form method=”post”}
{h1}Password strength meter{/h1}
{label for=”pass”}Password{/label}
{input type=”password” name=”pass” id=”pass” onkeyup=”passwordStrength(this.value)” /}
{label for=”passwordStrength”}Password strength{/label}
{div [...]

  • Share/Bookmark
Tags:
Read post Add your comment

Creating a Simple pop-up with blocked background

Posted on August 30th, 2011 in CSS, javascript & jquery

Today we will see how to make a simple popup with blocked background.It is made in Jquery.Here is the code below:

1st Page is index.php:
<!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” dir=”ltr”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>SMOOTH POP UP MADE BY RAJAT</title>
<link rel=”stylesheet” href=”css/general.css” type=”text/css” media=”screen” />
<script src=”js/jquery-1.2.6.min.js” type=”text/javascript”></script>
<script src=”js/popup.js” type=”text/javascript”></script>
</head>
<body>
WELCOME THIS IS MY FIRST [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

JAVASCRIPT PROGRAMS TO CALCULATE DATE & DATE DIFFERENCE

Posted on August 25th, 2011 in javascript & jquery

This code will give you the date after 30 days and number of days between any two dates.Sometimes it is required in a program to get a particular date and the difference between two dates. This code is short but essentially effective.
Calculating The Date After 30 Days:
function  next_date()    {
var d1==$(“# current_ date”).val();
// The [...]

  • Share/Bookmark
Tags:
Read post Add your comment

How to render Map inside jquery tabs on tab click

Posted on August 24th, 2011 in javascript & jquery

In most of the places the Google map is loaded on page load time. But if we want to display the map inside a jquery tab (initially hidden), we need not require to load the map on page load. This will reduce the page loading time. Another problem of loading the map on page load [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

How to create Google Charts

Posted on August 17th, 2011 in javascript & jquery

To create a pie chart, use the following code:
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ‘1.0′, {‘packages’:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(’string’, ‘Topping’);
data.addColumn(‘number’, ‘Slices’);
data.addRows([
['Correct Answer', <?php echo $correct_answer_chart; ?>],
['Incorrect Answer', <?php echo $incorrect_answer_chart; ?>],
['Pending Ansewr', <?php echo $pending_answer_chart; ?>],
['Skiped Ansewr', <?php echo $skiped_answer_chart; ?>]
]);
var options = {‘title’:’Result’,
‘width’:600,
‘height’:300,
colors: ['#00CD00', '#e0440e', '#e5e599', '#cccccc']
};
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>
The above [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

Pre-loading Images on a Webpage

Posted on August 16th, 2011 in javascript & jquery

Preloading images refers to loading images into browser cache prior to displaying them, and is used when you wish certain images to be revealed instantly when called upon (such as in a rollover effect). Use this script to preload any number of images easily.
For this you just need to simply insert the below into the [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

Scrolling text content using jQuery (and not using marquee)

Posted on January 06th, 2011 in javascript & jquery

Scrolling text content using jQuery (and not using marquee)
In the 90’s, a couple of much abused HTML tags were blink and marquee. There was a plethora of table-based yucky looking pages with such “effects”. Very few website developers actually used marquees because they needed to make something aesthetic or useful. It was mostly clients who [...]

  • Share/Bookmark
Tags:
Read post Add your comment

How to Hide a Specific Div On a Specific Page of Your Website With Jquery

Posted on November 16th, 2010 in javascript & jquery

If you want to hide a specific div on a specific page of your website, you can do it with JQuery, using the below code.
Example: if your page URL is “http://www.example.com/about.php”
The first block of code will give you “about.php” from your full URL and store it in the variable called “current_page_name”.
Then in the second block [...]

  • Share/Bookmark
Tags:
Read post Add your comment

The Sliding Doors Technique using CSS and jQuery to create buttons

Posted on October 28th, 2010 in CSS, HTML, javascript & jquery

The sliding doors CSS technique to create a button or tab is very useful in interface design in terms of both flexibility and time saved. Often web designers and developers are required to make hyperlink-based rounded cornered buttons or even navigation tabs of varying widths. It is tedious to create them by slicing images for [...]

  • Share/Bookmark
Tags: , , ,
Read post Add your comment

Preloading images from CSS using jQuery

Posted on October 21st, 2010 in CSS, javascript & jquery

My research on how to easily preload a web page’s images that are referenced in attached stylesheets as background images led me to Filament Group’s jQuery plugin for the same. It is easy to incorporate and works like a charm since it can pull images and preload them from any directory. While CSS sprites is [...]

  • Share/Bookmark
Tags: , , , ,
Read post Add your comment
Older posts »