Archive for the ‘ajax’ Category

Masked Input Plugin

28 Jun

Posted by: admin in: ajax, javascript, jquery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

A mask is defined by a format made up of mask and placeholder characters. Any character not in the placeholder character list below is considered a mask character. Mask characters will be automatically entered for the user as they type and will not be able to be removed by the user.

The following placeholder characters are predefined:

* a - Represents an alpha character (A-Z,a-z)
* 9 - Represents a numeric character (0-9)
* * - Represents an alphanumeric character (A-Z,a-z,0-9)

Demo
key data in textbox

How to use


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Jquery</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

<script type='text/javascript' src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.1.3"></script>
 <script type="text/javascript">
 jQuery.noConflict();
(function($) {
   $(function() {
      $.mask.addPlaceholder("~","[+-]");
      $("#date").mask("99/99/9999");
      $("#phone").mask("(999) 999-9999");
      $("#tin").mask("99-9999999");
      $("#ssn").mask("999-99-9999");
      $("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
      $("#eyescript").mask("~9.99 ~9.99 999");
   });
})(jQuery);
</script>
<style type="text/css">
.style {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
</style>
</HEAD>

 <BODY>
<div id="demo">
<table>
<tr>
<td>Date</td>
<td>
<input id="date" type="text" tabindex="1"/></td>
<td>99/99/9999</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input id="phone" type="text" tabindex="2"/></td>
<td>(999) 999-9999</td>
</tr>
<tr>
<td>Tax ID</td>
<td>
<input id="tin" type="text" tabindex="3"/></td>
<td>99-9999999</td>
</tr>
<tr>
<td>SSN</td>
<td>
<input id="ssn" type="text" tabindex="4"/></td>
<td>999-99-9999</td>
</tr>
<tr>
<td>Product Key</td>
<td>
<input id="product" type="text" tabindex="5"/></td>
<td>a*-999-a999</td>
</tr>
<tr>
<td>Eye Script</td>
<td>
<input id="eyescript" type="text" tabindex="6"/></td>
<td>~9.99 ~9.99 999</td>
</tr>
</table>
</div>
 </BODY>
</HTML>

More info
http://digitalbush.com/projects/masked-input-plugin

1009 Comments

Jeditable - Edit In Place Plugin For jQuery

27 Jun

Posted by: admin in: ajax, javascript, jquery

How does in place editing work?

Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again.

Demo

How to use


<?php      

$folder = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
$url    = sprintf('http://%s%s', $_SERVER['SERVER_NAME'], $folder);

?>
<html>
<head>
<title>jEditable - Textile callback and tooltips demo</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.jeditable.js" type="text/javascript"></script>
<style type="text/css">
<!–
.style1 {
	font-size: large;
	font-weight: bold;
}
–>
</style>
</head>
<html>
<div id="header">
<h1 class="editable_textarea style1">Test Edit in place5  Click Here to
edit</h1>
<br>
<h1 class="editable_textarea_over style1">Test Edit in place6
Click Here to edit</h1>
<br>
</div>

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
    $(".editable_textarea").editable("<?php print $url ?>echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        type      : "textarea",
        submit    : "OK",
		cancel    : "Cancel",
		onblur    : 'submit',
        tooltip   : "Click to edit..."
    });

	$(".editable_textarea_over").editable("<?php print $url ?>echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        type      : "textarea",
        submit    : "OK",
		cancel    : "Cancel",
        tooltip   : "Click to edit..."
		event     : "mouseover"
    });

});
// ]]>
</script>

</html>

echo.php


<?php

print $_POST['value'];

?>

More info
http://www.appelsiini.net/projects/jeditable

1058 Comments

Jquery Submit Form

25 Jun

Posted by: admin in: ajax, javascript, jquery

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this

Form Plugin API
The Form Plugin API provides several methods that allow you to easily manage form data and form submission.

ajaxForm
Prepares a form to be submitted via AJAX by adding all of the necessary event listeners. It does not submit the form. Use ajaxForm in your document’s ready function to prepare your form(s) for AJAX submission. ajaxForm takes zero or one argument. The single argument can be either a callback function or an Options Object.
Chainable: Yes.

how tu use


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Jquery post </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

