SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 44 of 44
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Do you have your full code Eric so we can see what effect you are going for?

  2. #27
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Do you have your full code Eric so we can see what effect you are going for?
    Sure thanks for looking Paul! I stripped it down so the overlay is probably not lining up anymore but you get the idea. I feel bad to show you. After all your awesome code it looks like I'm going with the fixed width version. Mainly because I couldnt fully understand yours enough to edit appropriately and I coldnt get the fluid versions to do everything I wanted - aside form being perfectly fluid that is.

    So to recap I'm just trying to get IE to stop popping up the tooltip when you hover "above" the "TOOLTIP" link in the demo page. I only want the tooltip to pop up when you over directly over the TOOLTIP link. And secondly I want to keep IE's cursor at default arrow. And no flickering to pointer.

    As a side note. Another possible fix I thought of is to add in a jquery hover delay to the span. Like 30 second delay. But I cant seem to get that working either. And ofcourse a full CSS solution is preferd. And this falls back perfect for IE. It has everything except the animation, opacity, and shadow. IE is over half my visitors

    Test Page
    http://www.visibilityinherit.com/pro...sitepoint.html

  3. #28
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    oops sorry - use this one! http://www.visibilityinherit.com/pro...sitepoint.html. This has the AddToAny popup in it so you can see that it still pops up in IE when hovered over wrong area. And no overlay. Just display none. Also I figured out the cursor. Just needs to go on the span. Not span:hover. I really am rusty. So I just have the one AddToAny problem left.

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    You could just fork the code for IE as it doesn't have the transition effect.

    e.g.

    Code:
    <!--[if lte IE 9]>
    <style type="text/css">
    .tooltip span { display:none; }
    .tooltip:hover span { display:block; }
    </style>
    <![endif]-->

  5. #30
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    ya I refuse. I hate having those in my html. It's a sign of failer for me.

  6. #31
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    What no super-duper Paul OB code?

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    What was wrong with the visibility:hidden method as that seems to work for me?

    Code:
    .tooltip span{visibility:hidden}
    .tooltip:hover span{visibility:visible}

  8. #33
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Awesome! I'm glad I asked about the super duper code. That worked perfect. For some reason I just kept adding hidden to the hover event and not to the span at default. Man I need to hit the books. Lol. All the problems have been worked out. I even worked out the fact that ie clips the arrow off with the opacity filter in place. I found some obscure filter rule to turn it off on hover. Thanks Paul I am happy.

    Cool now I can get ride of the opacity filter probably and use pie.css. Pie didn't work with the opacity filter in place.

  9. #34
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is my final product with this tooltip http://www.visibilityinherit.com/cod...ss-browser.php. What do you think?

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looks very slick Eric -good job.

  11. #36
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thnaks Paul. So I figured out a alludingly simple way to simulate hover on touch devices (at least apple). Although I'm using media queries and have a couple questions about them because I have no experience with them. I'm using this to make ipad/iphone hover...

    Code CSS:
    @media only screen and (min-device-width:768px) and (max-device-width:1024px) {.tooltip span{display:none;}.tooltip:hover span{display:block;} } /* iPad */
    @media only screen and (max-device-width:480px) { .tooltip span{display:none;}.tooltip:hover span{display:block;} } /* iPhone */

    The Question? So do media queries target devices by screen size? So is this correct? What if another say Android device is the same screen width - won't it be targeted to? I put the rules in my demo above so you can see in action if you have apple device.

    Edit: That sucks, I just noticed firefox is 1px different on the bottom triangle (FYI triangle white border) than webkit/opera/ie.

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

    The Question? So do media queries target devices by screen size? So is this correct? What if another say Android device is the same screen width - won't it be targeted to?
    The device-width media queries target the actual resolution of the device while min/max-width media queries refer to the viewing area.

    Yes if a device understand the media query then it will apply the styles within if they match.

  13. #38
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    It's funny the entire web seemed to of just copied one single sorce of information on those things. Reading on them all morning and I havnt learned anything. So if I understand you correctly I should use the min and max width to target specific size devices? Anyone know of a specific apple IOS css hack or other? I'm fairly certain android will hover and do he animation. So I don't want to feed it the same rules as iPhone/iPad.

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    So if I understand you correctly I should use the min and max width to target specific size devices?
    No the best approach is to be device independent as you never know what size a device will be next. Take the ipad and ipad mini for example. They just appeared out of the blue.

    Layouts should be device independent and scale through the whole range. You just set the media queries at the point that your layout no longer works any more. Forget about devices just allow the screen to go really small and really big. All layouts are different and the point where a media query needs to work is different every time.

    Anyone know of a specific apple IOS css hack or other? I'm fairly certain android will hover and do he animation. So I don't want to feed it the same rules as iPhone/iPad.
    Well you could sniff it with JS but I wouldn't rely on hacks as mobiles have started reading each others vendor specific rules. there is the webkit hack but I don't think it will always remain safe.

    Hover doesn't exist on mobiles but usually a menu will open when touched if its a link but the problem is making it go away again. You usually have to set up another link to close it or make the user touch somewhere else. Hover effects should really be avoided for mobiles or at least not be essential to the use of the site.

    It's a bit of conundrum really.

  15. #40
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya I can't sniff out WebKit because I only want iOS. Here is a simple demo I just made showing hover on iOS with css only. http://www.visibilityinherit.com/cod...hover-demo.php.

    In my situation I can't use the display none - display block rutine needed for the iOS hover because it kills my animation. So I'm just looking for a way to target iOS. Anybody know if Android devices do hover? If not, does the hover in the demo above work on your android device?

  16. #41
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ya I can't sniff out WebKit because I only want iOS. Here is a simple demo I just made showing hover on iOS with css only. http://www.visibilityinherit.com/cod...hover-demo.php.

    In my situation I can't use the display none - display block rutine needed for the iOS hover because it kills my animation. So I'm just looking for a way to target iOS. Anybody know if Android devices do hover? If not, does the hover in the demo above work on your android device?
    I can't help you with android as I don;t have a device to test I;m afraid. As I said above you can make the ipad hover if you use a link and indeed this old menu from years and years ago works on the ipad with no problem except you can't close the menu. It's strange because if the top level anchors were spans the menu would still work in normal browsers but not on the ipad/iphone. It doesn't use display:none but moves it offscreen and the ipad is fine with that.

    I'm a bit short of time at the moment (and the wife has the ipad) otherwise I'd run some tests with your layout. If i get a chance tomorrow I'll have another look if you haven;t solved it yourself by then

  17. #42
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok I figured out my confusion here. With the rule -webkit-transition:all 0.3s ease-in-out; in place iOS won't hover unless I add display none - display block or display table - display block. So i just assumed ios didnt hover - never paid much attention i guess. So if you find iOS won't hover there is your fix.

  18. #43
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link.

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The strange thing in the dropdown example I showed you is that the link itself has no hover affect at all. Its the list element that when hovered shows the nested ul as there are no rules for the anchor yet it won't work on ipad/iphone unless there is a link in place.

    With the rule -webkit-transition:all 0.3s ease-in-out; in place iOS won't hover unless I add display none
    Interesting. Thanks for posting your findings Eric as they will come in useful


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
  •