Solved

JQuery replacement of closing hyperlink tag if http is in the href tag

Posted on 2012-12-20
2
476 Views
Last Modified: 2012-12-20
I've been recently asked to modifiy how we redirect users from a site.  Currently we use a url variable on the asp .net page to redirect the user.  We validate and encode the data, but we were asked to make sure we know where we are directing the site.  Since it is virtually impossible to know that every site is valid when you allow a URL parameter to accept the target page, I need to come up with a different solution.

One thought would be to use javascript or Jquery to look at every link on the page and to determine if it includes http in the href.  If it does, then replace the closing tag with an image and some text that is hidden until hovered over.  I've got the code for the image and the hover, I just don't know how to implement the replacement of the closing </a> tag with the info we need to insert.

So for example, the desired action would be: <a href='http://www.google.com'>Google</a> would render to this:

<a href='http://www.google.com'>Google</a> <span class="dropt" title="Redirect Disclaimer"><img src='images/redirect.png' title='Redirect Disclaimer'/><span style="width:350px;">Text of the Disclaimer Here </span></span>


Here is the CSS to have the text show normally, and to appear when hovered over

span.dropt {/*border-bottom: thin dotted;*/ /*background: #ffeedd; */
      text-transform: None !important; float:right;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 7%; background: #ffffff;}
span.dropt:hover span.rightside {left: 45%; background: #ffffff;}
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;}
0
Comment
Question by:atljarman
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38710344
Test page : http://jsfiddle.net/YykXJ/
Using :
$("a").filter(function() { return $(this).attr("href").indexOf("http")==0; }).after('<span class="dropt" title="Redirect Disclaimer"><img src='images/redirect.png' title='Redirect Disclaimer'/><span style="width:350px;">Text of the Disclaimer Here </span></span>');

Open in new window

0
 

Author Closing Comment

by:atljarman
ID: 38710431
Exactly what i needed.  Thank you.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question