about:jerone

Intro

LinkAlert is a jQuery plugin that makes it easy to detect which type of link it is. If it's a link to a pdf file or a link to a ftp location, this plugin will detect it and put a regornizable icon beside it.

There are two situations available for showing what for link it is; inline (beside the link) or beside your mouse pointer when you hover over it. Offcourse you can choose also both options.

Besides this plugin already contains a lot regornizable links, you can easaly add your own or customize an excisting one.

Some of the features are:

• Detects protocols, extension and custom conditions.
• Already detects all common links + a few others.
• Easy to add your own conditions or customize an existing one.
• No style is added in the script itself, so all is fully changable with CSS.
• Cross browser. Tested working in all major browsers: Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4. It should work with newer browsers and may work with older browsers, no promise until tested.

Example

Click here to open another page for an example.

Options

• linkAlert	Datatype:	jQuery plugin	Default:	-
  	Returns:	jQuery	Status:	Optional

  Description: The main function to execute LinkAlert.
  Example:

  $.LinkAlert();

  Arguments:

  • options	Datatype:	Object	Default:	-
    	Returns:	-	Status:	Optional

    Description: Some optional options for more features.
    Example:-
    Options:

    • situation	Datatype:	Integer	Default:	3
      	Returns:	-	Status:	Optional

      Description: The location where you want to add the link icons:

      • 0 = None
      • 1 = Inline, after the link
      • 2 = Beside your mouse
      • # = Both (# or any other value)
      Example: The following example only has the icons inline.

      $.LinkAlert({ situation: 1 });

    • folder	Datatype:	String	Default:	""
      	Returns:	-	Status:	Optional

      Description: The location where all icons are storred.
      Example:

      $.LinkAlert({ folder: "images/" });

    • mouseOffset	Datatype:	Array [ Integers ]	Default:	[15, 10]
      	Returns:	-	Status:	Optional

      Description: The position offset from your mouse pointer in pixels ([ x-as , y-as ]).
      The first number is taken horizontally from the left of the mouse pointer.
      The second number is taken vertically form the top of the mouse pointer.
      It is possible to give it a negative number, which will mirror the location of the icon from it's normal situation.
      Example:

      $.LinkAlert({ mouseOffset: [10, 20] });

    • protocols	Datatype:	Object	Default:	-
      	Returns:	-	Status:	Optional

      extensions	Datatype:	Object	Default:	-
      	Returns:	-	Status:	Optional

      conditions	Datatype:	Object	Default:	-
      	Returns:	-	Status:	Optional

      Description:

      The options protocols, extensions and conditions consists of multiple conditions a link has to comply.

      Read on the usage tab on how to override or delete an existing match.

      Example:

      An example for a protocol:

      "testKey1": { match: "testMatch:*", image: "testImage1.png" },

      An example for a extension:

      "testKey2": { match: "*.testMatch", image: "testImage2.png" },

      An example for a condition:

      "testKey3": { match: function(link) {
      	return !!link.getAttribute("testMatch"); 
      }, image: "testImage3.png" },

      • key	Datatype:	Object Key	Default:	-
        	Returns:	-	Status:	Mandatory

        Description: The key should be an unique object key. It's used in both the image title as the image alternative text (alt), so not to long names has preference.
        Example:

        "testKey": { match: "testMatch:*", image: "testImage.png" },

        • match	Datatype:	String / RegExp / Function	Default:	-
          	Returns:	Boolean	Status:	Mandatory

          Description:

          The match is the actual condition the link has to comply.
          It can be 3 datatypes:

          • String - Text that will match the link. All text is written one after another, separated by a comma (,).
            There's one special treatment for the "*" (asterisk) character, which matches every character prior to there or from there on.
          • RegExp - For advanced users there's the option to use a RegExp for matching.
          • Function - A function can also be used for more control for a match. The function should always return a boolean.
            There's one parameter passed to the function, which is the currently scanned link.
          Example:

          An example for a String:

          match: "irc:*,ircs*",

          An example for a RegExp:

          match: /\.xml([\#\?].*)?$/,

          An example for a Function:

          match: function(link) {
          	return !!link.getAttribute("target") && link.getAttribute("target").match(/^(_blank)|(_new)|(_newwindow)$/i); 
          },

          Please note the part ([\#\?].*)? in the RegExp for extensions. An extension always commes last, but with links it's possible to add hashes or searches at the end. This means the extension isn't last anymore, so it should be stripped out.
          Another reason for adding this, is that they can contain all kind of text which can comply to your match.

        • image	Datatype:	String	Default:	-
          	Returns:	-	Status:	Mandatory

          Description:

          This is the image that reflects a match.

          A transparent image is preferred.

          Example:

          image: "javascript.png",

        • continu	Datatype:	Boolean	Default:	false
          	Returns:	-	Status:	Optional

          Description: When a match is found the search for others is stopped. With this option set to true the search isn't stopped and more matches can be found.
          Example:

          continu: true,

Usage

Place the following code in the head of your page.

<!-- LinkAlert style -->
<style type="text/css">
	span.linkAlertSpan { }
	div.linkAlertDiv { }
	img.linkAlertImg {
		border: 0 none;
	}
</style>

<!-- Mandatory JavaScript files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-linkalert.js"></script>

<!-- LinkAlert definition -->
<script type="text/javascript">
	(function($) {
		$(function() {
			$.LinkAlert({ folder: "images/" });
		});
	})(jQuery);
</script>

The LinkAlert plugin must be called after the document is loaded.

Please note that a new protocols, extensions or conditions will be added to the existing list.

If you want to delete a sertain match, you should override the sertain key with null. That can be done in 2 ways:

$.LinkAlert.defaults.conditions["External"] = null;

$.LinkAlert({ conditions: { "External": null} });

If you want to override a sertain match, you should override the sertain key with the new value. That can again be done in 2 ways:

$.LinkAlert.defaults.conditions["External"].match = "new value";

$.LinkAlert({ conditions: { "External": { match: "new value"}} });

Download

A zip archive for this plugin is available here: jquery-linkalert-1.1.zip (size: 50kb).

The zip archive contains the following files:

• jquery-linkalert.js - actual plugin (size: 7kb).
• jquery-linkalert-min.js - minified plugin version (size: 6kb).
• jquery-linkalert-vsdoc.js - VSDoc documentation file (size: 0kb).
• jquery-linkalert.html - clean example page (size: 20kb).
• all needed images (size: 44kb).

Older versions

• jquery-linkalert-1.0.1.zip (size: 50kb).
• jquery-linkalert-1.0.zip (size: 48kb).

Changelog

• version 1.1 (09-3-2010):
  • MOD: Updated to jQuery 1.4.2;
  • MOD: Cleaned up code;
• version 1.0.1 (20-7-2009):
  • ADD: Added minified script version;
• version 1.0 (19-7-2009):
  • Initial release;

FAQ

Which versions of jQuery is this plugin compatible with?
Version 1.1 is compatible with jQuery 1.4.2 and higher.
If you want a working version for jQuery 1.3.2 and lower, you can use version 1.0.1.

Which browsers is this plugin compatible with?
Tested working in Internet Explorer 6 - 8, Firefox 1 - 3.6, Opera 9 & 10.5, Chrome 1 - 4 and Safari 4. It should work with newer browsers and can work with older browsers, no promise until tested.

Does the plugin work with any other plugins?
There's no build-in support for other plugins.

Is there a VSDoc file available for this plugin?
Yes, there's a VSDoc file available on the download page.

What is VSDoc?
VSDoc is documentation format for Visual Studio. By using this file information is added to JavaScript Intellisense. This is only available in VS2008 SP1.

Todo

• ...