<script type='text/javascript' src="jquery-1.2.6.js"></script>
<script type='text/javascript' src="jquery.form.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--

	$(document).ready(function() {
    $('#htmlForm').ajaxForm({
		beforeSubmit: validate,
        target: '#htmlExampleTarget', 

        success: function() {
            $('#htmlExampleTarget').fadeIn(1000);
			$('#htmlExampleTarget').fadeOut(3000);
        }
    });
});

function validate(formData, jqForm, options) { 

    var name = $('input[@name=message]').fieldValue();
    var check = $('input[@name=xxx]').fieldValue(); 

    if (!name[0] || !check[0]) {
        alert('Please enter a value for both');
        return false;
    }
}

  </SCRIPT>
<style type="text/css">
.style {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
</style>
</HEAD>

 <BODY>
  <form action="echo.php" method="post" class="style" id="htmlForm">
    Message: <input type="text" name="message" value="Hello HTML" />
    <INPUT TYPE="checkbox" NAME="xxx" value="xxxxx">
    check this
    <input type="submit" value="Echo as HTML" />
 </form>
<div id="htmlExampleTarget" class="style"></div>
 </BODY>
</HTML>

echo.php


<?php
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . ' '.$_POST['xxx'].'</div>';
?>

More info
http://www.malsup.com/jquery/form/

1160 Comments

Busy.js 1.0

25 Jun

Posted by: admin in: ajax, javascript, loading

Demo

Busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages (inc. overlay color & transparency). It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource!

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it’ll degrade to simple quadratic shapes.

How to use


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

<title>cvi_busy_lib.js :: demo</title>
	<style type="text/css" media="all">
	@media screen, projection {
		body {background-color: #FFFFCC; color: #444;}
		.header {
		background-color: #ccf;
		color: #444;
		font-size: 90%;
		margin: 0;
		padding: .2em 2%;
		border: 8px solid white;
		-moz-border-radius-topleft: 16px;
		-moz-border-radius-topright: 16px;
		-webkit-border-top-left-radius: 16px;
		-webkit-border-top-right-radius: 16px;
		}
	</style>
<!--[if IE 6]>
	<style type="text/css">
		.header, .sidebar {position:relative}
	</style>
<![endif]–>
<script type="text/javascript" src="cvi_busy_lib.js"></script>

<script type="text/javascript" charset="utf-8">

var tval;
</script>

</head>
<body>
<div class="wrapper">
<div id="top" class="header" onclick="try {tval.remove(); tval='';}catch(e)
{tval=getBusyOverlay(this,{color:'blue',opacity:0.25});}">

<h2>Demo  <small>[<i>Click to add overlay and click again to remove.</i>]</small></h2><p></p>
</div>
<div id="button" class="button"></div>
</div>
</body>
</html>

More info
http://www.netzgesta.de/busy/

1069 Comments

JonDesign’s SmoothGallery

31 May

Posted by: admin in: ajax, gallery, javascript

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

Some of you might have heard of JonDesign’s SmoothSlideshow. SmoothGallery is its evolution.
So, what is so cool about it ?

How to use


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Slide Show</title>
	<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="jd.gallery.css" type="text/css" media="screen" />
	<script src="mootools.v1.11.js" type="text/javascript"></script>
	<script src="jd.gallery.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF">
	<script type="text/javascript">
		function startGallery() {
			var myGallery = new gallery($('myGallery'), {
				timed: true
			});
		}
		window.addEvent('domready',startGallery);
	</script>
	<div class="content">
		<div id="myGallery" class="white_content">

						<div class="imageElement">
				<font></font>
				<p>Llama Graze Where Potatoes Once Grew</p>
				<a href="#" title="open image" class="open"></a>
				<img src="post_photo/img_b.jpg" class="full" />
				<img src="tump.php?filedir=post_photo/img_b.jpg" class="thumbnail" />
			</div>
							<div class="imageElement">
				<font></font>

				<p>Timeless View</p>
				<a href="#" title="open image" class="open"></a>
				<img src="post_photo/img_1.jpg" class="full" />
				<img src="tump.php?filedir=post_photo/img_1.jpg" class="thumbnail" />
			</div>
						<div class="imageElement">
				<font></font>
				<p>Windows</p>

				<a href="#" title="open image" class="open"></a>
				<img src="post_photo/img_e.jpg" class="full" />
				<img src="tump.php?filedir=post_photo/img_e.jpg" class="thumbnail" />
			</div>
	   </div>
	</div>
</body>
</html>

http://smoothgallery.jondesign.net
Read the rest of this entry »

1047 Comments

Ajax Flash Chart

29 May

Posted by: admin in: ajax, chart, flash, php

Open Flash Chart, is open source. It is free to use and you get the source code to fiddle with!

http://teethgrinder.co.uk/open-flash-chart

Sample code

chart page


<SCRIPT LANGUAGE="JavaScript">
<!--
	function reload_compare()
{
  tmp = findSWF("chart");
    x = tmp.reload();
   x = tmp.reload("chat_data.php");
  x = tmp.reload("chat_data.php", false);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
	return window["ie_" + movieName];
  } else {
        return document[movieName];
  }
}

//–>
</SCRIPT>
 <BODY>
<?php
require_once 'lib/open_flash_chart_object.php';
require_once  'lib/open-flash-chart.php';
open_flash_chart_object(500,300,'chart_data.php',false,'lib/');
?>
<br>
<br>
<INPUT TYPE="button" onClick="reload_compare();" value="โหลดข้อมูลใหม่">
</object>
 </BODY>
?>

data page


<?php
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

include_once( 'lib/open-flash-chart.php' );
srand((double)microtime()*1000000);

$bar_red = new bar_3d( 75, '#D54C78' );
$bar_red->key( '2006', 10 );

// add random height bars:
for( $i=0; $i<10; $i++ )
  $bar_red->data[] = rand(2,5);

//
// create a 2nd set of bars:
//
$bar_blue = new bar_3d( 75, '#3334AD' );
$bar_blue->key( '2007', 10 );

// add random height bars:
for( $i=0; $i<10; $i++ )
  $bar_blue->data[] = rand(5,9);

// create the graph object:
$g = new graph();
$g->title( '3D Bar Chart', '{font-size:20px; color: #FFFFFF; margin: 5px;}' );

//$g->set_data( $data_1 );
//$g->bar_3D( 75, '#D54C78', '2006', 10 );

//$g->set_data( $data_2 );
//$g->bar_3D( 75, '#3334AD', '2007', 10 );

$g->data_sets[] = $bar_red;
$g->data_sets[] = $bar_blue;

$g->set_x_axis_3d( 12 );
$g->x_axis_colour( '#909090', '#ADB5C7' );
$g->y_axis_colour( '#909090', '#ADB5C7' );

$g->set_x_labels(array( 'Jan','Feb','Mar','April','May','June','July','Aug'
,'Sep','Oct'));
$g->set_y_max( 10 );
$g->y_label_steps( 5 );
$g->bg_colour = '#FFFF99';
$g->set_inner_background( '#E3F0FD', '#CBD7E6', 90 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
echo $g->render();
?>

1104 Comments

Next Entries

Time

Mp3

Msn status

manon2029@hotmail.com is

Chat with Meeh

Search

Donate

หมวดหมู่

ajax (12)
apache (3)
Asterisk (19)
captcha (1)
chart (1)
css (3)
Drag Drop (1)
Drop Down (1)
drupal (1)
E1 (3)
ffmpeg (1)
flash (4)
flv (1)
form (1)
gallery (2)
google map (1)
images (5)
javascript (22)
jquery (13)
linux (23)
loading (1)
mp3 (1)
mp4 (1)
MSN (1)
mysql (5)
php (21)
Uncategorized (11)
upload (2)
video (1)
windows (1)
Zaptel (5)
zoom (1)

UserOnline

6 Users Online
Users: 6 Guests

Counter

Visitors today: 4
Visitors yesterday: 46
Visitors per day: 638
Max. visitors per day: 579
Total page views: 600,817
Page views of this page: 638
Currently online: 2
Max. online: 192
Total visitors: 129,239
Statistics

Asterisk ajax javascript jquery php resource

Archive for the ‘ajax’ Category

Masked Input Plugin

Jeditable - Edit In Place Plugin For jQuery

Jquery Submit Form

Busy.js 1.0

JonDesign’s SmoothGallery

Ajax Flash Chart

Time

Mp3

Msn status

Chat with Meeh

Search

Donate

หมวดหมู่

Archives

UserOnline

Counter

Meta

Tags

A design creation of Design Disease