Showing posts with label Javascript Tutorials. Show all posts
Showing posts with label Javascript Tutorials. Show all posts

Tuesday, October 28, 2008

Simple Javascript Clock

<html>

<head>

<title>A Simple Page</title>

<script language="JavaScript">

<!--

function gettime() {

    
var date=  new Date();

    
var hr = date.getHours();

    
var m = date.getMinutes();

    
var s = date.getSeconds();

    
var ampm= "AM";

    
if (hr > 11)

    
{

        
ampm= "PM"

    
}

    
if (hr > 12)

    
{

        
hr -= 12

    
}

    
if(m < 10)

    
{

        
m =  "0" + m

    
}

    
if(s < 10)

    
{

        
s =  "0" + s

    
}

    
document.clockform.clock.value = hr +  ":" + m + ":" + s + " " +ampm;

    
setTimeout( "gettime()",100)

}

//  -->

</script>

</head>

<body onload="gettime()">

<form name="clockform">

<input type="text" name="clock">

</form>

</body>

</html>



Try it online before use
Posted by at No comments:
Labels: , , ,

Simple Javascript Clock

<html>

<head>

<title>A Simple Page</title>

<script language="JavaScript">

<!--

function gettime() {

    
var date=  new Date();

    
var hr = date.getHours();

    
var m = date.getMinutes();

    
var s = date.getSeconds();

    
var ampm= "AM";

    
if (hr > 11)

    
{

        
ampm= "PM"

    
}

    
if (hr > 12)

    
{

        
hr -= 12

    
}

    
if(m < 10)

    
{

        
m =  "0" + m

    
}

    
if(s < 10)

    
{

        
s =  "0" + s

    
}

    
document.clockform.clock.value = hr +  ":" + m + ":" + s + " " +ampm;

    
setTimeout( "gettime()",100)

}

//  -->

</script>

</head>

<body onload="gettime()">

<form name="clockform">

<input type="text" name="clock">

</form>

</body>

</html>


Test online before use
Posted by at No comments:
Labels: , , ,

Thursday, October 2, 2008

Image Cropper JAVASCRIPT DHTML TUTORIALS

Test of applying different dimension restrictions to the cropper


Try it Online Test of applying different dimension restrictions to the cropper
Posted by at No comments:
Labels: , , ,

Wednesday, October 1, 2008

'onContextMenu' Example

 

    


<html>

<head>

<script language="JavaScript">

    
function function2() {

        
alert("This image is copyrighted") 

    
}

</script>

</head>

<body oncontextmenu="function2()">

    
<p>Right click in the image.</p>

    
<img oncontextmenu="function2()" 

         
src="http://www.navioo.com/style/logo.png" 

         
alt="www.navioo.com" 

         
width="99" 

         
height="76">

</body>

</html>

If you want to disable the context menu, 

add the following code to the <body>:

oncontextmenu="function2(); return false;"

      


      



Try it online
Posted by at No comments:
Labels: , , , , , ,

Thursday, September 18, 2008

Drag two Images DHTML TUTORIAL

JAVASCRIPT DHTML TUTORIALS » Page Components » Image Drag »



 <!-- ***********************************************************

Example 6-2

"Dynamic HTML:The Definitive Reference"

2nd Edition

by Danny Goodman

Published by O'Reilly & Associates  ISBN 0-596-00316-1

http://www.oreilly.com

Copyright 2002 Danny Goodman.  All Rights Reserved.

************************************************************ -->

<html> 

<head> 

<title>Drag Image</title> 

<style type="text/css">

  body {font-family:Ariel, sans-serif; text-align:right}

  #imgAWrap {position:absolute; left:50px; top:100px; width:120px; height:90px; 

             border:solid black 1px; z-index:0}

  #imgBWrap {position:absolute; left:110px; top:145px; width:120px; height:90px; 

             border:solid black 1px; z-index:0}

</style>

<script language="JavaScript" type="text/javascript">

/* ***********************************************************

Example 4-3 (DHTMLapi.js)

"Dynamic HTML:The Definitive Reference"

2nd Edition

by Danny Goodman

Published by O'Reilly & Associates  ISBN 1-56592-494-0

http://www.oreilly.com

Copyright 2002 Danny Goodman.  All Rights Reserved.

************************************************************ */

// DHTMLapi.js custom API for cross-platform

// object positioning by Danny Goodman (http://www.dannyg.com).

// Release 2.0. Supports NN4, IE, and W3C DOMs.



// Global variables

var isCSS, isW3C, isIE4, isNN4;

// initialize upon load to let all browsers establish content objects

function initDHTMLAPI() {

    if (document.images) {

        isCSS = (document.body && document.body.style) ? true : false;

        isW3C = (isCSS && document.getElementById) ? true : false;

        isIE4 = (isCSS && document.all) ? true : false;

        isNN4 = (document.layers) ? true : false;

        isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;

    }

}

// set event handler to initialize API

window.onload = initDHTMLAPI;



// Seek nested NN4 layer from string name

function seekLayer(doc, name) {

    var theObj;

    for (var i = 0; i < doc.layers.length; i++) {

        if (doc.layers[i].name == name) {

            theObj = doc.layers[i];

            break;

        }

        // dive into nested layers if necessary

        if (doc.layers[i].document.layers.length > 0) {

            theObj = seekLayer(document.layers[i].document, name);

        }

    }

    return theObj;

}


Read all >>>
Posted by at No comments:
Labels: , ,

Wednesday, September 17, 2008

Easy Grid - Ajax JavaScript

This package can be used to display and data grids using AJAX. It uses Yahoo User interface library Javascript classes to perform AJAX requests. A Javascript script calls Yahoo UI libraries to load the data for the table from the server.
Interactive Grid with Your Own Hands

I am sure being pampered by GUI of desktop applications, users find interfaces of web-applications as extremely uncomfortable. Their notes, probably unexpressed, are timely within AJAX Age. Besides, it is not so difficult to make web-applications more user-friendly. I will not describe whole variety of interface forms in this article, but will concentrate on such an indispensable element as a grid. Almost every web-application needs linear data list management. DB record management of PhpMyAdmin is likely a classical solution in this field. It is a popular solution, but it demands page reloading for every operation, data loss is possible and so on. Let us think about what requirements should be included to be a user-friendly interface should have. The user should have the ability to sort the list by fields, filter the list, the possibility to assign a range of selecting and pagination. With all this going on, only part of the application window should be changed.
Read more >>>
Posted by at No comments:
Labels: , , ,

Monday, September 15, 2008

Yahoo! UI Library - Slider Widget

JAVASCRIPT DHTML TUTORIALS » GUI Components » Slider »

Yahoo! UI Library - Slider Widget - Source code -Download
Yahoo! UI Library - Slider Widget
Posted by at No comments:
Labels: , , ,

Sunday, September 14, 2008

Hide scripts using comments

<html>

<head>

<title>Hide scripts using comments.</title>

<script language="javascript" type="text/javascript">


<!--


lines of JavaScript code here

...


//-->


</script>


</head>

<body>


Page content here...


</body>

</html>





Try it
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)