Hot!Ajax

A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link.

Defaults

Normally this plugin will need very little configuration - although you do need to point it at the element/s on which you wish it to act.

HTML of an element which contains a link whose behaviour you wish the element to inherit. In this case the <li> elements.

<ul class="links"> 

 <li><a href="http://www.fusion.com.au/">Fusion</a></li> 

 <li><a href="http://jquery.com/">jQuery</a></li> 

 <li><a href="http://www.google.com.au/">Google</a></li> 

 </ul>
   

JavaScript in the document head

<script type="text/javascript"src="jquery-1.2.1.pack.js">

</script> 

 <script type="text/javascript" src="jquery.biggerlink.js">

</script>  <script type="text/javascript"> 

 $('.links li').biggerlink(); 

 </script>
   

With JavaScript pop-ups

HTML as above. (Note the added title attributes will be applied to the <li> elements by the plugin).

<ul class="links"> 

 <li><a href="http://www.fusion.com.au/" 

 title="Fusion web site in a new window">Fusion</a></li>

<li><a href="http://jquery.com/" 

 title="The write less, do more, JavaScript library">jQuery</a></li> 

 <li><a href="http://www.google.com.au/" 

 title="More about everything in a new window">Google</a></li> 

</ul>
   

JavaScript. Setting follow to false ensures the link will not be followed by the browser as it would by default; Thus not interferring with the action os JavaScript pop-ups applied to the same link.

<script type="text/javascript"src="jquery-1.2.1.pack.js"></script> 

 <script type="text/javascript" src="jquery.popwindow.js"></script> 

<script type="text/javascript" src="jquery.biggerlink.js"></script> 

 <script type="text/javascript"> 

 $('.links li').popwindow().biggerlink({follow:false}); 

</script>
   

Using custom classes

By default the plugin applies classes to the target elements:

hoverclass - class added to the parent element when hovering over it with you cursor or focusing a link it contains. By default this class is hover.

clickableclass - class added to each selected element which contains at least one link. By default this class is hot. Particularly useful if you wish to make the element appear 'clickable' when the link behaviours are assigned to it.

HTML. Nothing new here:

<ul class="links"> 

 <li><a href="http://www.fusion.com.au/">Fusion</a></li> 

 <li><a href="http://jquery.com/">jQuery</a></li> 

 <li><a href="http://www.google.com.au/">Google</a></li> 

 </ul>
   

JavaScript. If by chance these classes conflict with other classes in your document they may be customised:

<script type="text/javascript"src="jquery-1.2.1.pack.js"></script> 

<script type="text/javascript" src="jquery.biggerlink.js"></script> 

 <script type="text/javascript"> 

 $('.links li').biggerlink({clickableclass:'yum',hoverclass:'roll'}); 

 </script>
   

Worth noting

The plugin will use the URL of the first link within the selected element. If there is a second link with a different URL it’s action will be overridden - using the URL of the first link instead.

Comments (0)

Show/Hide comments

Show/Hide comment form

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment