Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-12-20
2
Medium Priority
?
492 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

688 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