Developing (v7+)

Leaving this Site- pop up

Permalink July 03, 2013 at 10:29 AM

Hi, I have a small bank site that is required to have a pop up that alerts people they are leaving the site when any external link is clicked. I find it annoying but nonetheless... when ext link is clicked a warning, "You are leaving etc." with "yes" keep going or "no" stay here.

Is there an addon for this or could I get some advice on what and where to add some code to do it.

Thanks for the help!

Adreco replied on Jul 3, 2013 at 11:54 am Permalink Reply

Hi Gumptech,
I've been able to do this using an add-on http://www.concrete5.org/marketplace/addons/pug-gallery-and-popup-u...
that allows me to display a Stack in a pop-up.
I title the block so it looks like an external link but actually pulls up the Stack where it warns that you are leaving the site and click "GO" to continue (GO being the actual external link)
There is a free stack modal in the marketplace also but it is still beta and may need some tweaking http://www.concrete5.org/marketplace/addons/stack-modal/...

Hope this helps :)

Adrian
Concrete5 Liaison for Arvixe Web Hosting
http://www.arvixe.com/concrete5_hosting...

gumptech replied on Jul 3, 2013 at 6:00 pm Permalink Reply

Thanks for the help Adrian. The block looks nice and worth the money for all that it does, but unless I waste time trying to add some css or javascript it is over kill. I am in beginners learning mode and love finding a simple solution to something I am making hard. Finding a way to popup some text on all external links should be simple...I'd think.
But I have wasted time before wishing I'd spent the money and been done with it. :)

Thanks again, your time to reply with advice is valuable and I appreciate it.

JohntheFish replied on Jul 3, 2013 at 6:46 pm Permalink Reply

Not a solution to the customer requirement, because it won't provide a confirm dialogue, but easy to set up would be my Magic Tipple to pop up a tip or warning based on the text and selectors for exiting links. Maybe your customer could see it as a more ergonomic solution? Users would get the popup tip as soon as they hovered the exit link, but could click it anyway.

gumptech replied on Jul 3, 2013 at 7:55 pm Permalink Reply

John that is pretty neat and nice looking compared to a generic popup box.
Their specs from the auditors/examiners are that when any external link is clicked the visitor becomes liable for their choice by reading the warning and are given a choice to proceed (yes) or decline (no). Obviously a semi-legal way of waiving liability. It appears Magic Tipple does this after clicking, a popup comes up with text and link to proceed.
Can a decline be added without having to (lazily) move up to the X? Does this have to have the "i" next to the word you clicked?
Does this work on images i.e FDIC logo?
The FDIC and HUD logo are on every footer would this be added to the my "footer" stack that has a content block in it?

I ask all those ? for future inquiry, as you note and I tested, it does not work in some/all IE7. I know the bank has clients who still have XP with IE7 on it, which would put me in a web designer's doghouse.
I believe I am still on the lookout for something that sees ALL external links as evil and gives a warning if clicked upon.

Thanks for the help, your work is superb.

JohntheFish replied on Jul 4, 2013 at 4:29 am Permalink Reply

My original thought was to offer an alternative (and more ergonomic) process - show a warning tip when a user hovers on an external link. But still allow them to click that link.

It would mean a change to your customer's (un-ergonomic) process, but still shows a warning when the link is hovered (ie. just before it is clicked).

Getting back to your original process. Magic tipple offers no accept/decline dialog capabilities. Though you can put html links inside a tip, or even I put html code for a red button and link inside a tip.

So you could let the tip take over the click action of an entire link, then pop up a tip containing the same link or a button with the warning message, so achieving the equivalent of having to click the link inside the tip to actually go elsewhere. Clicking again the original link on the page also clears the tip, so only customers who do want to follow the link would have to move the mouse.

(You can see some examples of tips containing links on my c5magic site)

The disadvantage is that, without custom code, you have to provide tips written specifically for each external link. If you only have a few external links, that is easy. If you have 100s, then a generic solution like @mhawke is suggesting would be worth setting up to save work in the long run.

gumptech replied on Jul 3, 2013 at 8:08 pm Permalink Reply

Found this from the "other" cms
http://www.jonahan.com/2011/a-jquery-external-link-disclaimer-alert...

Would this work? Where would I insert this at, and make it work on all pages?

