SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 47 of 47
  1. #26
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just found out something else with the site. The content inside the box needs to be dynamic. How can I accomplish this? I know how to build dynamic sites but with this hover IE6, transparency compatibility, would jQuery work in this case? Or is this one of those projects that cannot be accomplished for IE6?

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    Very similar. But how does an idiot like me implement it? <
    It's similar to mine but the html in that one is rubbish and non semantic.

    However all you need to do is group your images within an area (or 2 areas if you need).

    Code:
    <div class="fade-area-1" id="excepts"> 
        <img src="img1.jpg" alt="imgname" width="100" height="100" /> 
        <img src="img2.jpg" alt="" width="100" height="100" /> 
        <img src="img3.jpg" alt="" width="100" height="100" />
        <img src="img4.jpg" alt="" width="100" height="100" /> 
        <img src="img5.jpg" alt="" width="100" height="100" />
        <img src="img6.jpg" alt="" width="100" height="100" /> 
    </div>
    Code:
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 	<script type="text/javascript"> 		$(document).ready(function() { 			//area 1 			$('.fade-area-1').children().hover(function() { 				$(this).siblings().stop().fadeTo(500,0.5); 			}, function() { 				$(this).siblings().stop().fadeTo(500,1); 			}); 			//area 2 			$('.fade-area-2').children().hover(function() { 				$(this).siblings().stop().fadeTo(500,0.5); 			}, function() { 				$(this).siblings().stop().fadeTo(500,1); 			}); 		}); 	</script>
    However it doesn't have the pop up message that you wanted which I built in to my example. My example works much the same as that so just play around with it until you get familiar with what's happening.

  3. #28
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So somewhere in there I have to add a div box so the dynamic content can be added to it.

  4. #29
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Well, I've managed to get my IETester working and able to see transparencies once again with 6. Also, I've been able to implement the jQuery hover script here y'all have so patiently helped me with. IE6 (at least in my tester) seems to have a 2-3 second delay. Not sure if it's my browser or the code.

    Plus, I noticed within the code that there was fade-area-1 and a fade-area-2. Can someone give me a clue what these do? I like to understand it more.

    On top of this, I've been requested to add a 'Tooltip' popup when the image is hovered over containing dynamic data. Not sure where to begin finding something that is compatible with the way I have this set up, but I guess I'll need to experiment some more.

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post

    On top of this, I've been requested to add a 'Tooltip' popup when the image is hovered over containing dynamic data. Not sure where to begin finding something that is compatible with the way I have this set up, but I guess I'll need to experiment some more.
    I gave you a basic tooltip popup in my example. If you want to load dynamic content with ajax perhaps then there are some examples about. Again its just a matter of finding something that suits your particular setup.

  6. #31
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul O'B:

    I turned the images into links but it seems to flash/blink in FF and Safari, and IE6 has lost its transition. How would I fix this?

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    My first thought would be to set the anchor to display:block and see if that makes a difference otherwise it's proabbly a js issue.

    Code:
    .fade-area-1 a, .fade-area-1 a:link {
        border: 0 none;
      display: block;
    
    
    }

  8. #33
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    That helped with FF, but IE6 is still uncooperative.

    Okay. Looks like I'm back to square one again.

  9. #34
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B:

    Well, since I've hit a brick wall with the jQuery, I'm going to try your CSS/JS that you posted in #10 and try to adapt it with the setup I currently have. I was really hoping the jQuery would've worked out, if I understood it more.

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Your page was working in ie6 I believe so it must be something you added since. You may need to backtrack and remove the last things you added and get it working and then you can narrow down what was causing the problem.

  11. #36
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I added <a href="#">...</a> to all of the objects. I tested it and that is what's the difference. IE 6,7, & 8 stop all transitioning once I added the <a href="#"> and FF & Safari flash when hovered.

    Not sure how I can fix something I don't understand.

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by toad78 View Post
    I added <a href="#">...</a> to all of the objects. I tested it and that is what's the difference. IE 6,7, & 8 stop all transitioning once I added the <a href="#"> and FF & Safari flash when hovered.

    Not sure how I can fix something I don't understand.
    Post a link to a sample test page that demonstrates the problem (there a tons of free hosting sites out there) or even use something like jsFiddle - and we can help you to get your head around the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello and thank you, paul_wilkins:

    You can find it here. I have Greensource set with an <a href="#"> so you can see the effect I was talking about.

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    Hello and thank you, paul_wilkins:

    You can find it here. I have Greensource set with an <a href="#"> so you can see the effect I was talking about.
    That page seems to be working in IE6 - 8 for me.

    (I'm sure Paul W can help with the JS problems though.)

  15. #40
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'm having trouble finding a problem in recent versions of browsers. Can further guidance be provided towards experiencing the issue?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #41
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys.

    In IE6,7 & 8 (at least on my browser tester --IETester-- I do not see the fade transition effect) when I hover over the linked objects. FF & Safari are fine.

    If you hover over any object, except Green Source, you will notice that Green Source is the only one that fades (I removed the link on Green Source to show you the problem I'm having). All linked objects should fade except for the one being hovered over. I noticed this started happening after I set <a href="#"> to all of the objects. IE6,7,8 stopped transitioning after I set links to the objects.

    The example I'm trying to achieve is on this page.

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I think the problem is that you have absolutely positioned the image and then you wrapped an anchor around the image and IE is leaving the anchor where it was in the flow and not around the image.

    Move the ids to the anchors instead.

    Code:
    <div class="fade-area-1" id="excepts"> 
            <a id="eightwatt" href="#"><img  src="http://www.bkssl.com/images/8WATT-BKSSL.png" width="371" height="322" alt="8WATT-BKSSL" title="8WATT-BKSSL" border="0" /></a> 
            <a id="indooroutdoor" href="#"><img src="http://www.bkssl.com/images/Indoor-Outdoor-Stepdown-LIg.png" width="292" height="270" alt="Indoor-Outdoor Stepdown Lighting" title="Indoor-Outdoor Stepdown Lighting" border="0" /></a> 
            <a id="threewatt" href="#"><img src="http://www.bkssl.com/images/3WATT-BKSSL.png" width="304" height="260" alt="3WATT-BKSSL" title="3WATT-BKSSL" border="0" /></a> 
            <a id="twotwowatt" href="#"><img src="http://www.bkssl.com/images/225-8WATT-BKSSL.png" width="356" height="318" alt="2.25 8WATT-BKSSL" title="2.25 8WATT-BKSSL" border="0" /></a> 
            <a  id="onewattthreewatt" href="#"><img src="http://www.bkssl.com/images/1WATT-3WATT-BKSSL.png" width="195" height="187" alt="1WATT 3WATT BKSSL" title="1WATT 3WATT BKSSL" border="0" /></a> 
            <a id="lmsevennine" href="#"><img src="http://www.bkssl.com/images/LM-70--LM-80.png" width="172" height="187" alt="LM-79 LM-80" title="LM-79 LM-80" border="0" /></a> 
            <a id="whatisbkssl" href="#"><img  src="http://www.bkssl.com/images/WhatIsBKSSL.png" width="173" height="255" alt="What Is BKSSL?" title="What Is BKSSL?" border="0" /></a> 
            <a  id="rohs" href="#"><img src="http://www.bkssl.com/images/rohs.png" width="158" height="52" alt="RoHS" title="RoHS" border="0" /></a> 
            <a id="warranty" href="#"><img  src="http://www.bkssl.com/images/warranty.png" width="93" height="57" alt="5-Year Warranty" title="5-Year Warranty" border="0" /></a> 
            <img id="greensource" src="http://www.bkssl.com/images/greensource.png" width="193" height="71" alt="Greensource Initiative" title="Greensource Initiative" border="0" /> </div>
        </div>
    A list structure would have been better for that code rather than bare anchors next to each other.

  18. #43
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul O'B:

    Your solution seemed to have solved THAT problem. Now I guess I'll be moving forward to figuring out tooltips.

  19. #44
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think the problem is that you have absolutely positioned the image and then you wrapped an anchor around the image and IE is leaving the anchor where it was in the flow and not around the image.
    Paul O'B: I've been able to make some progress using Spry (JavaScript) here. My issue now is how can I keep the tooltip from moving. I have it absolutely positioned, but it still won't stay put so the mouse can be hovered over it to be clicked on as a link.

  20. #45
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you are using the spry tooltip then I believe this article has the answers to your question about stopping the mouse move and keeping the tooltip alive whilst you click it.

  21. #46
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can this be made for an image.I mean when you hover over an image to display another popup of another image?
    Thanks in advance.

  22. #47
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi (--eRRoR--),

    Welcome to Sitepoint

    As this thread is a year old please start a new thread with your own query and give full details of exactly what you need and you will get more relevant advice. You can link to this thread if it is relevant but would be better of starting afresh with a clear description of what you are after.

    Thanks.

    Thread Closed


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
  •