Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing pseudo classes

    I am trying to change the color of a links pseudo class using DOM.

    My style sheet sets the colors.
    a:link, a:visited{ color:#ccc; )
    a:hover{ color:#f00; )

    The link's onclick calls a js function that sets the link's style.color property.
    this.style.color='#fff';

    However, then the pseudo classes set in the style sheet are over ridden. (No hover)

    Can anyone tell me what the syntax is to change the a:link? I tried
    this:link.style.color = '#fff';
    but get `SyntaxError: invalid label'

    Thanks for your help.

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you're trying to solve the wrong problem. Instead of setting any styles directly, add a className to the element, and code a style for that class.

    Code:
    <style type="text/css">
    a:link, a:visited {
       background-color: #000;
       color: #ccc;
    }
    a:hover {
       background-color: #000;
       color: #f00;
    }
    a.clicked:link, a.clicked:visited {
       background-color: #000;
       color: #fff;
    }
    </style>
    <script type="text/javascript">
    function clickMe (el) {
       var clicked = el.className.indexOf('clicked') > -1 ? true : false;
       if (clicked) {
          el.className.replace(/\bclicked\b/ig, '');
       } else {
          el.className += ' clicked';
       }
       return false;
    }
    </script>
    ...
    <a href="#" onclick="return clickMe(this);">Link text</a>
    Of course, one might ask why you're using a link to do this in the first place. Links are meant to be followed.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    If any browser fully supported DOM2 CSS (more specifically, supported the override stylesheet), one could simply do:

    onclick='document.getOverrideStyle(this, "link").setProperty("color", "#fff", "");'

    But no browser, not even Opera 7 or Mozilla nightlies, support the override stylesheet. So the best you can do it without resorting to choopernickel's method is iterate through the cssRules of the stylesheets, and test for rule.selectorText.indexOf("a:link"), then set rule.style.color="#fff" on it.

  • #4
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks to both of you for answering. Problem solved.

    I used Choopernickel's suggestion of another class.

    Of course, one might ask why you're using a link to do this in the first place. Links are meant to be followed.
    This is a portfolio site for some designers. All the content is on one page and uses DHTML to change the content w/o loading a new page. I did want the clicked link to change color to indicate that content is currently displayed.

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by escaperanger
    Quote Originally Posted by Choopernickel
    Of course, one might ask why you're using a link to do this in the first place. Links are meant to be followed.
    This is a portfolio site for some designers. All the content is on one page and uses DHTML to change the content w/o loading a new page. I did want the clicked link to change color to indicate that content is currently displayed.
    My only point is this: it doesn't have to be a link. It can be any element at all with an onclick listener. Don't limit yourself to what you've used the past few years; the latest stuff outdates all that and is ridiculously impressive. That's all.

    Now: what happens if the user agent doesn't support javascript? Can the portfolio content still be accessed properly?

  • #6
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Choopernickel
    My only point is this: it doesn't have to be a link.
    No, it does not. However, it feels like a link. Even though it does not load a new page, it displays new content on the page. I also like the user feedback that hover offers. So even if I used something else, I would want some visual feedback on a mouseover.

    Quote Originally Posted by Choopernickel
    Now: what happens if the user agent doesn't support javascript? Can the portfolio content still be accessed properly?
    That is a million-dollar question. Some features may not be accessible. i have not figured out how this site will "gracefully degraded." But there has to be some minimum requirements.

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd like to take a moment to announce something: my words have been arriving at their destinations sounding much harsher and brasher than I ever intend. I mean no offense; I say so only because a) someone else reacted poorly to a post of mine, and b) you seem to have as well.

    Now.

    I'd be curious to see what I could do with your page; delivering multiple pages' worth of content in one document is a good goal, and certainly not too lofty. I'll bet there's a way to do it using links for their actual purpose and give an intense scripted experience for those who can hack it while degrading gracefully for those who don't. At this point, I'm thinking CSS with overflow:auto and named anchors. Sounds like a neat project, in fact.

    Good luck with it!

  • #8
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Absolutely no offense taken. Actually, I had been thinking about editing my previous post for similar reasons. I appreciate the dialog. Not only did I get the answer I NEEDED, but a bit of discussion.

    Thanks very much.

    Perhaps we need more Smilies

  • #9
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use a link.

    Quote Originally Posted by Choopernickel
    My only point is this: it doesn't have to be a link. It can be any element at all with an onclick listener. Don't limit yourself to what you've used the past few years; the latest stuff outdates all that and is ridiculously impressive. That's all.

    Now: what happens if the user agent doesn't support javascript? Can the portfolio content still be accessed properly?

    That's why you should use a link.

    And you should use this css:

    Code:
    a:visited {
        color: cornflowerblue;
    }
    
    a:hover {
        color: papayawhip;
    }
    
    a:visited:hover {
        color: lawngreen;
    }

    Won't quite work in Explorer on the mac, but that browser is no longer in development, so don't worry.

    More: http://dhtmlkitchen.com/learn/css/multiclass/index3.jsp



    v

  • #10
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My only point is this: it doesn't have to be a link. It can be any element at all with an onclick listener. Don't limit yourself to what you've used the past few years; the latest stuff outdates all that and is ridiculously impressive. That's all.
    I tried using an element other than a link, and I am very happy with the results.

    The links I was using were part of a list and had a typical amount of inline code, at least for me:
    Code:
    <ul>
    <li><a href="javascript:;" onclick="setThumbLinkColor(this);P7_jumpScroller('galleryThumbsContent',10,0);return false;">link1</a></li>
    <li><a href="javascript:;" onclick="setThumbLinkColor(this); P7_jumpScroller('galleryThumbsContent',-245,0);return false;">link2</a></li>
    <li><a href="javascript:;" onclick="setThumbLinkColor(this); P7_jumpScroller('galleryThumbsContent',-755,0);return false;">link3</a></li>
    </ul>
    I removed the <a>s and any associated onclick's and now the html looks like this:
    Code:
    <ul>
    <li id='10'>link1</li>
    <li id='-245'>link2</li>
    <li id='-755'>link3</li>
    <li id='0'>link4</li>
    <li id='0'>link5</li>
    </ul>
    (The ids are used as an arguement in each <li>s onclick handler. Might not be the best way, but still not bad.)

    The onclick's and hover-like behaviour are set in a loop in a javascript function that gets called after the window is done loading. Makes for very clean html code, and more easliy maintained js.

    Here's a preview, if anyone is interested
    Last edited by escaperanger; 04-16-2004 at 02:29 PM.


  •  

    Posting Permissions

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