Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
JQuery Dialog Box Auto Close Event after 5 seconds - Example
JQuery Dialog Box Close Event Example
In this article,I will show how to Open/destroy/auto close dialog box after x seconds. jQuery Dialog Close event gives you a very simple way to close a jQuery UI dialog box after x seconds.I have written JavaScript code to Open and Close dialog box after a certaing amount of seconds.
Example:Auto Close jQuery UI Dialog Box
<!doctype html>
<html lang="en">
<head>
<title>Auto Close JQuery Dialog Box Example</title>
<style>
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog_box" ).dialog({
modal: true,
width:400});
});
setInterval(function(){AutoClose()},5000);//JQuery UI Dialog box will auto close after 5 seconds.
function AutoClose()
{
$(function() {
$( "#dialog_box" ).dialog( "close" );// //Auto Close Dialog Box.
});
}
</script>
</head>
<body0>
<div id="dialog_box" title="JQuery Dialog Box Example">
<p>Alert Message for displaying information</p>
</div>
</body>
</html>
I hope this example will help you to Close JQuery UI dialog box after 5 seconds.
In this article,I will show how to Open/destroy/auto close dialog box after x seconds. jQuery Dialog Close event gives you a very simple way to close a jQuery UI dialog box after x seconds.I have written JavaScript code to Open and Close dialog box after a certaing amount of seconds.
Example:Auto Close jQuery UI Dialog Box
<!doctype html>
<html lang="en">
<head>
<title>Auto Close JQuery Dialog Box Example</title>
<style>
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog_box" ).dialog({
modal: true,
width:400});
});
setInterval(function(){AutoClose()},5000);//JQuery UI Dialog box will auto close after 5 seconds.
function AutoClose()
{
$(function() {
$( "#dialog_box" ).dialog( "close" );// //Auto Close Dialog Box.
});
}
</script>
</head>
<body0>
<div id="dialog_box" title="JQuery Dialog Box Example">
<p>Alert Message for displaying information</p>
</div>
</body>
</html>
I hope this example will help you to Close JQuery UI dialog box after 5 seconds.
Convert string to date in Javascript /Jquery
Convert string to date in Javascript /Jquery
In this article,I will explain how to convert string to date in Javascript/Jquery. You can use the JavaScript Date Object to convert the string to Date in JavaScript.
JavaScript supports the following Date formats :
MM/dd/yyyy
MMMM dd, yyyy
MMM dd, yyyy
MM-dd-yyyy
yyyy/MM/dd
we have to convert a string date to a Javascript Date object.
Example:String to Date Conversion using JavaScript
<!DOCTYPE html>
<html>
<title>Convert string to date in Javascript</title>
<body>
<script type="text/javascript">
function showDate(){
var d=document.getElementById('date').value;
var d1 = Date.parse(d);
var dt=new Date(d1);
alert(dt);
alert("Date : " + dt.getDate());// Date
alert("Month : " + dt.getMonth());// Month
alert("Year : " + dt.getFullYear()); //Year
var x = document.getElementById("result");
x.innerHTML="Date:"+dt+"<br> Date : " + dt.getDate()+" <br> Month : " + dt.getMonth()+" <br> Year : " + dt.getFullYear();
//There are four ways of initiating a date:
//new Date() // current date and time
//new Date(milliseconds) //milliseconds since 1970/01/01
//new Date(dateString)
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
}
</script>
<table>
<tr>
<td> Date:</td><td><input type='text' name='date' id='date'> </td>
</tr>
<tr>
<td colspan=2 align=center><input value="Convert" type=button onclick='javascript:showDate()' /></td>
</tr>
</table>
<p id="result"></p>
</body>
</html>
In this article,I will explain how to convert string to date in Javascript/Jquery. You can use the JavaScript Date Object to convert the string to Date in JavaScript.
JavaScript supports the following Date formats :
MM/dd/yyyy
MMMM dd, yyyy
MMM dd, yyyy
MM-dd-yyyy
yyyy/MM/dd
we have to convert a string date to a Javascript Date object.
Example:String to Date Conversion using JavaScript
<!DOCTYPE html>
<html>
<title>Convert string to date in Javascript</title>
<body>
<script type="text/javascript">
function showDate(){
var d=document.getElementById('date').value;
var d1 = Date.parse(d);
var dt=new Date(d1);
alert(dt);
alert("Date : " + dt.getDate());// Date
alert("Month : " + dt.getMonth());// Month
alert("Year : " + dt.getFullYear()); //Year
var x = document.getElementById("result");
x.innerHTML="Date:"+dt+"<br> Date : " + dt.getDate()+" <br> Month : " + dt.getMonth()+" <br> Year : " + dt.getFullYear();
//There are four ways of initiating a date:
//new Date() // current date and time
//new Date(milliseconds) //milliseconds since 1970/01/01
//new Date(dateString)
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
}
</script>
<table>
<tr>
<td> Date:</td><td><input type='text' name='date' id='date'> </td>
</tr>
<tr>
<td colspan=2 align=center><input value="Convert" type=button onclick='javascript:showDate()' /></td>
</tr>
</table>
<p id="result"></p>
</body>
</html>
I hope this example will help you to Convert string to date in Javascript
JQuery Change background color based on radio button Click Event - JQuery Script
JQuery Change background color based on radio button Click Event-JQuery Script
In this article,I will Explain how to change background colour based on Radio button value in JQuery and how to use Radio button Click event using Javascript.I want to change the background Colour to the latest radio button clicked value.
I have written radio buttons background color change script using JQuery.
Example:Change div /Span background Colour color with active chcecked radio button.
<!DOCTYPE html>
<html>
<title>how to change the background color of a radio button.<</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<div>
<DIV><b>Change background color on radio select</b></DIV>
<div>
<input type="radio" name="1" value="Red" class="hi">
<span id="Red">Red</span>
</div>
<div>
<input type="radio" name="1" value="Green" class="mid">
<span id="Green">Green</span>
</div>
<div>
<input type="radio" name="1" value="Blue" class="lo">
<span id="Blue">Blue</span>
</div>
</div>
</form>
<script>
$("input").click(function() {
$("span").css('background','white');
var id=$(":checked").val();
$('#'+id).css('background',id);
});
</script>
</body>
</html>
OUTPUT
In this article,I will Explain how to change background colour based on Radio button value in JQuery and how to use Radio button Click event using Javascript.I want to change the background Colour to the latest radio button clicked value.
I have written radio buttons background color change script using JQuery.
Example:Change div /Span background Colour color with active chcecked radio button.
<!DOCTYPE html>
<html>
<title>how to change the background color of a radio button.<</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<div>
<DIV><b>Change background color on radio select</b></DIV>
<div>
<input type="radio" name="1" value="Red" class="hi">
<span id="Red">Red</span>
</div>
<div>
<input type="radio" name="1" value="Green" class="mid">
<span id="Green">Green</span>
</div>
<div>
<input type="radio" name="1" value="Blue" class="lo">
<span id="Blue">Blue</span>
</div>
</div>
</form>
<script>
$("input").click(function() {
$("span").css('background','white');
var id=$(":checked").val();
$('#'+id).css('background',id);
});
</script>
</body>
</html>
OUTPUT
Javascript: Open new popup window at the center of the screen
Javascript: Open new popup window at the center of the screen
In this article,I will explain how to open new popup window center on screen using Javascript.
I have written java script function that opens a new popup window at the center of the screen.We are using window.open method of javascript
Syntax
window.open([URL], [Window Name],..... );
Example: Center popup Window
<html>
<head>
<script >
function PopupWindowCenter(URL, title,w,h)
{var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var newWin = window.open (URL, title, 'toolbar=no, location=no,directories=no, status=no, menubar=no, scrollbars=no, resizable=no,copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
</head>
<body>
<a href="javascript:void(0);" onClick ="PopupWindowCenter('http://www.example.com', 'PopupWindowCenter',600,700)">Open Center popup Window</a>
</body>
</html>
Now you can open a simple popup window at the center of the screen.
Export to excel in php with jquery/Javascript
Export to excel in php with jquery/Javascript
In this article,I will explain how to export excel file in php with JQuery.we are going to export an HTML table to a MS Excel document as it is displayed on the HTML page.it is very easy to export PHP HTML data to excel in PHP.please check following Export to excel example.
Example:Export to excel in php
File:php_export_to_excel.php
<?php
if(isset($_REQUEST['csvdata']))
{
////download to excel
header('Content-Type: application/force-download');
header('Content-disposition: attachment; filename=csv_excel.xls');
header("Pragma: ");
header("Cache-Control: ");
echo $_REQUEST['csvdata'];
exit();
}
?>
<html>
<head>
<script>
function getCsvData()
{
$("#csvdata").val($("<span>").append ($("#customers").eq(0).clone()).html());
return true;
}
</script>
<title>Export to excel in php with Jquery</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:50%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #999999;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color: #666666;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<form method="post" onSubmit="javascript:return getCsvData()">
<table align="center" id="customers">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr class="alt">
<td> Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>ABC</td>
<td>France</td>
</tr>
</table>
<table align="center" id="customers1">
<tr>
<td colspan="6"align="center"><input type="hidden" id="csvdata" name="csvdata">
<input type="submit" value="Export to Excel"> </td>
</tr>
</table>
</form>
</body>
</html>
In this article,I will explain how to export excel file in php with JQuery.we are going to export an HTML table to a MS Excel document as it is displayed on the HTML page.it is very easy to export PHP HTML data to excel in PHP.please check following Export to excel example.
Example:Export to excel in php
File:php_export_to_excel.php
<?php
if(isset($_REQUEST['csvdata']))
{
////download to excel
header('Content-Type: application/force-download');
header('Content-disposition: attachment; filename=csv_excel.xls');
header("Pragma: ");
header("Cache-Control: ");
echo $_REQUEST['csvdata'];
exit();
}
?>
<html>
<head>
<script>
function getCsvData()
{
$("#csvdata").val($("<span>").append ($("#customers").eq(0).clone()).html());
return true;
}
</script>
<title>Export to excel in php with Jquery</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:50%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #999999;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color: #666666;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<form method="post" onSubmit="javascript:return getCsvData()">
<table align="center" id="customers">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr class="alt">
<td> Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>ABC</td>
<td>France</td>
</tr>
</table>
<table align="center" id="customers1">
<tr>
<td colspan="6"align="center"><input type="hidden" id="csvdata" name="csvdata">
<input type="submit" value="Export to Excel"> </td>
</tr>
</table>
</form>
</body>
</html>
Javascript Find Vowels in a String
Javascript Find Vowels in a String
In this article, I will explain how to find Vowels in a String and how to find total number of vowels in a string in JavaScript. I have written simple script for checking vowels in a string in JavaScript. I have used regular expression. For me, a regular expression is best.
Read more "Find Vowels in a String in Javascript"
In this article, I will explain how to find Vowels in a String and how to find total number of vowels in a string in JavaScript. I have written simple script for checking vowels in a string in JavaScript. I have used regular expression. For me, a regular expression is best.
Read more "Find Vowels in a String in Javascript"
Avoid jQuery conflict with Other JavaScript library(prototype,YUI,mootools)
Avoid jQuery conflict with Other JavaScript library(prototype,YUI,mootools)
In this jQuery article, I will explain how to avoid jquery conflict with other javascript libraries.
javascript libraries such as YUI, prototype conflict with Jquery library as prototype library also uses `$` sign.To resolve this issue, jQuery has .noConflict() method.
.noConflict() method: Relinquish jQuery's control of the $ variable (override the $ function)
we can avoid prototype and jquery conflict using .noConflict() method.
In this jQuery article, I will explain how to avoid jquery conflict with other javascript libraries.
javascript libraries such as YUI, prototype conflict with Jquery library as prototype library also uses `$` sign.To resolve this issue, jQuery has .noConflict() method.
.noConflict() method: Relinquish jQuery's control of the $ variable (override the $ function)
we can avoid prototype and jquery conflict using .noConflict() method.
Restrict special characters being entered in textbox using jquery/javascript?
Restrict special characters being entered in textbox using jquery/javascript?
In this tutorial,I will explain how to restrict the special characters being entered in textbox using jquery/javascript.
It is very important to check user input text validity to prevent the sql injection that can harm your database.
In this tutorial,I will explain how to restrict the special characters being entered in textbox using jquery/javascript.
It is very important to check user input text validity to prevent the sql injection that can harm your database.
jquery trim spaces - jQuery $.trim method
jquery trim spaces - jQuery $.trim method
In this tutorial, I will explain how to removes the two whitespaces at the start and at the end of the string.
Removes the two whitespaces at the start and at the end of the string.
<html>
<title>jquery trim spaces</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("span").click(function () {
var str = " jquery trim spaces ";
str1 = jQuery.trim(str);
alert(str1);
str2 = $.trim(str);//using the jQuery $.trim method
alert(str2);
});
});
</script>
</head>
<body>
<span>jquery trim spaces</span>
</body>
</html>
I hope this tutorial will help you to remove whitespaces at the start and at the end of the string.
In this tutorial, I will explain how to removes the two whitespaces at the start and at the end of the string.
Removes the two whitespaces at the start and at the end of the string.
<html>
<title>jquery trim spaces</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("span").click(function () {
var str = " jquery trim spaces ";
str1 = jQuery.trim(str);
alert(str1);
str2 = $.trim(str);//using the jQuery $.trim method
alert(str2);
});
});
</script>
</head>
<body>
<span>jquery trim spaces</span>
</body>
</html>
I hope this tutorial will help you to remove whitespaces at the start and at the end of the string.
JQuery-Remove all spaces from string using javascript/JQuery/Regular expressions.
Remove all spaces from string using javascript/JQuery/Regular expressions.
In this tutorial, I will explain how to remove all spaces in a string using jquery,
remove all occurences of a character from a string.
I need to remove spaces in the string.I will use JQuery/Regular expressions/javascript to replace spaces from string.
You can replace string with '_','-'....etc.
Removing extra space from the string using javascript and Regular expression is very easy.
<script type="text/javascript">
function removeSpaces(str)
{
var s=str.replace(/\s/g, "");
return s;
}
var new_str=removeSpaces('jquery remove space from string using javascript');
</script>
In this tutorial, I will explain how to remove all spaces in a string using jquery,
remove all occurences of a character from a string.
I need to remove spaces in the string.I will use JQuery/Regular expressions/javascript to replace spaces from string.
You can replace string with '_','-'....etc.
Removing extra space from the string using javascript and Regular expression is very easy.
<script type="text/javascript">
function removeSpaces(str)
{
var s=str.replace(/\s/g, "");
return s;
}
var new_str=removeSpaces('jquery remove space from string using javascript');
</script>
jquery onclick change class script (.removeClass() and .addClass())
JQuery onclick change class (.removeClass() and .addClass())
In this example,I will show How to change class name using Jquery .removeClass() and .addClass() property.
Syntax:
.removeClass(className)
className will be One or more classes to be removed from the class attribute of each matched element.
In this example,I will show How to change class name using Jquery .removeClass() and .addClass() property.
Syntax:
.removeClass(className)
className will be One or more classes to be removed from the class attribute of each matched element.
Select list add and remove in php using jquery
Select list add and remove in php using jquery:
In this article,I will show how to select list add and remove in PHP using Jquery with simple example.
Suppose I have 2 list box . The first box is populated with Characters. I have two buttons (add, remove). When the button is press it take the select element from list1 and put it in list2.
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$(".middle input[type='button']").click(
function(){
var listArr = $(this).attr("name").split("_");
var list1 = listArr[0];
var list2 = listArr[1];
$("#" + list1 + " option:selected").each(function(){
$("#" + list2).append($(this).clone());
$(this).remove();
});
});
})
</script>
<table width=50%>
<tr>
<td>
<select name="items1" id="first" size="5" multiple="multiple">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
</td>
<td>
<div class="middle">
<input name="first_second" value=">>" type="button">
<input name="second_first" value="<<" type="button">
</div>
</td>
<td>
<select name="items" id="second" size="5" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>
In this article,I will show how to select list add and remove in PHP using Jquery with simple example.
Suppose I have 2 list box . The first box is populated with Characters. I have two buttons (add, remove). When the button is press it take the select element from list1 and put it in list2.
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$(".middle input[type='button']").click(
function(){
var listArr = $(this).attr("name").split("_");
var list1 = listArr[0];
var list2 = listArr[1];
$("#" + list1 + " option:selected").each(function(){
$("#" + list2).append($(this).clone());
$(this).remove();
});
});
})
</script>
<table width=50%>
<tr>
<td>
<select name="items1" id="first" size="5" multiple="multiple">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
</td>
<td>
<div class="middle">
<input name="first_second" value=">>" type="button">
<input name="second_first" value="<<" type="button">
</div>
</td>
<td>
<select name="items" id="second" size="5" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>
jQuery TimePicker
jQuery TimePicker Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>jQuery timePicker</title>
<style type="text/css" media="all">
div.time-picker {
position: absolute;
height: 191px;
width:4em; /* needed for IE */
overflow: auto;
background: #fff;
border: 1px solid #aaa;
z-index: 99;
margin: 0;
}
div.time-picker-12hours {
width:6em; /* needed for IE */
}
div.time-picker ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div.time-picker li {
cursor: pointer;
height: 10px;
font: 12px/1 Helvetica, Arial, sans-serif;
padding: 4px 3px;
}
div.time-picker li.selected {
background: #0063CE;
color: #fff;
}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<!--Download jquery.timePicker.js from below link;
jquery-timepicker.googlecode.com/files/jquery.timepicker.js
-->
<script type="text/javascript" src="jquery.timePicker.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#shwtime").timePicker();
});
</script>
</head>
<body>
<h1>jQuery timePicker</h1>
<div><input type="text" id="shwtime" size="10" value="08:00" name="shwtime" /> </div>
</body>
