Insanityville

jQuery link simulator

By in-sanity on January 7th, 2009

I thought I make a small number of posts on javascript in general, especially jQuery.

Personally, I find this framework to be an excellent tool for quick fixes, but also to create complete AJAX interfaces.

A fix which I recently made was the creation of a link without using the "a" tag in HTML. This can be achieved easily, without modifying the existing DOM. I used this method because it does not change the structure of a DOM document that would otherwise have to change other JavaScript functions that provided different features.

It is self understood that you should include the framework jQuery in your page. jQuery can be downloaded here.

I continue below to describe what steps you must follow to obtain this type of fix.

HTML

<p id="simuLink"> Buy design </ p>

The DOM can be any other, not necessarily to be p. It can be div, span, h, td, etc..

To have the appearance of a link for this element, add a CSS definition:

CSS

. Simulink (
     cursor: pointer;
     font-weight: bold;
     text-decoration: underline;
)

Now move on to the beautiful part, to implement the functionality with the jQuery framework.

JAVASCRIPT

$ (document). ready (function () ( // when the page loads
     $ ( ‘p # Simulink’). click (function () ( // atach the click event to the element having the given ID
         document.location = ‘http://url’; / / replace the URL to as it is the landing page of your link
     ));
));

JavaScript code is quite simple and I does not require further explanation.

It can’t be any easier. I found this method to be the easiest way to bypass many problems of selecting a single item in a div element, for example, when you need to have more links in that div element.

Show me love

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks