Results 1 to 7 of 7

Thread: "connecting you to..." loading graphic/script

  1. #1
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default "connecting you to..." loading graphic/script

    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.
    Last edited by waterprism; 09-10-2011 at 12:40 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    waterprism (09-11-2011)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    waterprism (09-11-2011)

  6. #4
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by waterprism; 09-11-2011 at 06:37 AM.

  7. #5
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by waterprism; 09-11-2011 at 07:22 AM.

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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/s.../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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    waterprism (09-11-2011)

  10. #7
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •