SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help using 'visited' class with Colorbox

    Hi guys,

    I'm creating a site for a client that uses the Colorbox script for the store. When you click on a thumbnail of a product in the store, the browser uses Colorbox to display the external PHP page with the product information.

    This all works fine but what I would like to do is...

    When you click on a product thumbnail and it brings up the page (using Colorbox), when you close the Colorbox window and return to the thumbnails, I would like the padded background of the image to be a different color and not grey like the rest of them - so you can see which products you have looked at and which products you haven't.

    I've tried using...

    Code:
    #productContainer img:visited {background-color:#0973ba;}
    ...but it didn't work.

    Click here for the link to the test site if that helps.

    Does anyone have any suggestions as to how I can achieve what I need to do?

    Thank you very much and I look forward to hearing from you.

    SM

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, it won't work like that . The image can't have a background because that's the content of it. If you add padding around the image it would show but not like that.

    How about giving opacity? It'll grey it out and gives a nice effect.

    Code:
    #productContainer a:visited{opacity:.6;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan!

    Thanks for the reply - you've helped me on many things in the past (know I'm in great hands here!)

    Great suggestion, but unfortunately it didn't work.

    Do you know if I could do it with PHP? - i.e. if product thumbnail image is/has been clicked on, set background color to red (or whatever!)???

    Thanks again for your help dude,

    SM

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by flashead View Post
    I've tried using...

    Code:
    #productContainer img:visited {background-color:#0973ba;}
    ...but it didn't work.

    Click here for the link to the test site if that helps.
    I think this would work:
    Code CSS:
    #productContainer a:visited img {background-color:#0973ba;}
    with the proviso that you go through and change the repeated instances of id="productContainer" to class="productContainer" (and obviously change the # to . in the CSS), as you're only allowed to use each ID once in a page, not 30 times, and that could cause some browsers to have a hissy fit and not work properly.

    The key point is that only <a> elements can take :link, :active, :hover or :visited pseudo-classes, so you need to target a:visited, but because the <a> element doesn't enclose the <img>, the colour needs to be applied to the <img> inside the <a>.


    Quote Originally Posted by flashead View Post
    Do you know if I could do it with PHP? - i.e. if product thumbnail image is/has been clicked on, set background color to red (or whatever!)???
    A word of warning! The method I've used will change the colour of a link where the destination page has been visited. It doesn't change the colour of links that are clicked on. There is a subtle difference – if someone has visited the destination page for one of those links already, it will come up with the :visited colour, whether or not they've clicked on that specific link to get there. So at the moment, click on one and they'll all change, because they're all pointing to the same destination.

    If you want them to change only when that particular link is clicked on, just add something like <a href="assets/store/A31.php?clickid=1"> and use a different number on each one. That will fool the browser into thinking that each link points to a different page, without actually affecting the destination.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Really? Because itworked for me This was the actual code
    Code:
    .ajax.cboxElement:visited {
    opacity: .6;
    }
    Quote Originally Posted by flashead View Post
    Hey Ryan!

    Thanks for the reply - you've helped me on many things in the past (know I'm in great hands here!)

    Great suggestion, but unfortunately it didn't work.

    Do you know if I could do it with PHP? - i.e. if product thumbnail image is/has been clicked on, set background color to red (or whatever!)???

    Thanks again for your help dude,

    SM
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys!

    Thank you for your help, really appreciate it!

    I've changed the div id's to classes - well spotted, thank you!

    Then I tried both your suggestions but it didn't work when I tested the site. I have a feeling that, despite the fact that the user has clicked on the link, as it's only a colorbox (and the browser isn't going to the page in its window), the browser isn't resgitering it as a 'visited' link.

    That's why I think PHP may have an answer, or do you guys reckon it can be done in CSS?

    Thanks again

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    For whatever reason, the :visited state isn't allowing opacity to be set on it. It's certainly registering the visited pseudo class however, don't get me wrong .

    Unless you'd be willing to add an HTML <span> into the mix and call onto that to provide the transparency, I doubt you'll get this working with CSS alone. PHP may need to be tried unless you want to bloat your HTML to achieve the effect.

    Alternatively, could you just create a separate version of hte image in photoshop and apply opacity there? Should take seconds. If you have too many dynamic images tehre, perhaps it's not feasible.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,

    Thanks for the reply - I'm going to see if I can get this working with PHP. Wish me luck!

    Thank you for all your help guys - I'll let you know how I get on.

    SM

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The image can't have a background because that's the content of it. If you add padding around the image it would show but not like that.
    I wanted to clarify Ryan's statement. IMGs can have BG. But IMGs are replaced content , so the image file will be placed inside the tag and fill up the space, covering up the BG color... UNLESS you add padding.

    BONUS CLARIFICATION: you can even add a BG image to an IMG tag!!!

    As Stive D pointed out, the :visited pseudo class only applies to links. Kinda makes sense, how could you have visited an IMG? So you have to target it via a cascade.

    MOST IMPORTANTLY...
    The ORDER in yoru CSS in pivotal when dealing with these pseudo classes. I use the mnemonic:LoVeHAte to remeber the order.

    A:LINK{}
    A:VISITED{}
    A:HOVER{}
    A:ACTIVE{}


    you had:
    Code:
    .productContainer a:hover img {background-color:#0973ba;}
    .productContainer a:visited img {background-color: #0F0;}
    When it should be:
    Code:
    .productContainer a:visited img {background-color: #0F0;}
    .productContainer a:hover img {background-color:#0973ba;}
    That should do it.

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man,

    Thank you for that, top one! That does work, but only when you open the link in a new window, if that makes sense.

    As it's using colorbox, I guess the browser isn't registering it as a visited link. Don't suppose you might have any ideas?

    Thank you again!

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by flashead View Post
    Hey man,

    Thank you for that, top one! That does work, but only when you open the link in a new window, if that makes sense.

    As it's using colorbox, I guess the browser isn't registering it as a visited link. Don't suppose you might have any ideas?

    Thank you again!
    It most definitely is registering it as a visited link, as I found out during testing. It's just not letting opacity be set to show through the image.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan!

    Thanks for checking that out - what browser are you using? I just tested it in FF, ie, Chrome and Safari, and the thumbnail doesn't appear bright green (I will change that, just for test purposes!) when I click it and bring up the lightbox.

    Am I being an idiot?! - it wouldn't surprise me if I was

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Chrome. If I remove the image for testing purposes and just try having a regular text link there, and set a :visited state, after the click, I can see the visited state being put into effect. The opacity just doesn't want to happen.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •