Showing posts with label Javascript Examples. Show all posts
Showing posts with label Javascript Examples. 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

Thursday, October 2, 2008

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

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

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