ollicle.com: Biggerlink – jQuery plugin
Biggerlink – jQuery plugin Purpose Demo Updated for jQuery 1.3 How to use it Download Thanks Purpose A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link. Uses additional css classes to provide the means for the specified element to visually reflect focus and hover states of it's contained link/s. More to read in my blog post: Bigger link: easier clicking with jQuery Requires jQuery version 1.3+ Tested successfully in: Firefox 3.x IE 6,7,8 Safari 3,4 Opera 9 Simple demo With links to more demos. View the source for the CSS, HTML and JavaScript. Basic demonstration Updated for jQuery 1.3 With the release of jQuery 1.3 I have revisited this plugin to improve my understanding of the new event object and fixed some bugs and added some features while I was at it. If you are stuck with jQuery version 1.2 try jquery.biggerlink version 1. How to use it Here are some typical configurations. 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 theelements.
Fusion
jQuery
JavaScript in the document headWith JavaScript pop-ups Using JavaScript to open the link in a new window is one likely scenario where you will to want to prevent the link’s default action. HTML as above. (Note the added title attributes will be applied to the
elements by the plugin).
Fusion
jQuery
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.As of version 2 of biggerlink there is now a new default value for follow of 'auto'. In the code above where biggerlink is bound next after the pop-up event setting follow to false in unnecessary. If the click event before biggerlink returns false biggerlink will not cause the link to be followed. Any other events bound to the link will be triggered normally. Multiple links in each biggerlink container By default biggerlink will force all clicked links in the specified container to trigger the first (master) link instead. Although click events bound to other links will fire as well as any applied to the master link. This is typically useful when the multiple links point to the same href. This version of biggerlink introduces a new setting otherstriggermaster (for want of a shorter name!). By default it is set to true. Setting it to false allows links following the first in the assigned container to be independent. Clicking them will not trigger the click events on the master link. Directly hovering or focusing an 'other' link with otherstriggermaster set to false will add an additional class to the biggerlink container - bl-hover2 by default. HTML. Note each li contains two links:
Fusion
Where Ollie works in Adelaide Google search
jQuery
The write less, do more, JavaScript library Google search
Find out more about everything Google search
JavaScript.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. Version 2 introduces a couple more biggerclass - class added to all the contained elements, unless otherstriggermaster is false, in which case it is only applied to the first (master). hoverclass2 - If otherstriggermaster is set to false this additional class is added to the containing element when links other than the first are moused over or focused. CSS applied with this class can override the styles applied by hoverclass to provide visual hints that the function or destination of this link differs from the first. HTML. Nothing new here:
Fusion
jQuery
JavaScript. If by chance these classes conflict with other classes in your document they may be customised:Things not likely to work as expected Nesting assigned biggerlink elements. Using biggerlink alongside events bound with an inline onclick attribute. Middle or right button mouse clicks on the biggerlink area. Known issues Does not work with jQuery live events Form elements contained by a biggerlink element can become unclickable Download version 2 Uncompressed and commented: jquery.biggerlink.js Minimised: jquery.biggerlink.min.js Thanks Plugin by Oliver Boermans. Made easy by jQuery. The first version of this code was the product of a few Friday afternoons. During this time my employer, Fusion, allows me and my fellow Fusionites to work on the internal projects that interest us most. I’m sharing biggerlink in the hope that it can be further polished by people smarter than me; And to, in a small way, give back to others who have contributed to making jQuery brilliant. This page translated Belorussian translation