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 4 of 4

Thread: :focus problem

  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    120
    Thanks
    13
    Thanked 3 Times in 3 Posts

    :focus problem

    Code:
    <html>
    <style>  
    div:focus{background-color:red}
    </style>
    
    <body>
    
    <div>
    Here's my little text box...
    </div>
    Why doesnt this code work?
    It should work! If change :focus to :hover!
    Is there a hack that makes it work?

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    35
    Thanks
    4
    Thanked 1 Time in 1 Post
    I dont think that :focus works on every element. Also it does not work in IE6.

    Can you show me some demo page of the effect you want to accomplish? I can help you with jquery(i dont know raw js :P ) code that will do that effect...

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    120
    Thanks
    13
    Thanked 3 Times in 3 Posts
    well... i simply challenged myself to create an album gallery that when you click on a picture's thumbnail, the full sized picture will show up without reloading the page. And this will be used only with HTML and CSS, no Javascript and PHP would be used, plus, its a one-page only. This is very possible if i can use that :focus thing.

    How would this be done? Here's how, each thumbnail would the coded as:
    Code:
    <div id="gallery">
    <thumb><img src="thumb1.jpg" /><fullsized><img src="pic1.jpg"></fullsized></thumb>
    <thumb><img src="thumb2.jpg" /><fullsized><img src="pic2.jpg"></fullsized></thumb>
    <thumb><img src="thumb3.jpg" /><fullsized><img src="pic3.jpg"></fullsized></thumb>
    <thumb><img src="thumb4.jpg" /><fullsized><img src="pic4.jpg"></fullsized></thumb>
    
    <div id="current_pic">
    before you call me crazy, take a look at how the css would be like (keep in mind that some browsers let you make your own html tags, you just have to set them in css)

    Code:
    fullsized{display: none} /* This will set the content inside <fullsized> invisible */
    #gallery thumb img:focus fullsized{display: block} /* This will make the content inside fullsized visible, when a thumbnail is focused, of course i would also use absolute positioning to place it somewhere */
    
    }
    well, there's plenty of things to be coded here, i just showed you the main idea, and i'm sure this is possible when i'm able to use focus. Of course, i can save myself from all the trouble and simply use jscript or/and php, but no, i want this to be pure css.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The following may move you forward...
    Code:
    a img{
    border:none;
    }
    #mylist a{
    position:relative;
    }
    #mylist a img.pic{
    position:absolute;
    top:0;
    left:0;
    }
    #mylist a:link .thumb,#mylist a:visited .thumb{
    display:inline;
    }
    #mylist a:hover .thumb,#mylist a:active .thumb,#mylist a:focus .thumb{
    display:none;
    }
    #mylist a:link .pic,#mylist a:visited .pic{
    display:none;
    }
    #mylist a:hover .pic,#mylist a:active .pic,#mylist a:focus .pic{
    display:inline;
    }
    Code:
    <ul id="mylist">
      <li><a href="#">Image 1<img class="thumb" src="thumb1.jpg"/><img class="pic" src="pic1.jpg"/></a></li>
     
    </ul>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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