Hide Anchor link from browser status bar on Mouseover and redirect on Link Click in ASP.Net

Last Reply 4 months ago By dharmendr

Posted 4 months ago

Hi,

Please browse:

https://www.aspforums.net/Threads/ Hide Anchor link from browser status bar on Mouseover in jQuery

"mouse hover (below in browser left side) link" is hidden intentionally. It's useful.

But I don't want to stop href click off.

I mean after clicking link need to go it's href accordingly.

Thanks.

 

Posted 4 months ago

Hi Alauddin,

Refer below modified code.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var link = "";
    window.onload = function () {
        var table = document.getElementsByTagName("table");
        var trs = table[0].getElementsByTagName('tr');
        for (var i = 0; i < trs.length; i++) {
            var tds = trs[i].getElementsByTagName('td');
            var cardno = tds[1].innerText;
            if (cardno.length > 5) {
                var firstFour = cardno.substr(0, 4);
                var lastFour = cardno.substr(cardno.length - 4, cardno.length);
                var middle = cardno.substr(4, cardno.length - 8).replace(/[0-9]/g, "*");
                var newLink = document.createElement("a");
                newLink.setAttribute("Class", "link1");
                newLink.setAttribute("href", "https://www.Test.com/" + cardno);
                text = document.createTextNode(firstFour + middle + lastFour);
                newLink.appendChild(text);
                tds[1].appendChild(newLink);
            }
        }
    }
    $(document).on('click', "a[Class='link1']", function (e) {
        $(this).attr('href', link);
    });
    $(document).on('mouseover', "a[Class='link1']", function (e) {
        $(this).attr('style', 'text-decoration:none');
        link = $(this).attr('href');
        $(this).attr("href", "javascript:;");
    });
    $(document).on('mouseout', "a[Class='link1']", function (e) {
        $(this).removeAttr('style');
        $(this).attr('href', link);
    });
</script>
<div>
    <asp:Label ID="lblTable" runat="server"></asp:Label>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("<table id='01717458720_CardList'>");
        sb.Append("<tr>");
        sb.Append("<td id='product_type'>CREDIT CARD</td>");
        sb.Append("<td id='card_no' abbr='*'>1111234567123456</td>");
        sb.Append("<td id='card_status'>INACTIVE</td>");
        sb.Append("<td id='acct_no'>N/A</td>");
        sb.Append("<td id='name'>Mr. X</td>");
        sb.Append("</tr><tr>");
        sb.Append("<td id='product_type'>DEBIT CARD</td>");
        sb.Append("<td id='card_no'>0000000000000000</td>");
        sb.Append("<td id='card_status'>ACTIVE</td>");
        sb.Append("<td id='acct_no'>55555555555</td>");
        sb.Append("<td id='name'>Mrs. Y</td>");
        sb.Append("</tr></table>");
        lblTable.Text = sb.ToString();
    }
}

Screenshot