SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding a class to all links with a target of _blank

    Could someone show me how to do this? Thanks!

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled 1</title>
        
        <style type="text/css">
            .someClass{ color: red; }
        </style>
    
    </head>
    
    <body>
    
        <a href="" target="_blank">with target blank, css class assigned</a>
        <br><br>
        <a href="">without target blank</a>
    
        <script type="text/javascript">
            var a = document.getElementsByTagName('a');
            for (i in a) {
                if(a[i].target == '_blank')
                    a[i].className = 'someClass';
            }
        </script>
    
    </body>
    
    </html>
    Last edited by tahirjadoon; Jun 26, 2010 at 14:47. Reason: css class changed
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This one is using jQuery, download and reference it properly.

    Referencing jQuery
    Code:
    <script src="jquery-1.4.min.js"  type="text/javascript"></script>

    Full Code
    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">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled 1</title>
        
        <style type="text/css">
            .someClass{ color: red; }
        </style>
    
        <script src="jquery-1.4.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        
            $(document).ready(function() {
                $('a[target="_blank"]').addClass("someClass");
            });
        
        </script>
    
    </head>
    
    <body>
    
        <a href="" target="_blank">with target blank, css class assigned</a>
        <br><br>
        <a href="">without target blank</a>
    
    </body>
    
    </html>
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tahirjadoon View Post
    This one is using jQuery, download and reference it properly.
    Why use jQuery when the plain JavaScripot version is as short as the code you need to use to call the huge jQuery library just to do the same thing.

    This particular example is one where you'd be better off ignoring jQuery even if you already had it loaded in the page since the plain JavaScript code is going to run faster by not needing to make function calls.
    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="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, just used the first example and it worked like a charm. Thanks tahirjadoon!

  6. #6
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Am I the only person wondering why the heck you're using JavaScript at all?

    This can be done easily and quickly with CSS itself (and you can put the code in the relevant selector.

    Code CSS:
    a[target="blank"] {
          Your CSS Here.
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Am I the only person wondering why the heck you're using JavaScript at all?

    This can be done easily and quickly with CSS itself (and you can put the code in the relevant selector.

    Code CSS:
    a[target="blank"] {
          Your CSS Here.
    }
    are you serious? what is the browser support for this?

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yes I am serious, here's the link to the relevant part of the CSS 2.1 specification: http://www.w3.org/TR/CSS2/selector.h...bute-selectors

    Support is buggy but it does work in IE7+ and all other browsers (pretty well too): http://reference.sitepoint.com/css/attributeselector

  10. #10
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need to add _ to target:

    Code:
     
    a[target="_blank"] { color: green;}
    Learned some thing new, Thanks!
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Whoops, yes! The value needs to match that of the attribute being selected but it's a great way to avoid unnecessary classes, ID's and scripts!

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Am I the only person wondering why the heck you're using JavaScript at all?
    I had assumed that it was to add equivalent support for IE6 users where that CSS isn't supported.
    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="^$">

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tahirjadoon View Post
    Need to add _ to target:

    Code:
     
    a[target="_blank"] { color: green;}
    Learned some thing new, Thanks!
    yeah, I caught that.


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
  •