onAbort JavaScript (JS) Example: HTML DOM Objects – Event – onAbort JavaScript (JS) Example

Posted by on Friday, February 19, 2010 · Leave a Comment 

onAbort JavaScript (JS) Example: HTML DOM Objects – Event – onAbort JavaScript (JS) Example

Purpose: – Illustrates the for the .

View Other Attributes and Handlers for DOM Events

Prerequistes:

Syntax: ImageObject.onAbort=”yourjavascriptcode()” – Allows you to know when user has stopped the loading of an image by: 1. clicking link; 2. clicking browser stop button; 3. navigating to new page.

Restrictions: None

Notes:

  • You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

  1. Use Visual Web Developer 2008
  2. Create new web site;
    • Click File/New Web Site
    • Select ASP.NET Website Template
    • Select C-Sharp for language
    • name of Web Site could be JavaScript_Syntax.

    3. Folder

  3. Add New folder named “HTMLDOMObjects”
    • Right-click project name in solution explorer;
    • add new folder;
    • name of folder should be: HTMLDOMObjects
  4. Add New subfolder to “HTMLDOMObjects” folder named “DOMEvent”
    • Right-click folder named “HTMLDOMObjects” in solution explorer;
    • add new folder;
    • name of folder should be: DOMEvent
  5. Add New subfolder to “DOMEvent” subfolder named “EventHandlers”
    • Right-click subfolder named “DOMEvent” in solution explorer;
    • add new folder;
    • name of folder should be: EventHandlers
  6. Add HTML Page Named onAbort to EventHandlers subfolder
    • Right-click EventHandlers subfolder;
    • add new item;
    • Select HTML Page
    • HTML Page name should be onAbort
  7. Click on copy code in code below to copy code into HTML Page onAbort.htm
  8. Right-click on HTML page onAbort.htm and select view in browser
View Example In Browser
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: onAbort </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
      //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    DOM Event - EventHandlers   ***
       //*****************************************************
 
       //*****************************************************
       // onAbort
       //*****************************************************
 
       //    SYNTAX:
       //    object.onAbort="yourjavascriptcode()"  Allows you to know when user has 
       //    stopped the loading of an image by:
       //   * Click an anchor.
       //   * Click the browser Stop button.
       //   * Navigate to another page. 
 
    -->
 
    <script type="text/javascript">
        function abortImage() {
            alert('Error: Loading of the image was aborted');
 
 
        }
 
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;">
         To see abort message, do one of the following while image is loading:<br /><br />
         1. Click the browser stop button,<br />
         2. Click link on page, or <br />
         3. Quickly navigate to new page<br /><br />
 
         If image is already loaded, use internet options to delete temporary internet 
         files and refresh page. That will remove image from cache so it will not load too fast next time.</div><br /><br />
 
 
        <a href="http://idealprogrammer.com">IdealProgrammer - click while image is loading</a><br />
        <img src="http://graphics.stanford.edu/~mcammara/wtc-photo.jpg" onabort="abortImage()"/>
 
 
 
 
  </body>
</html>

Filed under Uncategorized · Tagged with , , , ,