Centering Div On Page

Discussion in 'JavaScript' started by fireflyproject, Aug 12, 2008.

0
  1. #1
    I'm trying to center a div via javascript. From what I've gathered, this will need to be done with an offsetHeight and offsetWidth object.

    Basically what I would like to do is have a div offscreen positioned absolutely. Then at the click of a button/link/whatever have the div pop into the center of the screen, no matter where the user is on the page.

    I've read some other blogs/forums with this topic, but none of them seem to come to much of a conclusion.

    Thanks for any tips on this.
     
    fireflyproject, Aug 12, 2008 IP
  2. yleiko

    yleiko Peon

    Messages:
    74
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Instead of changing its position from offset of window to visible area, I'd suggest to change its display type.
    Also you can have some help from css


    
<script language="javascript">
function showMyDiv()
{
document.getElementById("hiddendiv").style.display="block";
}
</script>
<style>
.mydiv { position:fixed; _position:absolute; top:400; _top:expression(eval(document.body.scrollTop)+400); right:400; }
</style>
<body>
<div class="mydiv" id="hiddendiv" style="display:none">
some div content
</div>
<input type="button" value="show my div" onclick="showMyDiv()"  />
</body>
    HTML:
     
    yleiko, Aug 12, 2008 IP
    fireflyproject likes this.
  3. fireflyproject

    fireflyproject Active Member

    Messages:
    969
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    70
    #3
    Oh yes. That's perfect!

    Can you tell me what the _property is called? I've not seen that before and I've been doing CSS for quite some time.

    Thanks! +rep
     
    fireflyproject, Aug 13, 2008 IP
  4. Kaizoku

    Kaizoku Well-Known Member

    Messages:
    1,261
    Likes Received:
    20
    Best Answers:
    1
    Trophy Points:
    105
    #4
    what does the property _position do? I like to know as well.
     
    Kaizoku, Aug 13, 2008 IP
  5. yleiko

    yleiko Peon

    Messages:
    74
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    underscore is used as a css hack for ie.
    you know ie (especially ie6) acts differently when it comes to css. (ie is stupid)
    So when you are coding css, either you will use javascript and first detect the browser and then write your css code on the fly (which would be a real pain, for both user and coder), or you wont use some css propereties where stupid ie acts differently.
    At this point, someone came with a great idea and found this solution.
    underscore comes at this point in to the play.
    when a property has underscore (for example _position), other browsers doesn't recognize it directly ignore that expression, but ie knows it uses at like it is position.
    for ie _position equals position,
    for others _position doesn't mean anything.

    so,
    when you need write different things for ie and others, all you need to do is declare your css as follows

    position:absolute; _position:fixed

    so,
    ie first reads position absolute, but then reads position fixed, and the latter one replaces the first one.
    other browsers read position absolute, but ignore _position.
     
    yleiko, Aug 14, 2008 IP
  6. Kaizoku

    Kaizoku Well-Known Member

    Messages:
    1,261
    Likes Received:
    20
    Best Answers:
    1
    Trophy Points:
    105
    #6
    Oh, does that work for _.someclass or _#someid and does it validate through w3?
     
    Kaizoku, Aug 14, 2008 IP
  7. fireflyproject

    fireflyproject Active Member

    Messages:
    969
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    70
    #7
    I doubt very highly that it will validate. However if you're a professional developer and have been for a while (shh) you probably don't validate every single line of code. You just do your best and if it works, then so be it!
     
    fireflyproject, Aug 14, 2008 IP