Icontem

Genie Alert: Customized Javascript Alert

Recommend this page to a friend!
  Info   Screenshots Screenshots   View files View files (13)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2011-05-18 (5 years ago) RSS 2.0 feedNot enough user ratingsTotal: 347 All time: 101 This week: 22Up
Version License JavaScript version Categories
genie-alert 1.0GNU General Publi...2.0HTML
Description Author

This object can display alert messages similar to JavaScript alert windows.

It creates div elements to display alert messages that appear centered in the current browser window.

This object also creates a div element that covers the whole browser window so the alert element is modal, i.e. the user can only access to the rest of the page when the alert window is closed.

The alert window can have custom buttons. Given callback functions can be called when the user clicks on each of the alert window buttons.

The title and the icon of the alert window are also configurable.

Picture of Prakash Mohankumar
Name: Prakash Mohankumar <contact>
Classes: 1 package by
Country: India India

Details
The JavaScript Source at https://github.com/prakashm88/geniealert and http://code.google.com/p/geniealert/
Created by: Prakash Mohankumar | http://itechgenie.com/ 

GenieAlert - Customized Javascript Alert
This product is distributed under the GNU General Public License Version 2 (License.txt)
Release date: 27th March 2011

GenieAlert is a customized Alert alternated for the javascript alert box. 

The GenieAlert provides the features to add custom buttons and functions to be called upon click of each. The Title and the alert icon to be disaplyed can also be configured as per the user need. 

Note: Note the default alert box of the javascript will be completely overridden by this utility.

USAGE:

1. Include the geniealert.inc.js and style.css in the header.
	<script type="text/javascript" src="geniealert.inc.js" />
	<link href="style.css" rel="stylesheet" type="text/css" />
2. Place all the images in the "images" folder.
3. Arguments for the customized alert, Alert Message, Array of Button names, Array of function names (with the arguments if necessary), Title for the alert window, URL for the image to be show in the alert window.
4. On Calling the default show method without arguments the alert window with default title as "Alert!" and an "information" icon will be shown.
5. Create a Array of Text to be shown in the Alert Box, Create Array of function names to be called when the corresponding buttons are clciked, a Title for the Alert and the URl of the image to be shown inside the alertbox. (Make sure the image is 32px X 32px).
6. Call the function as follows. 

<script type="text/javascript" >

// ARGS: 
// title - Title to be shows in the alert window.
// buttonLabels - Array of Buttons labels to be shown in the Alert Box (accepts null).
// buttonFunctions - Array of Function names to be called when the corresponding buttons are clicked  (accepts null).
// image - URL for the image to be shown insode the alert box (accepts null).

// METHODS:
// show(String) - Fires the GenieAlert showing the Alert window in the screen. This will disable all the other items in the page and enabling only the buttons in the alert window.

// Example: 

// Create an instance of the GenieAlert. This can be done inside a function to retain the scope of the alert window.
var genieAlert = new GenieAlert();

function YourFunctionName()
{

genieAlert.title = "Sample Alert Box" ;  // Title for the Alert window.
genieAlert.buttonLabels = ["Yes", "No", "Cancel"] ;  // Array of Button Labels to be shown in the alert window.
genieAlert.buttonFunctions = ["YesFunction()", "NoFunction()", "CancelFunction()"] ;  // Array of function names to be called while respective buttons (Buttons labels in the same index of 'buttonLabels') are clicked.
genieAlert.image = "images/alert.png"  // URL of the image location to be shown in the Alert window.
genieAlert.show("Click on the following buttons to call the corresponding methods.");  // fire the alert window with the message,

}

function YesFunction()
{
    // Your Code here 
}

function NoFunction()
{
    // Your Code here 
}

function CancelFunction()
{
   // Your Code here 
}

7. Pressing Escape key will close the Alert window without firing any further actions.

// Note: Older browser will see standard alerts boxes only.

</script>
Screenshots  
  • images/screenshot.png
  Files folder image Files  
File Role Description
Files folder imageimages (8 files)
Plain text file geniealert.inc.js Class GenieAlert class file
Accessible without login Plain text file LICENSE.txt Lic. LICENSE
Accessible without login Plain text file readme.txt Doc. Readme file
Accessible without login Plain text file sample.html Example Sample file for GenieAlert implementation
Accessible without login Plain text file style.css Data Css for the alert window

  Files folder image Files  /  images  
File Role Description
  Accessible without login Image file alert.png Icon alert icon
  Accessible without login Image file button.png Icon button background
  Accessible without login Image file error.png Icon Error icon
  Accessible without login Image file h-left.png Icon header-left
  Accessible without login Image file h-middle.png Icon header-middle
  Accessible without login Image file h-right.png Icon header-right
  Accessible without login Image file info.png Icon Information icon
  Accessible without login Image file trans.png Icon Background image for the alert window

 Version Control Unique User Downloads Download Rankings  
 0%
Total:347
This week:0
All time:101
This week:22Up