Learn Javascript by Examples: Web

Showing posts with label Web. Show all posts

Tuesday, October 28, 2008

Simple Javascript Clock

<html>

<head>

<title>A Simple Page</title>

<script language="JavaScript">



</script>

</head>

<body onload="gettime()">

<form name="clockform">

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

</form>

</body>

</html>

Test online before use

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

Wednesday, September 24, 2008

Benchmarking AJAX ( JSON vs XML )

JSON produces smaller documents, and JSON is certainly easier to use in JavaScript. XMLHttpRequest parses XML documents for you whereas you have to manually parse JSON, but is parsing JSON slower than parsing XML?

Parsing JSON was 2 -10 times faster than parsing XML!

See the results Benchmarking AJAX ( JSON vs XML )

Friday, September 19, 2008

GUI Components » Calendars

31.1 . Open calendar Open calendar
231.2 . Event Calendar Event Calendar
231.3 . Another DHTML Calendar Another DHTML Calendar
231.4 . Calendar in slide tab Calendar in slide tab
231.5 . Calendar (IE only) Calendar (IE only)
231.6 . Displaying the Calendar Displaying the Calendar
231.7 . A Static Calendar by JavaScript A Static Calendar by JavaScript
231.8 . Dynamic HTML Calendar Dynamic HTML Calendar
231.9 . A Dynamic Calendar Table A Dynamic Calendar Table
231.10 . Building a Calculator Building a Calculator
231.11 . Month Calendar (2) Month Calendar (2)
231.12 . Date Time Picker Date Time Picker
231.13 . Another Calendar Another Calendar
231.14 . Fancy Calendar Fancy Calendar
231.15 . Calendar with image for each month Calendar with image for each month
231.16 . Calendar with different theme Calendar with different theme
231.20 . DHTML Calendar for the impatient DHTML Calendar for the impatient

All Javascript Calendars

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

Tuesday, September 16, 2008

HTML : CSS a.class

HTML CSS TUTORIALS » CSS Attributes and Javascript Style Properties » a.class »

Tutorials about HTML : CSS a.class Use a

Related in same category :