Archive for the ‘javascript’ Category

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

1210 Comments

Reflex.js 1.2

25 Jun

Posted by: admin in: css, images, javascript

Demo

Reflex.js 1.2 allows you to add a Cover Flow? effect (including reflection) to images on your webpages. *Cover Flow is a trademark of Apple Inc.. It uses unobtrusive javascript to keep your code clean.

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

How to use


<html>
<head>
<title>Reflex.js (with IE 6/7 support)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="reflex.js"></script>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.demo { float: left; padding: 5px; }
</style>
</head>
<body>
<div class="demo"><a href="images/left.jpg">
<img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></a>
<small><br>"<tt>reflex iopacity50</tt>"</small></div>
<div class="demo"><a href="images/none.jpg">
<img src="images/none.jpg" width="200" class="reflex iopacity75" alt="" /></a>
<small><br>"<tt>reflex iopacity75</tt>"</small></div>
<div class="demo"><a href="images/right.jpg">
<img src="images/right.jpg" width="200" class="reflex iopacity25" alt="" /></a>
<small><br>"<tt>reflex iopacity25</tt>"</small></div>
</body>
</html>

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

1248 Comments

Filmed.js

25 Jun

Posted by: admin in: css, images, javascript

Demo

Filmed.js 1.1 allows you to add film strips and shadow to images on your webpages (alternatively: slided.js). It uses unobtrusive javascript to keep your code clean.

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

How to use


<html>

<head>

<title>Filmed.js (with IE 6/7 support)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-language" content="en">
	<meta http-equiv="imagetoolbar" content="no">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<script type="text/javascript" src="filmed.js"></script>

	<meta http-equiv="Content-Style-Type" content="text/css">
</head>

<body>
<table summary="">
<tr><td valign="top" style="padding-bottom: 1em; white-space: nowrap;">
<img src="images/film.jpg" border="0" class="filmed ishine30" alt="" />
</td>
<td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;">
<img src="images/girl.jpg"  class="filmed ishadow50">
</td></tr>
</table>
</body>

</html>

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

1431 Comments

Glossy.js 1.4

25 Jun

Posted by: admin in: css, images, javascript

Glossy.js 1.4 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). It uses unobtrusive javascript to keep your code clean.

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

CVI-lab: Get a fast impression of the effects and their illustration qualities.

how to use


<html>
<head>
<title>Glossy.js (with IE 6/7 support)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<script type="text/javascript" src="glossy.js"></script>
<style type="text/css">
<!--
.style {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }
-->
</style>
</head>
<body>
<table>
<tr>
<td align="center" valign="middle">
<span class="style"><img src="images/3.jpg" border="0"><br>
  not use</span></td>
<td align="center" valign="middle"><span class="style">
<img src="images/3.jpg" border="0" class="glossy" alt="glossy.js"><br>
  use</span></td>
</tr>
</table>
</body>
</html>

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

1561 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/

2329 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/

1049 Comments

Previous Entries 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 (26)
loading (1)
mp3 (1)
mp4 (1)
MSN (1)
mysql (5)
php (21)
Uncategorized (13)
upload (2)
video (1)
windows (1)
Zaptel (5)
zoom (1)

UserOnline

14 Users Online
Users: 14 Guests

Counter

Visitors today: 185
Visitors yesterday: 535
Visitors per day: 221
Max. visitors per day: 665
Total page views: 749,936
Page views of this page: 221
Currently online: 8
Max. online: 192
Total visitors: 157,602
Statistics

Asterisk ajax javascript jquery php resource

Archive for the ‘javascript’ Category

Jeditable - Edit In Place Plugin For jQuery

Reflex.js 1.2

Filmed.js

Glossy.js 1.4

Jquery Submit Form

Busy.js 1.0

Time

Mp3

Msn status

Chat with Meeh

Search

Donate

หมวดหมู่

Archives

UserOnline

Counter

Meta

Tags

A design creation of Design Disease