JAVASCRIPT DHTML TUTORIALS » Ajax Layer » AutoComplete Widgets »
AutoComplete Widget
Showing posts with label Html. Show all posts
Showing posts with label Html. Show all posts
Friday, October 3, 2008
Thursday, October 2, 2008
Image Cropper Online
JAVASCRIPT DHTML TUTORIALS » Page Components » Image Cropper
1 . Preview Cropped Image Preview Cropped Image
2 . Minimum (single axis) dimension test Minimum (single axis) dimension test
3 . Minimum (both axes ) dimension test Minimum (both axes ) dimension test
4 . Fixed ratio test Fixed ratio test
5 . Test of dynamically changing images or removing and re-applying the cropper Test of dynamically changing images or removing and re-applying the cropper
6 . Test of applying different dimension restrictions to the cropper Test of applying different dimension restrictions to the cropper
7 . Test page with relatively positioned wrapper Test page with relatively positioned wrapper
8 . Test page with floating wrapper Test page with floating wrapper
9 . CSS - Absolute positioned (and draggable) test CSS - Absolute positioned (and draggable) test
10 . Loading & displaying co-ordinates (with ratio) of crop area on attachment test Loading & displaying co-ordinates (with ratio) of crop area on attachment test
11 . Loading & displaying co-ordinates of crop area on attachment test Loading & displaying co-ordinates of crop area on attachment test
12 . Basic cropper test Basic cropper test
Try online the examples of Javascript Image Cropper
1 . Preview Cropped Image Preview Cropped Image
2 . Minimum (single axis) dimension test Minimum (single axis) dimension test
3 . Minimum (both axes ) dimension test Minimum (both axes ) dimension test
4 . Fixed ratio test Fixed ratio test
5 . Test of dynamically changing images or removing and re-applying the cropper Test of dynamically changing images or removing and re-applying the cropper
6 . Test of applying different dimension restrictions to the cropper Test of applying different dimension restrictions to the cropper
7 . Test page with relatively positioned wrapper Test page with relatively positioned wrapper
8 . Test page with floating wrapper Test page with floating wrapper
9 . CSS - Absolute positioned (and draggable) test CSS - Absolute positioned (and draggable) test
10 . Loading & displaying co-ordinates (with ratio) of crop area on attachment test Loading & displaying co-ordinates (with ratio) of crop area on attachment test
11 . Loading & displaying co-ordinates of crop area on attachment test Loading & displaying co-ordinates of crop area on attachment test
12 . Basic cropper test Basic cropper test
Try online the examples of Javascript Image Cropper
Wednesday, October 1, 2008
How to animate an element's position using the Motion subclass
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Motion Example - Basic</title>
<style type="text/css">
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
body {
margin:0;
font:small arial;
}
h1 {
color:#666;
margin:0;
font:bold 150% palatino, georgia;
}
#hd img {
vertical-align:middle;
}
#hd h1 {
display:inline;
margin:0 0 0 20px;
vertical-align:middle;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#doc {
margin:10px;
}
#examples {
margin:60px 40px;
}
#examples li {
margin-bottom:1em;
}
#examples li a {
color:#666;
font:85% verdana;
}
#demo {
background:#ccc;
font:100%/1.2em arial;
width:10px;
height:10px;
}
#animation-demo-scroll #demo p {
width:600px;
}
#animation-demo-motion #demo {
color:yellow;
font-size:0;
}
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
background:#ccc;
font:100%/1.2em arial;
width:200px;
height:200px;
}
#animation-demo-colors #demo {
border:3px solid #c3c;
}
#animation-demo-scroll #demo {
width:400px;
height:200px;
overflow:auto;
}
#animation-demo-colors #demo {
}
#target {
background:red;
font-size:0;
position:absolute;
left:300px;top:300px;
width:10px;
height:10px;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Motion('demo', { points: { to: YAHOO.util.Dom.getXY('target') } });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - Basic</h1>
<p>This example demonstrates how to animate an element's position using the Motion subclass.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
<div id="target"></div>
</div>
</body>
</html>
Yui required !!!!
Try it online
<html>
<head>
<title>Motion Example - Basic</title>
<style type="text/css">
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
body {
margin:0;
font:small arial;
}
h1 {
color:#666;
margin:0;
font:bold 150% palatino, georgia;
}
#hd img {
vertical-align:middle;
}
#hd h1 {
display:inline;
margin:0 0 0 20px;
vertical-align:middle;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#doc {
margin:10px;
}
#examples {
margin:60px 40px;
}
#examples li {
margin-bottom:1em;
}
#examples li a {
color:#666;
font:85% verdana;
}
#demo {
background:#ccc;
font:100%/1.2em arial;
width:10px;
height:10px;
}
#animation-demo-scroll #demo p {
width:600px;
}
#animation-demo-motion #demo {
color:yellow;
font-size:0;
}
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
background:#ccc;
font:100%/1.2em arial;
width:200px;
height:200px;
}
#animation-demo-colors #demo {
border:3px solid #c3c;
}
#animation-demo-scroll #demo {
width:400px;
height:200px;
overflow:auto;
}
#animation-demo-colors #demo {
}
#target {
background:red;
font-size:0;
position:absolute;
left:300px;top:300px;
width:10px;
height:10px;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Motion('demo', { points: { to: YAHOO.util.Dom.getXY('target') } });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - Basic</h1>
<p>This example demonstrates how to animate an element's position using the Motion subclass.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
<div id="target"></div>
</div>
</body>
</html>
Yui required !!!!
Try it online
Accessing the Elements of a Form
<HTML>
<HEAD>
<TITLE>Multiform Document Example</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function displayFormData() {
win2=open("","window2")
win2.document.open("text/plain")
win2.document.writeln("This document has "+document.forms.length+" forms.")
var i=0;
var j=0;
for(i=0;i<document.forms.length;++i) {
win2.document.writeln("Form "+i+" has "+ document.forms[i].elements.length+" elements.")
for(j=0;j<document.forms[i].elements.length;++j) {
win2.document.writeln((j+1)+" A "+ document.forms[i].elements[j].type+" element.")
}
}
win2.document.close()
return false
}
// --></SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="nothing" onSubmit="return displayFormData()">
<H2>Form 1</H2>
<P>Text field: <INPUT TYPE="TEXT" NAME="f1-1" VALUE="Sample text"></P>
<P>Password field: <INPUT TYPE="PASSWORD" NAME="f1-2"></P>
<P>Text area field: <TEXTAREA ROWS="4" COLS="30" NAME="f1-3">Text</TEXTAREA></P>
<P><INPUT TYPE="SUBMIT" NAME="f1-4" VALUE="Submit">
<INPUT TYPE="RESET" NAME="f1-5"></P>
</FORM>
<HR>
<FORM>
<H2>Form 2</H2>
<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="1" CHECKED>A</P>
<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="2">B</P>
<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="3">C</P>
<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="1">D</P>
<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="2" CHECKED> E</P>
<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="3">F</P>
<INPUT TYPE="FILE" NAME="f2-3">
</FORM>
<HR>
<FORM>
<H2>Form 3</H2>
<INPUT TYPE="HIDDEN" NAME="f3-1">
<SELECT NAME="f3-2" SIZE="4">
<OPTION VALUE="">Item 1</OPTION>
<OPTION VALUE="">Item 2</OPTION>
<OPTION VALUE="" SELECTED>Item 3</OPTION>
<OPTION VALUE="">Item 4</OPTION>
<OPTION VALUE="">Item 5</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Try Online
Tuesday, September 23, 2008
A simple 'sniffer' that determines browser version and vendor
JAVASCRIPT DHTML TUTORIALS » Development » JavaScript Version »
A simple 'sniffer' that determines browser version and vendor
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
A simple 'sniffer' that determines browser version and vendor
A simple 'sniffer' that determines browser version and vendor
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
A simple 'sniffer' that determines browser version and vendor
Monday, September 22, 2008
Javascript bar chart
Javascript bar chart : Chart : GUI Components JAVASCRIPT DHTML TUTORIALS
http://www.navioo.com/javascript/dhtml/Javascript_bar_chart_1774.html
http://www.navioo.com/javascript/dhtml/Javascript_bar_chart_1774.html
Friday, September 19, 2008
HOW to - DHTML Menu Tutorials
249.7 . Vertical layout menu Vertical layout menu
249.8 . Customizable layout Customizable layout
249.9 . Add/delete menu items Add/delete menu items
249.10 . Build a simple fancy menu Build a simple fancy menu
249.11 . Simple drop-down menu example with layer Simple drop-down menu example with layer
249.13 . Slide out menu with i18N Slide out menu with i18N
249.14 . Menu and submenu
249.15 . Dynamic menu
249.16 . Slide out menu
249.17 . Complete Source Code for the Menu
249.18 . popup menu (content sensitive menu)
249.19 . Menu based on Javascript
249.20 . Menu with sound
Source code and demo online
249.8 . Customizable layout Customizable layout
249.9 . Add/delete menu items Add/delete menu items
249.10 . Build a simple fancy menu Build a simple fancy menu
249.11 . Simple drop-down menu example with layer Simple drop-down menu example with layer
249.13 . Slide out menu with i18N Slide out menu with i18N
249.14 . Menu and submenu
249.15 . Dynamic menu
249.16 . Slide out menu
249.17 . Complete Source Code for the Menu
249.18 . popup menu (content sensitive menu)
249.19 . Menu based on Javascript
249.20 . Menu with sound
Source code and demo online
Tuesday, September 16, 2008
CSS background-position
HTML CSS TUTORIALS » CSS Attributes and Javascript Style Properties » background position »
Try it
background-position
Related in same category :
Try it
background-position
Related in same category :
Subscribe to:
Posts (Atom)
Posts
