Asterisk ajax javascript jquery php resource

Manon2029 Develope Blog
Options:

Archive for มิถุนายน, 2008

Previous Entries

Table Drag and Drop JQuery plugin

28 Jun

Posted by: admin in: Drag Drop, ajax, javascript, jquery

See demo
drag and drop the left table row and see result in right table

Why have another plugin?

Dragging and dropping rows within a table can?t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don?t work well with table rows on all browsers, so we have to go for simpler effects.
What does it do?

This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can?t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

How to use


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mcDropdown jQuery Plug-in</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" media="all" />
<script type="text/javascript">
$(document).ready(function() {
$('#table-3').tableDnD({
        onDrop: function(table, row) {
            //alert($.tableDnD.serialize());
			$('#AjaxResult').load("ajax.php?" + $.tableDnD.serialize());
        }
    });
 });
</script>
</head>

<body>
<div class="tableDemo">
<div id="AjaxResult">
<img src="images/1.gif"> 1 One<br>
<img src="images/2.gif"> 2 Two<br>
<img src="images/3.gif"> 3 Three (Can&amp;amp;amp;amp;#8217;t drop on this row)<br>
<img src="images/4.gif"> 4 Four<br>
<img src="images/5.gif"> 5 Five (Can&amp;amp;amp;amp;#8217;t drag this row)<br>
<img src="images/6.gif"> 6 Six<br>
</div>
<table id="table-3" cellspacing="0" cellpadding="2" height="200">
<tr id="1">
<td bgcolor="#FFFF99">1</td>
<td bgcolor="#FFFF99">One</td>
</tr>
<tr id="2">
<td bgcolor="#FF99CC">2</td>
<td bgcolor="#FF99CC">Two</td>
</tr>
<tr id="3" class="nodrop">
<td bgcolor="#0066CC">3</td>
<td bgcolor="#0066CC">Three (Can&amp;amp;amp;amp;#8217;t drop on this row)</td>
</tr>
<tr id="4">
<td bgcolor="#33CC66">4</td>
<td bgcolor="#33CC66">Four</td>
</tr>
<tr id="5" class="nodrag">
<td bgcolor="#990099">5</td>
<td bgcolor="#990099">Five (Can&amp;amp;amp;amp;#8217;t drag this row)</td>
</tr>
<tr id="6">
<td bgcolor="#FF0000">6</td>
<td bgcolor="#FF0000">Six</td>
</tr>
</table>
</div>
</body>
</html>

php code ajax.php


<?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");
$result = $_REQUEST["table-3"];
$val = array("","One","Two","Three (Can&amp;amp;amp;amp;#8217;t drop on this row)","Four","Five (Can&amp;amp;amp;amp;#8217;t drag this row)","Six");
$pval = array("","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif");
foreach($result as $value) {
	echo "<img src=\"images/$pval[$value]\"> $value $val[$value]<br/>";
}
?>

More info
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

mcDropdown jQuery Plug-in v1.2

28 Jun

Posted by: admin in: Drop Down, ajax, form, javascript, jquery

For our help desk, customer service and call center software applications, we needed to develop a unique UI control that would allow users to select from a complex hierarchical tree of options. We wanted this control to be intuitive and it had to allow for both quick mouse and keyboard entry. After many rounds of discussion internally and with customers, we came up with the following list of requirements:

* Menus must resize and position themselves to stay in the viewport. Options should not show up off screen where users would need to scroll to select them.
* Quick keyboard entry. Many users prefer keyboard entry for speed of data entry, so efficient keyboard entry is a must.
* Must be able to handle very large complex (deep) data trees, but work equally as well with very small sets of data.
* Easy implementation.

Demo

While the list of requirements was not long, we knew there would be substantial technical obstacles to overcome. The biggest obstacle to solve would be how to ensure that the menu and all of its submenus remain on the screen at all times.

To overcome this obstacle, we spent a lot of time developing code that would automatically split long lists into multiple columns and then position itself so that it always fits within the viewport. The overall effect is somewhat similar to the Microsoft? Windows? “Start > All Programs” menu. However, the algorithm we use should keep the menus laid out in a more compact layout?which we believe offers quicker selection of the menu items. The screenshot below shows what the menu looks like when used with a very large menu.

How to use


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mcDropdown jQuery Plug-in</title>
<script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./lib/jquery.mcdropdown.js"></script>
<script type="text/javascript" src="./lib/jquery.bgiframe.js"></script>
<link type="text/css" href="./css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<script type="text/javascript">
<!--//
// on DOM ready
$(document).ready(function (){
//$("#current_rev").html("v"+$.mcDropdown.version);
  $("#category").mcDropdown("#categorymenu");
});
//-->
</script>
</head>

<body>
<form name="f1" method="get" action="">
	Please select a category:<br />
	<input type="text" name="category" id="category" value="">
<INPUT TYPE="submit" value="ok">
    <ul id="categorymenu" class="mcdropdown_menu">
        <li rel="1">
            Arts &amp;amp;amp;amp;amp; Humanities
            <ul>
                <li rel="2">
                    Photography
                    <ul>
                        <li rel="3">
                            3D
                            </li>
                        <li rel="4">
                            Digital
                            </li>
                    </ul>
                </li>
                <li rel="5">
                    History
                    </li>
                <li rel="6">
                    Literature
                    </li>
            </ul>
        </li>
        <li rel="7">
            Business &amp;amp;amp;amp;amp; Economy
          </li>
        <li rel="8">
            Computers &amp;amp;amp;amp;amp; Internet
            </li>
        <li rel="9">
            Education
            </li>
        <li rel="11">
            Entertainment
            <ul>
                <li rel="12">
                    Movies
                    </li>
                <li rel="13">
                    TV Shows
                    </li>
                <li rel="14">
                    Music
                    </li>
                <li rel="15">
                    Humor
                    </li>
            </ul>
        </li>
        <li rel="10">
            Health
            </li>
    </ul>
    </form>
</body>
</html>

More info
http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

GoogleMapAPI a PHP library inteface to the Google Map API

28 Jun

Posted by: admin in: google map, php

A fully functional Google Map API for PHP.

Demo

How to use


<?php
require('GoogleMapAPI.class.php');
$map = new GoogleMapAPI('map1');
$map->setAPIKey('ABQIAAAAPOHd09dXhJtbKHeZpxlh6BTdM_BGb_HRDyhTa-
dAuFdRUQ382BTsqAFfGu_x3jaT_hgEvzyEiREMIg');
$map->setMapType('hybrid');
$map->enableInfoWindow();
$map->enableDirections();
$map->setInfoWindowTrigger('mouseover');
$map->setWidth('600px');
$map->setHeight('600px');

$map->addMarkerByCoords(100.70954024791717,14.670748432532
,'Saraburi.','<b>Nongdon Home</b>');
$map->addMarkerByCoords(100.60327649116516,13.782933913199501
,'Bangkok','<b>Wangthonglang Home</b>');
$map->addMarkerByCoords(104.5806,16.1585,'Yasothon.','<b>Nong Meen</b>');
$map->addPolyLineByCoords(100.70954024791717,14.670748432532,100.60327649116516
,13.782933913199501,'#980e0e',5,50);
$map->addPolyLineByCoords(100.70954024791717,14.670748432532,104.5806
,16.1585,'#00FF00',5,50);

?>

<html>
<head>
<?php $map->printHeaderJS(); ?>
<?php $map->printMapJS(); ?>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
</head>
<body onload="onLoad()">
<table border=0>
<tr><td>
<?php $map->printMap(); ?>
</td>

</tr>
</table>
</body>
</html>

More info
http://www.phpinsider.com/php/code/GoogleMapAPI/

Loupe.js magnifer zoom images

28 Jun

Posted by: admin in: images, javascript, zoom

Demo
move magnifer to see zoom images

Loupe.js and Loupe.png allows you to add a loupe (magnifier) to images on your webpages.
It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing.

how to use


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="expires" content="Fri, 27 Jul 2007 12:00:00 GMT">
<meta http-equiv="imagetoolbar" content="no">
<title>Caribbean</title>
<script type="text/javascript">
// path to "loupe.png"
// var loupePath = "";
</script>
<script src="loupe.js" type="text/javascript"></script>
<!--[if gte IE 6]>
<script type="text/javascript">
	var loupePath = "vml/";
</script>
<script src="vml/loupe.js" type="text/javascript"></script>
<![endif]–>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		 	font-family: georgia,serif;
		 	font-style: italic;
			color: gray;
			background: white;
		}
		#content {
			padding: 0;
			margin-left: 84px;
			margin-top: 40px;
			width: 550px;
		}
		#header {
		 	font-weight: normal;
		}
	</style>
</head>
<body>
<div id="content">
<h2 id="header">Where are the Pirates of the Caribbean?</h2>
<div style="float: left; width:356px; height:205px; background:url(images/caribbean/small.jpg)
no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<img id="caribbean" onLoad="initLoupe(this.id,true,773,364);" src="images/caribbean/big.jpg"
style="cursor:wait;" width="356" height="205" alt="large image" border="0" />
</div><small>
</small></div>

</body>
</html>

more info
http://www.netzgesta.de/loupe/

Demo
Xray

Read the rest of this entry »

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

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

Previous Entries

Time

Mp3

Msn status

  • manon2029@hotmail.com is

Chat with Meeh

Search

Donate

    If you find an article useful, then please make a donation.

หมวดหมู่

Archives

UserOnline

Counter

  • Visitors today: 36
  • Visitors yesterday: 83
  • Visitors per day: 476
  • Max. visitors per day: 255
  • Total page views: 166,319
  • Page views of this page: 476
  • Currently online: 1
  • Max. online: 36
  • Total visitors: 35,955
  • counterStatistics

Meta

Tags

A design creation of Design Disease

Copyright © 2007 - Asterisk ajax javascript jquery php resource - is proudly powered by WordPress
InSense 1.0 Theme by Design Disease brought to you by HostGator Web Hosting.