The Daily WTF: Curious Perversions in Information Technology
Welcome to TDWTF Forums Sign in | Join | Help
in Search

Best HTML Link Method

Last post 04-04-2007 3:39 AM by Faxmachinen. 7 replies.
Page 1 of 1 (8 items)
Sort Posts: Previous Next
  • 04-03-2007 2:06 PM

    • Kemp
    • Top 500 Contributor
    • Joined on 09-21-2006
    • Posts 108

    Best HTML Link Method

    I recently came across a site that wouldn't allow me to middle click a link to open it in a new tab, and a right-click didn't present any link-based options (save link as, open in new window/tab, etc etc). I decided to view the source to see what magic they were using and came across this method:

    <span class="dlink" onClick="window.location.href='http://www.example.com'">Link</span>

    This is really dumb. They're basically forcing the user to navigate away from their site, providing no method of open the target in another tab or window, all for the sake of (no doubt) being different and "cool". I guess it's kinda like those sites that use java and flash for things that can be done in basic html or html with a tiny piece of javascript.

    For reference, there was no "protected" content on the source or target sites, and there was no problem with referrer urls.

  • 04-03-2007 2:42 PM In reply to

    Re: Best HTML Link Method

    I've seen stuff like this from people who didn't want the classic "finger" cursor over their links, but the normal pointer instead.  But if the "dlink" style is defining the cursor too....well, i dont know.

     

    ....now time for my similar WTF, many many years ago.  Created a span that said "click here".  Attached an onClick listener to entire document.  onClick compares  the position of the mouse against the span.
    Since I had multiple links, I had two string arrays: aID, which stored the id attribute of the span, and aURL which stored the URL to go to for that span.
    List wasn't sorted or anything, so for every click I did a linear search of aID and compared the mouse coordinates to each span contained therein.

  • 04-03-2007 4:25 PM In reply to

    Re: Best HTML Link Method

    We actually use this method but with a DIV rather than a span.

    Essentially we use CSS to make the dive look like a button by using a background image and use the onclick onmouseover and onmouseout to change the look of the "button".  Needless to say that is a disabled state so we do need to use Javascript to determine if the button is disabled or not and only navigate when enabled.

    The key here though is that it is on a frame inside the rest of the site so you are not navigating away and always have access to the top level menues and such to be able to do what you want.  It is only on content pages this happens. 

    CAPTCHA? We ain't got no CAPTCHA. We don't need no CAPTCHA. We don't need no stinking CAPTCHA!
  • 04-03-2007 8:26 PM In reply to

    • Kemp
    • Top 500 Contributor
    • Joined on 09-21-2006
    • Posts 108

    Re: Best HTML Link Method

    There were no frames, it was just a flat page. And yes, the cursor changed when hovering, and it was just rendered to look like a normal link.
  • 04-03-2007 9:23 PM In reply to

    Re: Best HTML Link Method

    KattMan:

    We actually use this method but with a DIV rather than a span.

    Essentially we use CSS to make the dive look like a button by using a background image and use the onclick onmouseover and onmouseout to change the look of the "button".  Needless to say that is a disabled state so we do need to use Javascript to determine if the button is disabled or not and only navigate when enabled.

    The key here though is that it is on a frame inside the rest of the site so you are not navigating away and always have access to the top level menues and such to be able to do what you want.  It is only on content pages this happens. 



    So why not use a button?

    This kind of thing is my main annoyance with Gmail.
  • 04-04-2007 1:24 AM In reply to

    • Daniel15
    • Top 150 Contributor
    • Joined on 01-27-2007
    • Melbourne, Australia
    • Posts 213

    Re: Best HTML Link Method

    We actually use this method but with a DIV rather than a span.

    Maybe I'm not thinking correctly, but why don't you just style the <a>?
  • 04-04-2007 2:38 AM In reply to

    • rjnewton
    • Not Ranked
    • Joined on 03-12-2007
    • Eugene, Oregon
    • Posts 18

    Re: Best HTML Link Method

    Kemp:

    I recently came across a site that wouldn't allow me to middle click a link to open it in a new tab, and a right-click didn't present any link-based options (save link as, open in new window/tab, etc etc). I decided to view the source to see what magic they were using and came across this method:

    <span class="dlink" onClick="window.location.href='http://www.example.com'">Link</span>

    This is really dumb. They're basically forcing the user to navigate away from their site, providing no method of open the target in another tab or window, all for the sake of (no doubt) being different and "cool". I guess it's kinda like those sites that use java and flash for things that can be done in basic html or html with a tiny piece of javascript.

    For reference, there was no "protected" content on the source or target sites, and there was no problem with referrer urls.

     

    I'd agree that this is a WTF, but having distinctly different tastes in browsing, I find it much less irritating than the converse: sites that insist that evry link must open in a new window or tab.  If I really want t new window to open a link in, I can bloody well [and often do] open a window and paste the URL into the address bar.  Having automatic window-spawn just grates on my nerves.

    I guess we could both have our wishes if web-authors would just use  straightforward HTML for basic navigation.

    Minds are like parachutes--they only function when open
  • 04-04-2007 3:39 AM In reply to

    Re: Best HTML Link Method

    KattMan:
    Essentially we use CSS to make the dive look like a button by using a background image and use the onclick onmouseover and onmouseout to change the look of the "button".  Needless to say that is a disabled state so we do need to use Javascript to determine if the button is disabled or not and only navigate when enabled.
    It's very easy to swap images within an anchor in Javascript though. As for disabling the button, button_anchor.href="$" should do the trick.
     
    But then again, if your website relies so heavily on Javascript anyway, it might be pointless.
     
    Edit: What the eff... pretend the $ above is actually a #
    rpar PROTON all
Page 1 of 1 (8 items)
Powered by Community Server (Non-Commercial Edition), by Telligent Systems