Log in

View Full Version : "connecting you to..." loading graphic/script


waterprism
09-10-2011, 12:27 PM
Hi guys,

I'm looking for a certain effect which I'm pretty sure I've seen before but I can't think of what the technical description for it would be, so bear with me as I kind of describe what I'm thinking about in baby English :). Thanks.

What I want is when someone clicks a certain link/s on my site out to a third-party site, a "connecting you to..." loading image appears for an amount of time I specify and then the link they've clicked opens. Perhaps a description of the planned usage would also help. I have an affiliate site. When someone clicks one of the links to the merchant, I would like an image to appear with a sort of loading gif plus the text "Please hold... connecting you to www.bluewidgets.com." That sits on the screen for a few seconds and then the clickthrough completes as normal. I'm sure I've seen such a thing where sometimes the page darkens and that "connecting you to..." type graphic appears and sometimes without page darkening. Either would be good.

I've searched on things like javascript page transitions and loading page transitions and the like, but they all seem to happen on page load within the site which wouldn't be possible here as I can't access the merchant server! This is a slightly different thing with just a loading graphic displaying for a few seconds and then the clickthrough completing without the actual page load complete requirement per se. It's more a cosmetic effect which allows me to give the user some information as they click out to the merchant. I sort of thought about a meta refreshed page in between the page the visitor is on and the merchant, but that might be clunky when I'm pretty sure there's such a thing as I'm looking for out there!

Would appreciate your thoughts. Thanks a lot.
vwphillips
09-10-2011, 03:23 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Link(a,ms,imgid,imgsrc,txtid,txttext){
clearTimeout(Link.to);
var img=document.getElementById(imgid),txt=document.getElementById(txtid);
if (typeof(img)=='object'&&typeof(imgsrc)=='string'){
img.src=imgsrc;
}
if (typeof(txt)=='object'&&typeof(txttext)=='string'){
txt.innerHTML=txttext;
}
if (typeof(a)=='object'&&a.href&&typeof(ms)=='number'){
Link.to=setTimeout(function(){ document.location=a.href; },ms);
return false;
}
return true;
}
/*]]>*/
</script>

</head>

<body>
<a href="http://www.vicsjavascripts.org.uk/" onclick="return Link(this,2000,'img','http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','txt','linking you to my site');" >Link</a>
<img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
<div id="txt" ></div>
</body>

</html>
jscheuer1
09-10-2011, 03:45 PM
Or perhaps:

http://home.comcast.net/~jscheuer1/side/inmotion/affil_h.htm
waterprism
09-11-2011, 06:27 AM
Guys, those are absolute winners. That's exactly the kind of thing I was looking for. I appreciate your help and your time both. Thanks a lot. Really good stuff there.
waterprism
09-11-2011, 07:02 AM
John, I'd just like to ask you something regarding that script. I notice it uses the rel attribute to call the script. How would I be able to also add a nofollow to the outlink with it already using rel to call the script? I've got a gang of outlinks on the page and don't want a lot of dilution for the page. Or am I being hella noob and you can have two rels per a link like <a href="outlink" rel="affiliate" rel="nofollow">? Thanks a lot.

edit: Okay, I tried something. I changed all instances of the rel attribute in the script to the id attribute so that the links call the script via that attribute, and it seems to work. I also tried class, which one would think would be better, but that doesn't seem to work. Would using id be okay? Or should I use two rels? Or something else :)? Thanks.
jscheuer1
09-11-2011, 03:14 PM
If you're truly running an affiliate site, you don't want to do that. Their link on your page is worthless to them if spiders and robots don't follow it. At least I think it is, certainly worth less to them than a link that the search engines fully crawl.

But, let's just say that for some reason you do want to do that, or use the rel link for one of its other standard uses. The rel attribute is technically reserved for that sort of thing anyway, invalid the way slimbox and other 'box' type scripts use it. We can use another selector. A class would probably be ideal.

Here's a new demo:

http://home.comcast.net/~jscheuer1/side/inmotion/affil_2_h.htm

Notes: I use the class 'affiliate'. However it could be any of your choosing. Just make sure to edit the script in two palces where it mentions affiliate, and to use that class with the links you want to have this treatment. Like all class attributes, and as shown in the demo, multiple class names may be assigned to the same element. This can be useful for styling and other purposes. And, if this is done, the scipt will still work.
waterprism
09-11-2011, 03:58 PM
Hi, John. Thanks. That's really excellent. Works great. Really neat script. I'd like to nofollow the links out to the merchant here so as not to dilute my page. Using class is perfect.

Thanks again for your help. Gave a donation to the Ocean Conservancy. Love the oceans. Also, that site is great. Great design.

Best,

Warren