Results 1 to 5 of 5

Thread: Centralize Object

  1. #1
    Join Date
    Aug 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Centralize Object

    1) CODE TITLE: Place any HTML object to the center of the window/screen.

    2) AUTHOR NAME/NOTES: Navin Kaushal, India

    3) DESCRIPTION: Some time we really need to place specific objects to the center of the window/screen, specially some DHTML window containing some message.

    4) URL TO CODE:

    or, ATTACHED BELOW (see #3 in guidelines below):


    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>

    <title> Test Doc </title>
    <script language="javascript">
    <!--
    var Centralize={

    init:function(id)
    {
    obj = document.getElementById(id);
    this.MoveObject(obj);
    },

    MoveObject:function(obj)
    {
    this.GetCentralPoints() //Get current viewpoint numbers
    obj.style.left = this.scroll_left+(this.docwidth-obj.offsetWidth)/2+"px";
    obj.style.top = this.scroll_top+(this.docheight-obj.offsetHeight)/2+"px";
    },

    GetCentralPoints:function(){ //get window viewpoint numbers
    var ie=document.all && !window.opera
    var domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000 //Preliminary doc width in non IE browsers
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    this.scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
    this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
    this.docwidth=(ie)? this.standardbody.clientWidth : (/Safari/i.test(navigator.userAgent))? window.innerWidth : Math.min(domclientWidth, window.innerWidth-16)
    this.docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
    }
    } //End Centralize object

    //-->
    </script>
    </head>

    <body>

    <div id="testwin" style="background-color:#FFFFCC;border:2px dashed red;width:200px;height:100px;left:0px;top:0px;position:absolute;">
    Test Pop up
    </div>

    <form method=post action=""><br><br><br><br><br><br>
    <Input type="button" value="Place Div to Center" onclick="Centralize.init('testwin');">
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Don't you think you think a minimum value of 0 for both the top and left property would be good?

    I'd like to see:

    (ie)? and (/Safari/i.test(navigator.userAgent))? both eliminated in favor of direct testing of the object concerned. For example, instead of:

    Code:
    this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
    you could have:

    Code:
    this.scroll_left=window.pageXOffset | this.standardbody.scrollLeft | 0;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Erm, I think you mean ||. | is bitwise OR, not boolean, and should result in NaN if any one of those values is undefined.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    Erm, I think you mean ||. | is bitwise OR, not boolean, and should result in NaN if any one of those values is undefined.
    Try it:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    onload=function(){
    alert(window.pageXOffset | document.documentElement.scrollLeft | 0);
    }
    </script>
    </head>
    <body>
    
    </body>
    </html>
    Actually, you probably cannot though, because I don't think you have a browser that will find any of the values undefined. IE does find window.pageXOffset undefined and returns the left scroll state or 0.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    js> undefined | 4
    4
    Hm. Interesting. NaN appears to count for 0 in bitwise operations.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •