[Pro] Pop up warning when link is clicked

Graeme · October 29, 2012, 2:40pm

Hi All,

One of our clients has asked for a pop up alert to come up when an external link is clicked. This is for some regulatory thing to say 'You are now leaving the site of…"

Anyone know how to do this?

The said link is the ‘Latest News’ HTML markup on the bottom right.

Thanks,

Graeme

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 29, 2012, 11:11pm

The said link is the ‘Latest News’ HTML markup on the bottom right.

Of what?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 29, 2012, 11:24pm

Apply Protaculous to the page. Choose prototype-packed from the Function picker. Click on the top Function Body button and paste in the following:

var here = window.location.hostname;
$$('a[href]').reject(function(elm){
	return (elm.href.hostname == here);
}).invoke('observe', 'click', function(evt){
	evt.stop();
	var msg = 'You are about to leave this site.' +
	"nn" +
	'Are you sure you want to do that?';
	if(confirm(msg)){
		window.location.href = elm.href;
	}
});

That should kink every outbound link on the page to display the confirmation dialog.

Walter

On Oct 29, 2012, at 10:40 AM, Graeme wrote:

Hi All,

One of our clients has asked for a pop up alert to come up when an external link is clicked. This is for some regulatory thing to say 'You are now leaving the site of…"

Anyone know how to do this?

The said link is the ‘Latest News’ HTML markup on the bottom right.

Thanks,

Graeme

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 30, 2012, 12:29am

Hi Walter

It seems to give the error on every link whether outbound or not.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 30, 2012, 12:47am

Are you testing on your Mac or on the server? (I haven’t tried it in either place, wrote it off the top of my head.)

Walter

On Oct 29, 2012, at 8:29 PM, DeltaDave wrote:

Hi Walter

It seems to give the error on every link whether outbound or not.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 30, 2012, 12:59am

I can’t see why it’s acting this way. I guess the .hostname helper in JavaScript isn’t doing what I expect it to.

Walter

On Oct 29, 2012, at 8:29 PM, DeltaDave wrote:

Hi Walter

It seems to give the error on every link whether outbound or not.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 30, 2012, 1:07am

Are you testing on your Mac or on the server?

Server

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Graeme · October 30, 2012, 10:08am

Hi All,

Sorry, the link is http://www.taylorcarmichael.co.uk/

Would the protaculous option be the best solution?

Graeme

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 30, 2012, 2:09pm

Not until I figure out what went wrong with it. Dave pointed out (correctly) that it doesn’t work yet. window.location.hostname is not working the way I thought it would. The basic premise is there, I just need to figure out what to do for the test that decides if a link is local or not.

Walter

On Oct 30, 2012, at 6:08 AM, Graeme wrote:

Hi All,

Sorry, the link is http://www.taylorcarmichael.co.uk/

Would the protaculous option be the best solution?

Graeme

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 30, 2012, 5:22pm

What about a slightly different approach. I found this bit of jQuery

window.onbeforeunload = function() {
    return "You're leaving the site.";
};
$(document).ready(function() {
    $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
});

Not quite sure how to translate that into script/protaculous but it does require the rel=“ext” to be added via Item Extended on external links.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 30, 2012, 5:51pm

Onbeforeunload fires before every page change. Same issue.

Walter

On Oct 30, 2012, at 1:22 PM, DeltaDave wrote:

What about a slightly different approach. I found this bit of jQuery
window.onbeforeunload = function() {
   return "You're leaving the site.";
};
$(document).ready(function() {
   $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
});
Not quite sure how to translate that into script/protaculous but it does require the rel=“ext” to be added via Item Extended on external links.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 30, 2012, 6:23pm

Okay, this works, tested locally and on server:

var here = window.location.protocol + '//' + 
  window.location.hostname;
$$('a[href]').reject(function(elm){
  return (elm.href.include(here));
}).invoke('observe', 'click', function(evt){
  evt.stop();
  var msg = 'You are about to leave this site.' +
  "nn" +
  'Are you sure you want to do that?';
  if(confirm(msg)){
    window.location.href = this.href;
  }
});

Walter

On Oct 30, 2012, at 1:51 PM, Walter Lee Davis wrote:

Onbeforeunload fires before every page change. Same issue.

Walter

On Oct 30, 2012, at 1:22 PM, DeltaDave wrote:
What about a slightly different approach. I found this bit of jQuery
window.onbeforeunload = function() {
  return "You're leaving the site.";
};
$(document).ready(function() {
  $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
});
Not quite sure how to translate that into script/protaculous but it does require the rel=“ext” to be added via Item Extended on external links.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 30, 2012, 6:41pm

Onbeforeunload fires before every page change.

Sure - but using the qualifier should prevent that.

$('a[rel!=ext]').click(function() { window.onbeforeunload = null; });

Moot anyway as your latest version does the job and is easier to implement.

Another solution for the war chest.

Thanks Walter

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 30, 2012, 7:25pm

Sure, if you want to go through and add a rel attribute in Freeway to each external link, that’s another way to do it. In Prototype, it would be this simple:

$$('a[rel*="ext"]').invoke('observe','click', function(evt){
	evt.stop();
	if(confirm('your message'))
	window.location.href = this.href;
});

But then you have to hunt down the links you want to exhibit this behavior and mark them up with a rel attribute.

Walter

On Oct 30, 2012, at 2:41 PM, DeltaDave wrote:

Onbeforeunload fires before every page change.

Sure - but using the qualifier should prevent that.
$('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
Moot anyway as your latest version does the job and is easier to implement.

Another solution for the war chest.

Thanks Walter

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 30, 2012, 7:42pm

All useful info - I am sure I will find a use for it at some point.

Thanks

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim3 · October 30, 2012, 8:08pm

Here’s one I wrote earlier that should trap all external links (links to _blank targets or absolute links) and pop a confirmation in front of the user before they go any further. Annoying, functional and lightweight.
http://www.freewayactions.com/code/?f=Confirm+Outbound+Links.txt
Regards,
Tim.

On 30 Oct 2012, at 19:42, DeltaDave wrote:

All useful info - I am sure I will find a use for it at some point.

FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Graeme · November 6, 2012, 12:49pm

All looks good.
How do you implement your code Tim?

Thanks,

Graeme

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim3 · November 6, 2012, 1:03pm

Hi Graeme,
Copy the code on that page and paste it into your Freeway page/master page using Page > HTML Markup > Before .
Regards,
Tim.

On 6 Nov 2012, at 12:49, Graeme wrote:

How do you implement your code Tim?

Experienced Freeway designer for hire - http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options