SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    OK - Uncle! Opera?

    You would think I could fix this - just did this in another thread. But this one is the whole body. If I give Opera overflow auto on the body instead of hidden then it will go to link two and three but won't come back to link one or two. Weird? Here is my play-page. http://www.visibilityinherit.com/pro...tent-swap3.php How to fix? Thanks!

  2. #2
    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)
    Eric, I know for a fact Opera is a <insert naughty word here> when it comes to overflows being applied to fragment links - especially on the body, I've encountered the exact same issue you have there and even stranger ones besides it. Unfortunately there isn't a fix that I am aware of for that specific Opera bug (I reported it to them over a year ago which they promptly ignored - like always). I have a solution though it's not perfect (you'll need JavaScript for the IE support - or provide what you currently have to IE through a conditional comment)... the CSS3 :target selector allows you to apply style to a fragment link upon navigating to it (so if you used #one:target - this would occur when #one is triggered) I use it extensively on my new look website (and I even have some friendly JavaScript to help IE out too!) feel free to poke around and see if any of my code will help you achieve your effect. It's the only way I've found to get Opera playing nicely with the other kids on fragment navigation... though on an upside... :target works in Opera, Firefox, Safari and Chrome (it's only IE that needs some rails).

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.sitepoint.com/forums/show...3&postcount=59

    Base yours off of Yuris because his is appearing to be working in Opera with this issue
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! Ryan, oh ya, I'll read over those. Alex, what's your site again? Thanks guys!

  5. #5
    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)
    Eric, My sites: http://www.hitechy.com/ (I did CSS3 voodoo to make it lovely and clean - I'm a fan of simplicity and accessibility).

    Hope you fix your problem (if my code's useful to you too it'll be a bonus)

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool site Alex - very unique!

  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)
    Thanks! I got inspired to turn my old design into something more usable, accessible and minimal... and that's what I ended up with (IE was a pain in the butt)

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Well this is the first thing I have gotten to work in Opera. http://www.visibilityinherit.com/pro...ntentswap4.php I've been messing wiht it for a few hours so I think I'm going to run with it. Unless someone else has a better fix (Ahhhh - AhhhPaulaaa). This is the first time I've messed with :target - its pretty cool! But the target seems to be relative to the div calling it. How do I make it relative to the body? So it stays at the top! Min-height 100&#37; for some reason makes the paragraphs stay at the top but I don't know why.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <?php $ua = $_SERVER["HTTP_USER_AGENT"]; $opera = preg_match("/\bOpera\b/i", $ua); ?>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    overflow-x:hidden;
    }
    #full {
    min-height:100%;
    width:300%;
    overflow:hidden;
    }
    #one, #two, #three {
    width:33.33%;
    float:left;
    }
    .opera #one, .opera #two, .opera #three {
    margin-left:-999em;
    min-height:100%;
    }
    .opera #one:target, .opera #two:target, .opera #three:target {
    margin-left:0;
    }
    ul {
    position:fixed;
    }
    * html ul { 
    position:absolute; 
    left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
    } 
    p {
    margin:0 50px;
    }
    </style> 
    </head>
    <body <?php if ($opera) echo 'class="opera"'; ?>>
    
    <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    </ul>
    
    <div id="full">
    <div id="one"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p></div>
    <div id="two"><p>test2</p></div>
    <div id="three"><p>test3</p></div>
    </div>
    
    </body>
    </html>

  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)
    Just remember to have something visible when no fragment link is selected in Opera.

    Set the default for #one to the same value as what you would have in one:target (for consistency)

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey Eric, I was playing around with :target on your code also.
    I got one here that sets all three divs as AP and then lifts the target layer on top. It works in FF, Chrome, Safari & Opera.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    }
    #one, #two, #three {
    position:absolute;
    width:100%;
    height:100%;
    overflow:auto;
    background:orange;
    z-index:2;/*keep div#one on top at page load*/
    }
    #two {
    background:lightblue;
    z-index:1;
    }
    #three {
    background:palegreen;
    z-index:1;
    }
    #one:target,
    #two:target,
    #three:target {z-index:3;}
     
    ul {
    position:fixed;
    z-index:10;
    background:#FFF;
    }
     
    p {
    margin:0 50px;
    }
    </style> 
    </head>
    <body>
     
    <ul>
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
    </ul>
     
    <div id="one"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p></div>
    <div id="two"><p>test2</p></div>
    <div id="three"><p>test3</p></div>
     
    </body>
    </html>

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    This is the first time I've messed with :target - its pretty cool!
    Yeah I thought so too, Alex brought it to my attention about a month ago and I did some testing with it here.
    http://www.sitepoint.com/forums/show...8&postcount=13
    But the target seems to be relative to the div calling it. How do I make it relative to the body?
    In the example I posted above I eliminated that #full div and the AP target divs are positioning from the body.

  12. #12
    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)
    It's become my favourite new entry in the CSS specification by far... it has practical uses, it's widely supported (and I've worked out how to get IE playing fair using a bit O scripting) and best of all... it makes single page designs easy, script free, and compatible with the back button and bookmarks. I reckon it'll become one of the more widely used elements of CSS3 in the future as single page designs and AJAX hooks become ever increasingly used.

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Nice Ray! Alex, anyone, when I set default of #one to be visible opera stops working all together. I tried many combos. And it all seems to be the same. #one has to be off screen and then be called back via target to work. Care to mess with it and see what I'm missing?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100&#37;;
    overflow-x:hidden;
    }
    #full {
    min-height:100%;
    width:300%;
    overflow:hidden;
    }
    #one, #two, #three {
    width:33.33%;
    float:left;
    }
    #one, #two, #three {
    margin-left:-999em;
    min-height:100%;
    }
    #one:target, #two:target, #three:target {
    margin-left:0;
    }
    ul {
    position:fixed;
    }
    * html ul { 
    position:absolute; 
    left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
    } 
    p {
    margin:0 50px;
    }
    </style> 
    </head>
    <body>
    
    <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    </ul>
    
    <div id="full">
    <div id="one"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p></div>
    <div id="two"><p>test2</p></div>
    <div id="three"><p>test3</p></div>
    </div>
    
    </body>
    </html>

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ta- Da! http://www.visibilityinherit.com/pro...tent-swap3.php I finally incorperated the jquery plugin I wanted and that took care of Opera on it's own. This thing is going to be nice!


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
  •