SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    target="" is DEPRECATED ?!

    I know that frames are deprecated, but I usually don't use use the "target"-attribute for targetting a frame but for targetting a named window or target="_blank" in rare cases - weblink listings for example.

    And here's the question: Is there any VALID replacement for targetting a named window or a new blank site using target="_blank"?

    I never use <frames> and mostly I try (successfully) to avoid any deprecated tags or attributes or anything that isn't allowed regarding to strict dtd and so I don't want to use transitional type only to target specific windows.


    (p.s. I know, there's already a thread about "target", but this bb engine wants users to create a new thread if the original thread was created more than 10 months ago!)

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The replacement is to let your visitors choose where to open it. The context menu contains three options - open, open in a new tab, and open in a new window. Adding a target effectively removes one of those options and thus reduces your visitors choices.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    I've actually used JStarget in places for special instances. Basically, if you look at how wikipedia handles its external links, this method does pretty much the same thing.

    Code JavaScript:
    /*
    JSTarget function by Roger Johansson, [url]www.456bereastreet.com[/url]
    version 1.2
    */
    var JSTarget = {
        init: function(att,val,warning) {
            if (document.getElementById && document.createElement && document.appendChild) {
                var strAtt = ((typeof att == 'undefined') || (att == null)) ? 'class' : att;
                var strVal = ((typeof val == 'undefined') || (val == null)) ? 'non-html' : val;
                var strWarning = ((typeof warning == 'undefined') || (warning == null)) ? ' (opens in a new window)' : warning;
                var oWarning;
                var arrLinks = document.getElementsByTagName('a');
                var oLink;
                var oRegExp = new RegExp("(^|\\s)" + strVal + "(\\s|$)");
                for (var i = 0; i < arrLinks.length; i++) {
                    oLink = arrLinks[i];
                    if ((strAtt == 'class') && (oRegExp.test(oLink.className)) || (oRegExp.test(oLink.getAttribute(strAtt)))) {
                        oWarning = document.createElement("em");
                        oWarning.appendChild(document.createTextNode(strWarning));
                        oLink.appendChild(oWarning);
                        oLink.onclick = JSTarget.openWin;
                    }
                }
                oWarning = null;
            }
        },
        openWin: function(e) {
            var event = (!e) ? window.event : e;
            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return true;
            else {
                var oWin = window.open(this.getAttribute('href'), '_blank');
                if (oWin) {
                    if (oWin.focus) oWin.focus();
                    return false;
                }
                oWin = null;
                return true;
            }
        },
        /*
        addEvent function from [url]http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html[/url]
        */
        addEvent: function(obj, type, fn) {
            if (obj.addEventListener)
                obj.addEventListener(type, fn, false);
            else if (obj.attachEvent) {
                obj["e"+type+fn] = fn;
                obj[type+fn] = function() {obj["e"+type+fn]( window.event );}
                obj.attachEvent("on"+type, obj[type+fn]);
            }
        }
    };
    //--this is the original line
    //JSTarget.addEvent(window, 'load', function(){JSTarget.init("rel","external"," (external website, opens in a new window)");});
    //--this line excludes the extra text
    JSTarget.addEvent(window, 'load', function(){JSTarget.init("rel","external","");});

    CSS for showing the "external link" icon next to the link
    Code CSS:
    /* external link icon */
    a[rel="external"] {
        background: url(../images/external.png) center right no-repeat;
        padding-right: 13px;
    }

    The external.png image: http://img257.imageshack.us/img257/3981/externali.png

    and example HTML:
    Code HTML4Strict:
    <a rel="external" title="Top 5 Offline Backup Tools" href="http://lifehacker.com/5498381/five-best-offline-backup-tools">backup tools</a>


    However--there's a recommendation from the same author for HTML5: http://www.456bereastreet.com/archiv...get_attribute/
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems a bit of overkill for a simple process. See this simpler, but configurable solution.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,047
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Another trick is to class the link something like popup. Than add an event listener to a top level containing element and detect a click on a item with class popup using event bubbling. When a item with the class of popup is detected open the window using JavaScript and kill the default event. You can even intercept it and change the implementation to load the page in a modal window using JavaScript while maintaining graceful degradation for users with JS turned off. That is a water-downed, basic variant of how I normally handle similar situations.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or simply switch your doctype to something other than XHTML strict

  7. #7
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I think there's something fundamentally wrong with the premise in this thread. Strict DOCTYPEs have deprecated the target attribute to deal away with forcing the user to open links in new windows. If you wish to open links in a new window, you can't use strict DOCTYPEs. Using various Javascript techniques to modify the DOM to include a target attribute after the HTML has loaded might make the site pass the W3C validator, but your DOM will still be invalid for a strict DOCTYPE.

    If you really feel you must open links in new windows (for which there can never be an objectively sound reason), then why not use a transitional DOCTYPE, and be honest about not writing strict code?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


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
  •