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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Sliding Div off-screen

    Hey everyone,

    I want to have a share bar which only displays a tab at the side of the screen and on mouseover, slides out to display the share links then slides back again on mouseout.

    I have tried using the following which on face value seems to work:

    CSS:
    Code:
    #sharebox{
      width:165px;
      height:287px;
      position:absolute;
      right:-133px;
      top:180px;
      background-image:url("../images/share_bg.png");
      background-repeat:no-repeat;
      }
      
     #shareboxover{
      width:165px;
      height:287px;
      position:absolute;
      right:0px;
      top:180px;
      background-image:url("../images/share_bg.png");
      background-repeat:no-repeat;
      }

    Div:
    Code:
    <div id="sharebox" onmouseover="this.id='shareboxover'" onmouseout="this.id='sharebox'">&nbsp;</div>
    The problem with this is that although it appears to work, on closer inspection it actually extends the width of the screen and you can scroll left and right to see the whole div without moving over it.

    How can I set the div to actually be off-screen rather than just extend it?

    Thanks
    Last edited by YourDirector; 03-13-2012 at 04:39 PM. Reason: Resolved

  • #2
    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 can't "hide" things off of the right-hand side of the page like you can on the left. But that is not inherently a problem, because you can always simulate the effect.

    Keep the setting for "right" at zero for both cases and instead of moving the element on mouseover, just have the default state use a narrow width and the hover state full-width. You will probably need to set overflow:hidden; on the default/collapsed state's style (depending on what actually ends up being in the section).

    The code would work something like this (my changes are highlighted):
    Code:
     #sharebox{
      width:32px;/*165px;*/
      height:287px;
      position:absolute;
      right:0px;/*-133px;*/
      top:180px;
      background-image:url("../images/share_bg.png");
      background-repeat:no-repeat;
      overflow:hidden;
      }
      
     #shareboxover{
      width:165px;
      height:287px;
      position:absolute;
      right:0px;
      top:180px;
      background-image:url("../images/share_bg.png");
      background-repeat:no-repeat;
      }
    I should mention though that javascript is not needed for this effect. And even if it were necessary to use javascript for this, you are using a pretty unusual method of achieving your desired effect. Anyway, to do this entirely without javascript change your code to this:

    HTML:
    Code:
    <div id="sharebox">&nbsp;</div>
    CSS:
    Code:
     #sharebox{
      width:32px;/*165px;*/
      height:287px;
      position:absolute;
      right:0px;/*-133px;*/
      top:180px;
      background-image:url("../images/share_bg.png");
      background-repeat:no-repeat;
      overflow:hidden;/*may be needed, may not be needed*/
      }
      
     #sharebox:hover{
      width:165px;
      overflow:auto;/*may be needed, may not be needed*/
      }
    That works exactly the same way as the javascript method, and will function properly in IE7+ and in FF, Chrome, and pretty much any mainstream browser. And it works without bloating the code.
    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

  • Users who have thanked Rowsdower! for this post:

    YourDirector (03-13-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Wonderful, thank you very much
    That worked perfectly! And thanks for the extra advice.


  •  

    Posting Permissions

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