$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
})
.click(function () {
var x=window.confirm('You are about to proceed to an offsite link. Auglaize County has no control over the content of this site. Click OK to proceed.');
var val = false;
if (x)
val = true;
else
val = false;
return val;

});

Thanks

mhawke replied on Jul 3, 2013 at 9:50 pm Permalink Reply

I couldn't get your example to work but this one does:

$(document).ready(function(){
  var root = new RegExp(location.host);
  $('a').each(function(){
    if(root.test($(this).attr('href'))){ 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');
        if(url.length > 1)
        {
          $(this).addClass('external');
        }
    }
});

Viewing 15 lines of 24 lines. View entire code block.

 
$(document).ready(function(){
  var root = new RegExp(location.host);
  $('a').each(function(){
    if(root.test($(this).attr('href'))){ 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');
        if(url.length > 1)
        {
          $(this).addClass('external');
        }
    }
});
 
$('a.external').on('click', function(e){
e.preventDefault();
var answer = confirm("You are about to leave the website of [COMPANY NAME] and view the content of an external website. [COMPANY NAME] cannot be held responsible for the content of external websites.");
    if (answer){
        window.location = $(this).attr('href');
    } 
});
});
<script>

Remember to expand the code box to copy it all.

To test it out, I just added it to my Global nav stack but if I wanted to make this more permanent (and tamper-proof), I'd put the code in a separate JavaScript file and add it in my theme's /elements/header.php file.

UPDATE

Well I spoke too fast. This code thinks that /about/ is external because it doesn't contain the local domain name.

Does anyone know how to determine if the link is relative?

mhawke replied on Jul 4, 2013 at 1:04 am Permalink Reply

Ok after messing around with this, I think this code is decent:

<script type="text/javascript">
$(document).ready(function(){
var root = new RegExp(location.host);
$('a').each(function(){
    if(
        root.test($(this).attr('href')) ||
        ($(this).attr('href').charAt(0)=='/' && $(this).attr('href').charAt(1)!=='/') || 
        $(this).attr('href').charAt(0)=='.' ||
        $(this).attr('href').charAt(0)=='#')
    { 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');

Viewing 15 lines of 30 lines. View entire code block.

 
<script type="text/javascript">
$(document).ready(function(){
 
var root = new RegExp(location.host);
 
$('a').each(function(){
 
    if(
        root.test($(this).attr('href')) ||
        ($(this).attr('href').charAt(0)=='/' && $(this).attr('href').charAt(1)!=='/') || 
        $(this).attr('href').charAt(0)=='.' ||
        $(this).attr('href').charAt(0)=='#')
    { 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');
        if(url.length > 1)
        {
            $(this).addClass('external');
        }
    }
});
 
$('a.external').on('click', function(e){
 
    e.preventDefault();
    var answer = confirm("You are about to leave the website of [COMPANY NAME] and view the content of an external website. [COMPANY NAME] cannot be held responsible for the content of external websites.");
 
    if (answer){
        window.location = $(this).attr('href');
    } 
});
});
</script>

gumptech replied on Jul 4, 2013 at 3:24 am Permalink Reply

Tried it but must be missing something.
put the script into /js/external_link_popup.js

then went into themes/elements/header.php and put
<script type="text/javascript" src="js/external_link_popup.js"></script>
right above the bottom </head> tag

You can laugh I'll take... must be doing something wrong.
Shouldn't all external links pick this up or am I missing a step?

Thanks

JohntheFish replied on Jul 4, 2013 at 4:09 am Permalink Reply

You can use the developer console (or firebug) to tell you if the issue is:
- the script not loading
- the script loads, but does not run
- the script loads, runs and errors
- the script loads, runs, does not error, but does not find the links

All of the above, you should be able to do by using the various developer console inspection tools. See the last section in:
http://www.concrete5.org/documentation/how-tos/editors/getting-help...

However, placing a few console.log statements in the code may be simpler.
http://www.concrete5.org/documentation/how-tos/developers/some-tric...

PS. To quickly add and test small snippets of script, you could also have a look at my jQuickie block.

mhawke replied on Jul 4, 2013 at 7:47 am Permalink Reply

If you are going to include it as an external file you have to remove the surrounding <script></script> tags so the contents of your js/external_link_popup.js file should start with

"$(document).ready(function(){"

and end with

});

Forums

Developing (v7+)

Leaving this Site- pop up

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?