Center <IMG> in <DIV>

Discussion in 'Javascript' started by Carl, Jan 11, 2007.

  1. Carl

    Carl Guest

    Hi all
    I have a javascript function that drags and drops an element (ie img)
    into a container (ie bordered div). The function works and returns the
    element and and container.
    My next step is to center the element in the container if the user is
    sloppy with positioning it.
    I can only test this on IE6 and IE5.5 and it fails. It positions the
    element too much right and low.
    Here is the function:
    function SnapToContainer(Container,El) {
    //X = left
    //Y = top

    var Cont_Style = Container.style
    var El_Style = El.style

    //get container's height and width and centers
    var Cont_Width = parseInt(Cont_Style.width);//int value
    var Cont_Center_X = Cont_Width/2//int value
    var Cont_Height = parseInt(Cont_Style.height);//int value
    var Cont_Center_Y = Cont_Height/2;//int value

    //get the container's left and top
    var Cont_Left = parseInt(Cont_Style.left);//int value
    var Cont_Top = parseInt(Cont_Style.top);//int value

    //get element's height and width and centers
    var El_Width = parseInt(El_Style.width);//int value
    var El_Center_X = El_Width/2;//int value
    var El_Height = parseInt(El_Style.height);//int value
    var El_Center_Y = El_Height/2;//int value

    //new positions
    var lft = Cont_Left + (Cont_Center_X - El_Center_X);//int value
    var tp = Cont_Top + (Cont_Center_Y - El_Center_Y);//int value

    //check if the container is larger than the element
    if (Cont_Width >= El_Width && Cont_Height >= El_Height)
    {
    //move the element
    El_Style.top = tp+"px";//string value
    El_Style.left = lft+"px";//string value
    //reset the starting coords
    El.yPos = tp;//int value
    El.xPos = lft;//int value

    return true;
    }

    return false;
    }

    Here are the elements:
    <p>
    <img id="helpI" src="help.gif" onMouseDown="return
    dragImg(this,event)" style="width=27;height=27"/>
    <img id="printI" src="print.gif" onMouseDown="return
    dragImg(this,event)" " style="width=27;height=27"/>
    <img id="emailI" src="email.gif" onMouseDown="return
    dragImg(this,event) style="width=27;height=27"/>
    </p>

    And here are some of the containers:
    <div id="placeholder1"
    style="position:absolute;left:50px;top:320px;width=150;height=50;border=solid
    2px">
    </div>
    <div id="placeholder2"
    style="position:absolute;left:50px;top:520px;width=150;height=50;border=solid
    2px">
    </div>
    Carl, Jan 11, 2007
    #1
    1. Advertising

  2. Carl

    RobG Guest

    Carl wrote:
    > Hi all
    > I have a javascript function that drags and drops an element (ie img)
    > into a container (ie bordered div). The function works and returns the
    > element and and container.
    > My next step is to center the element in the container if the user is
    > sloppy with positioning it.
    > I can only test this on IE6 and IE5.5 and it fails. It positions the
    > element too much right and low.


    Your issue is with CSS, not javascript. Once you have worked out how
    to properly center your element, then you can apply script to make that
    happen.

    Ask about centering the image at
    comp.infosystems.www.authoring.stylesheets

    <URL:
    http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets
    >


    But fix all the syntax errors first.

    > Here is the function:
    > function SnapToContainer(Container,El) {

    [...]
    > var Cont_Center_X = Cont_Width/2//int value


    Cont_Center_X will only be an int if Cont_Width is even. Similarly for
    other values divided by 2 that you seem to expect to give integer
    results.

    [...]

    > Here are the elements:
    > <p>
    > <img id="helpI" src="help.gif" onMouseDown="return
    > dragImg(this,event)" style="width=27;height=27"/>


    You have some typos here and elsewhere:

    - you appear to be using XHTML, attribute names must be lower case
    - use colons ":" for CSS property/value separators, not equals "="
    - CSS lengths must have a unit unless the value is zero


    --
    Rob
    RobG, Jan 11, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    500
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    738
    David Håsäther
    Jul 3, 2005
  3. Jopek
    Replies:
    7
    Views:
    384
    dorayme
    Apr 26, 2009
  4. Replies:
    7
    Views:
    165
    Tad McClellan
    Jun 22, 2006
  5. Gernot Frisch

    center div over another div

    Gernot Frisch, Mar 16, 2006, in forum: Javascript
    Replies:
    1
    Views:
    170
    Randy Webb
    Mar 16, 2006
Loading...

Share This Page