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 9 of 9
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    Div positioning question

    I want to use a little arrow icon to hide/show a div. The way I am picturing this is:

    I want to position a div which contains the icon (up arrow) in a way so that it hangs over the top of the div to be hidden, occupying the same area as the div but over in the upper right corner. When the arrow div is clicked, the div it is sitting on top of is hidden and then the arrow should hang over the top of the next div in the DOM, with the arrow now pointing down.

    What's the best way to style this arrow div so that it sits on top of a div but is not inside this div, so it remains visible when the div is hidden? Or is there another way entirely?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hi Fumigator,
    I'm not sure but a demo of mine might be just what your looking for. It uses jQuery ... not sure what it does if js is disabled or if you're even worried about that.

    Have a look at http://nopeople.com/CSS%20tips/slider_panel/index.html and see if you can use it or part of it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Hi Excavator, thanks for the reply. Yes I'll be using jQuery to handle the hide/show stuff, and your demo is just what I need-- but I'm mainly asking about the placement of the arrow button-- I don't want to use an entire DIV to display the arrow such as you have, but rather just the button "hanging" over the top of the next div in line. I'm wondering what the CSS would be to overlay this little arrow over the top of another div.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Fumigator View Post
    Hi Excavator, thanks for the reply. Yes I'll be using jQuery to handle the hide/show stuff, and your demo is just what I need-- but I'm mainly asking about the placement of the arrow button-- I don't want to use an entire DIV to display the arrow such as you have, but rather just the button "hanging" over the top of the next div in line. I'm wondering what the CSS would be to overlay this little arrow over the top of another div.
    I stripped down that demo so it's easier to view the essential parts of it. See it at http://nopeople.com/CSS%20tips/slide...r_attempt.html

    I just got rid of the p.slide that was containing the anchor. Give the anchor a size now and you can float it positioned with some margins. You can even absolutely position it completely off the #container and it will work.

    You'll probably use differnt arrow image so take note of how the positioning flips the arrow so it points the right way and size your anchor accordingly. In this example, white-arrow.gif is just a typical 2-position sprite image.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You could use negative bottom margin on the little arrow to achieve what you are describing, but that can have unintended consequences. I would not recommend doing it that way but it's an option if you care to explore it.

    On the whole, my advice would be to use a container around both the arrow and the content to be hidden (even though you don't want to). That container can then have a minimum height applied that keeps your layout sane when the content is hidden. The container should also have position:relative; applied to it. Then, the arrow gets position:absolute; with top:0;right:0; (or whatever values work best - you can even break out of the container if you use negative values, so this is a "safe" way to give the "overhanging" look you mentioned).

    For the arrow itself, I would go with a sprite as a background image to a transparent 1x1 GIF image (stretched to the desired dimensions) then just adjust the background position for the image element when you hide/show the content. This will eliminate any issues with latency in showing the "other" state of the arrow when first clicked.

    Edit: Reading Excavator's last post I realize I am repeating a lot of what he just said so..."plus one" on those parts, I suppose.
    Last edited by Rowsdower!; 04-03-2012 at 06:07 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I went with the absolute inside relative, creating a container just to hold the button (didn't really want to do that but oh well). It works fine, though I did have to tweak the z-index of the arrow button and the div it sits on top of when the box is hidden (couldn't click on the link otherwise).

    Your advise on the image to prevent it from having to load the 2nd state was a little confusing but basically you're suggesting I use a 2-slide image, set it to background image, and adjust the positioning of the background image when toggling, so the same image is used for both states, just a different location on the image....? I think I can work that out... I've seen that technique before but never quite understood how it works. Should be fun.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Fumigator View Post
    I've seen that technique before but never quite understood how it works. Should be fun.
    I have a demo of that too. It's a 3-state hover so it's 3 images in one but the concept is the same.

    When you used the positioned method, does the arrow move up and down with your relative element? I didn't work this out that far. I'd be interested in seeing what you've ended up with.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Fumigator View Post
    ...basically you're suggesting I use a 2-slide image, set it to background image, and adjust the positioning of the background image when toggling, so the same image is used for both states, just a different location on the image....?...
    Yes, exactly. I prefer to use a blank image as the object since I know how browsers will react to an image element. Other people will use an empty anchor tag as the base, which works as well. I'm just leary of empty tags being used since I don't know how screen readers and the like will account for them and I'm always nervous (paranoid) about browsers suddenly deciding to collapse an empty anchor tag or something. At least with a blank image I can add alt text and give some meaning to the element (just my own hangup).

    Anyway, here is an example with messy inline script but this can easily be outfitted to work with your existing script and used on an empty <a> tag instead of a dummy image (if you so choose):
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Sprite Hover and State Change Image Example</title>
    <script>
    function toggle(elm){
    	if(elm){
    		if(elm.className.indexOf(" visible")==-1){
    			elm.setAttribute("class",elm.className+" visible");
    		}
    		else{
    			elm.setAttribute("class",elm.className.replace(" visible",""));
    		}
    	}
    }
    </script>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{padding:10px;font-family:'trebuchet ms';font-size:11px;}
    h1{font-size:18px;font-weight:bold;font-family:'helvetica';}
    h2{font-size:14px;font-weight:normal;background-color:gainsboro;padding:2px 5px;margin-top:10px;border-radius:5px;font-family:'arial';}
    p{margin-top:10px;}
    body>p{background-color:#fee;width:442px;padding:18px 12px;margin-top:0;text-align:justify;border:1px solid #fcc;}
    .toggle_wrapper{position:relative;width:450px;margin-top:50px;border:1px solid #777;padding:8px;border-radius:10px;min-height:33px;}
    a.content_toggle{cursor:pointer;position:absolute;bottom:-19px;right:5px;}
    a.content_toggle img{background:transparent url('./sprite_arrows.png') no-repeat left bottom;display:block;width:50px;height:38px;}
    a.content_toggle:hover img{background-position:right bottom;display:block;width:50px;height:38px;}
    .toggle_wrapper.visible a.content_toggle{bottom:auto;top:-19px;}
    .toggle_wrapper.visible a.content_toggle img{background-position:left top;}
    .toggle_wrapper.visible a.content_toggle:hover img{background-position:right top;}
    div.toggleable_content{display:none;}
    .toggle_wrapper.visible div.toggleable_content{display:block;}
    .toggle_wrapper.visible div.default{display:none;}
    a.content_toggle img{-moz-transition:background 0.25s linear 0s;}
    </style>
    </head>
    <body>
    <div class="toggle_wrapper">
      <a class="content_toggle" title="click to show/hide more content" onclick="toggle(this.parentNode);"><img src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==" alt="Up/Down Arrow" /></a>
      <div class="toggleable_content">
        <h1>Huzzah!</h1>
        <h2>I am content that can be toggled. The arrow in the corner uses a 4-state sprite image to handle normal/hover and hidden/visible states as needed.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec felis lorem, eget vestibulum nisl. Integer ac nibh vitae urna rhoncus pharetra sit amet quis erat. Nunc arcu diam, rutrum sed hendrerit sed, pretium in sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam interdum odio a ante adipiscing feugiat. Aenean condimentum egestas gravida. Nam venenatis, nibh vitae ultrices placerat, diam massa placerat purus, non gravida lectus sapien ac quam. Nam vestibulum, nisl et lacinia tincidunt, nulla quam sollicitudin erat, sed fermentum purus libero a tortor. Fusce id ante et urna vulputate fermentum.</p>
        <p>Proin feugiat pretium orci, non scelerisque massa vehicula non. Nam vulputate erat in sapien egestas quis venenatis diam commodo. Integer bibendum molestie turpis, id euismod lacus sagittis non. Fusce tempus, purus ut ullamcorper malesuada, mauris elit sollicitudin tellus, eu viverra nisi diam ac lectus. Nulla facilisi. Nulla consequat dui a nibh faucibus vel semper augue commodo. Vivamus at sapien nisi, et tristique enim. In eget tellus a eros mollis euismod. Vestibulum tristique porttitor purus, non lacinia odio tincidunt ut. In sed ipsum nisi. Ut commodo mauris at elit scelerisque porta. Etiam egestas sagittis lectus, a tincidunt eros venenatis a. Integer condimentum pulvinar eros, sed mollis ante elementum quis. Sed vehicula est eget ante ultrices rutrum.</p>
        <p>Integer nec nisl magna, sit amet gravida arcu. Proin euismod faucibus velit sed placerat. Quisque eget urna non orci tristique ultricies in imperdiet elit. Integer odio massa, vehicula tempor placerat sed, imperdiet ac magna. Quisque congue semper lorem, egestas iaculis libero fermentum ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget orci mauris. Suspendisse aliquam fringilla ligula eu semper. Mauris hendrerit ligula eget diam rhoncus imperdiet. Praesent velit lacus, rhoncus vitae vehicula sed, ullamcorper sit amet augue.</p>
        <p>Sed dui dolor, elementum vel molestie ac, posuere a leo. Donec ultrices lacus ac est accumsan euismod. Cras varius aliquet lorem eget sagittis. Donec est urna, elementum dictum rhoncus vel, feugiat non magna. Mauris cursus vulputate adipiscing. Suspendisse elit sem, scelerisque sit amet luctus ac, elementum sed augue. Quisque sagittis gravida hendrerit. Suspendisse sagittis cursus feugiat. Praesent rutrum nisi elementum turpis elementum vitae aliquet elit rutrum.</p>
      </div>
      <div class="default">
        <p>click the arrow in the corner to view more content...</p>
      </div>
    </div>
    <p>This is the next element in the DOM. You will notice an overlap from the arrow above when the content is hidden, yet when the content is shown the arrow is docked on the top right corner instead, which keeps it away from this element... I think that was everything you were looking for, and the only javascript involved is to add/remove part of the class name of the containing element for all of that to take effect.</p>
    </body>
    </html>
    You can see there how different states are used and only adjust the background position.

    Edit: I added a transition delay (Mozilla-based browsers only - I didn't care to bother with Chrome or Opera) to the sprite image location shifts to slow them down and better illustrate how sprite images work. To remove the delay just wipe out the very last line of the CSS in the header.
    Attached Thumbnails Attached Thumbnails Div positioning question-sprite_arrows.png  
    Last edited by Rowsdower!; 04-05-2012 at 01:22 PM. Reason: Added a transition delay (for Mozilla-base browsers only) for illustrative purposes...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I had to demo a prototype for customers yesterday and I didn't have the time to get the fancy hover stuff going but I did have the div hanging just like I wanted... but... the customer's laptop was plugged into the projector so I cavalierly just had him bring up IE and load my prototype screen-- the div was GONE... disappeared! So I couldn't demo the hide/show... argh... later I found with IE8 in "compatability mode" my CSS fails. Isn't that nice? Goes to show, always use your own machine for demoing prototypes that haven't been cross-browser tested.


  •  

    Posting Permissions

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