A collection of computer systems and programming tips that you may find useful.
 
Brought to you by Craic Computing LLC, a bioinformatics consulting company.

Friday, February 8, 2013

Jquery snippet to disable / enable links on a page

Here are two approaches to hiding all the anchor (a) tags on a page while retaining the html that was contained within the tags. They both use Jquery.

Approach #1 - Remove all the 'a' tags while retaining their content - no way to retrieve the links, etc.

This lets you effectively disable all the links without losing any text. Using the .html() call instead of simply .text() means that any images or other formatting is preserved.

    $("a").each(function() {
      var t = $(this).html();
      $(this).replaceWith(t);
    });

Approach #2 - Reversibly Hide and Show the tags

Replace the 'a' tags with 'span' tags and store the original tag pair in a custom data attribute

Custom data attributes all have the prefix 'data-' followed by a unique name. You can store arbitrary data in these. With this approach I am storing the original 'a' tag pair and its contents.

In the example, my custom data attribute is called 'data-craic' and note that the 'span' tags are given a unique class (I'm using 'hidden-link') that allows you to identify them

To hide/disable the links:

  $("a").each(function() {
    // Get the html within the 'a' tag pair
    var t = $(this).html();
    // Get the entire tag pair as text by wrapping in an in-memory 'p' tag and fetching its html
    var original_tag = $(this).clone().wrap('<p>').parent().html();
    // Replace the 'a' tag with a 'span' - put the original tag in the data attribute
    $(this).replaceWith("<span class='hidden-link' data-craic='" + original_tag + "'>" + t + "</span>"); 
  });

To show/enable the links:

  $(".hidden-link").each(function() {
    // Retrieve the original tag from the data attribute
    var original_tag = this.dataset.craic;
    // Replace the 'span' with it
    $(this).replaceWith(original_tag);
  });

At least in my use cases I have not had to encode the original 'a' tag pairs but base64 encoding might be a good idea to avoid any possible unintended consequences.

Custom data attributes are extremely useful and were the perfect to solution to this problem

You can find a self contained web page with these scripts at https://gist.github.com/craic/4987192


2 comments:

Unknown said...
This comment has been removed by a blog administrator.
Unknown said...

多見。除了發病率高,ED還有另一個顯著特點,那壯陽藥 壯陽藥品 犀利士 威而鋼 威而鋼哪裡買 犀利士 犀利士 壯陽藥品 壯陽藥就是就診率低。
識到ED對生活和家庭的危害。專業醫生指出壯陽藥 威而鋼 壯陽藥 犀利士 犀利士 犀利士專賣 犀利士哪裡買 犀利士5mg價格 壯陽藥品 犀利士專賣 威而鋼 壯陽藥 威而鋼專賣店 犀利士哪裡買,若
引起的。一般來說,ED可分為器質性、心犀利士 犀利士 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 犀利士 壯陽藥品去哪買 犀利士 犀利士 犀利士 犀利士 犀利士 威而鋼 犀利士理性和混合性。顧名思義,器質性ED的病因在于其他方
先期信號。如果能在早期就重視ED的診療威而鋼 犀利士哪裡買 壯陽藥品 壯陽藥 威而鋼哪裡買 犀利士專賣 威而鋼 威而鋼哪裡買 威而鋼專賣店 威而鋼藥局 情色貼圖,可能會發現潛在的不利身心健康的因素,從而避免其他疾患。更重要的是,ED還會在患者與配偶之

Archive of Tips