Let's write a browser inside the browser, in Javascript!
Popup for External Links (jquery)
I have been asked by multiple clients lately to provide a feature that will cause ANY link to an external site, alert the user that they are leaving the site before they go. At first I was unsure how to do this, but jQuery made it beautiful, as it does most things.
Step 1. Download jQuery
Step 2. Download jQuery UI
Step 3. create a file with the following code as its contents.
$(document).ready(function() { // Creating custom :external selector $.expr[':'].external = function(obj){ return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname); }; // Add 'external' CSS class to all external links $('a:external').addClass('external'); $('.external').click(function() { var link = $(this).attr('href'); $('<div>You are currently leaving our site, and headed towards: <br /> '+(link)+' <br /> are you sure you want to proceed?</div>').dialog({ title: "External Link", modal : true, overlay: { backgroundColor: '#000', opacity: 0.5 }, buttons: { 'Okay': function() { $(this).dialog('close').remove(); window.open(link); }, 'Cancel': function() { $(this).dialog('close').remove(); return false; } } }); return false; }); });
Step 4. Include those three files on your site. Remember jQuery first, then UI, then the script pasted above.
Step 5. If you want to use the theme that you downloaded bundled with jQuery UI, you will need to include the .css file from that theme. When you download UI, you get a CSS folder, inside that is a theme folder, and inside that is your css file.
This is a screenshot of what it looks like with the start theme:
Comments
20 July 2009
48 weeks 6 days
Sweet! This would be a great addon to Drupal's External Links module, which wraps the logic of determining external links in an admin UI.
I need to start using jQuery UI more often...modal boxes are so much better than confirm()!
This could be especially useful for organizations with separate c3/c4 sites. The IRS requires the sites be clearly differentiated, so a popup that would inform users they were leaving one for the other would allow for copious linking while making the legal distinction clear.
Dude,this is way sweet.. Thanks and congrats.
This is cool! I'm actually only using the custom :external selector and then using it with the cluetip plugin rather than jQuery UI, but the :external selector is brilliant!
I ran into a little hiccup on a site that is using the obtrusive "javascript:window.print();" as the href value. This was being treated as if it were an external link. So I added a check for "&& !obj.href.match(/^javascript\:/) "
The full custom selector code now looks like:
$.expr[':'].external = function(obj){
return !obj.href.match(/^mailto\:/)
&& !obj.href.match(/^javascript\:/)
&& (obj.hostname != location.hostname);
};
Thanks, Travis!
This is a wonderful way to handle the navigate-away warning.
However, I have a question. I use lots of LinkButton in the ASP.NET page. There is no way to distinguish the LinkButton is pointing to inside URL or outiside URL, since obj.href comes in like javascript:__doPostBack('LinkButton1','').
Do you have any suggestion how to handle PostBack URLs?
I will appreciate your further help.
This could be especially useful for organizations with separate c3/c4 sites. The IRS requires the sites be clearly differentiated, so a popup that would inform users they were leaving one for the other would allow for copious linking while making the legal distinction clear.
http://www.btscene.com
I ran into a little hiccup on a site that is using the obtrusive "javascript:window.print();" as the href value. This was being treated as if it were an external link. So I added a check for "&& !obj.href.match(/^javascript\:/) "
earth4energy
We al using technology, from the very simple one to the more complicated one. We should thanks to the scientist. Link Building Services, buy contextual links
Post new comment