CODEWITHSUNDEEP
jqueryhtmlcss
Tom Hellan
Tom Hellan

Reputation: 1

jquery and resizing div consistency

programmer, i have a problem with the resizing. i used jquery in order to drag the divs and resize them ,but after resizing them the img doesn't stay at its initial position i tried restyle the all tags changing their properties but i didn't find the answer i hope you understand my problem well :)

the close image: i couldn't post the img because of the site policy 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
      $(document).ready(function () {
          $("#context").draggable();
          $("#container").resizable({ alsoResize: ".border1" });


      });


  </script>

    <style type="text/css">

        .border{





    -moz-border-radius-bottomleft: 5px;


    -moz-border-radius-bottomright: 5px;


    -webkit-border-bottom-left-radius: 5px;


    -webkit-border-bottom-right-radius: 5px;

    -moz-border-radius-topleft: 5px;


    -moz-border-radius-topright: 5px;


    -webkit-border-top-left-radius: 5px;


    -webkit-border-top-right-radius: 5px;

     }

    .border1{





     -moz-border-radius-bottomleft: 3px;


    -moz-border-radius-bottomright: 3px;


    -webkit-border-bottom-left-radius: 3px;


    -webkit-border-bottom-right-radius: 3px;

    -moz-border-radius-topleft: 3px;


    -moz-border-radius-topright: 3px;


    -webkit-border-top-left-radius: 3px;


    -webkit-border-top-right-radius: 3px;

     background-color:White; border-style:solid; border-width:1px; border-color: Black;

     }


div.shadow {

    text-align:center; 

    padding-top:0px;

    background-color: Gray;

    border: 1px solid :#336699; 

    width:13px; height:13px;

    margin-top:3px; 

    margin-left:242px; 







    }





    </style>

</head>

<body id="p">



<div id="context"  style="margin-left:500px; margin-top:100px;width:260px; " >
<!--
        -->
    <div  id="container" class="border" style=" padding-top:1px;background-color:#336699 ; width:260px; height:195px; ">


       <div class="shadow" style=" position:relative; padding:0px 0px 0px 0px">

                   <img id="img"  style=" margin-right:auto;margin-left:auto;position: absolute; margin-top:0px; margin-bottom:0px" src="close.png" value="Remove Element" onClick="removeElement('p','context');" />

        </div>

        <div class="border1" style="  width:253px; height:167px; margin-top:8px ; margin-left:3px ;visibility:visible"></div> 

    </div>





</div> 







<script type="text/javascript">
    function show() {
        document.getElementById('container').style.visibility = 'visible';
    }

    function hide() {
        document.getElementById('container').style.visibility = 'hidden';
    }

    function removeElement(parentDiv, childDiv) {

        var child = document.getElementById(childDiv);
        var parent = document.getElementById(parentDiv);
        parent.removeChild(child);

    }



</script> 



</body>

</html>

Upvotes: 0

Views: 640

Answers (2)

BStruthers
BStruthers

Reputation: 958

If I understand you correctly, you want the image to stay in the top right corner. Since the image's parent div is set to position: relative and the image is set to position: absolute, try setting 

top: 0; right: 0;

UPDATE: Sorry, I misunderstood what you were trying to attempt in markup. Try setting position: relative on the container div, setting position: absolute on the shadow div and removing the styling from the image itself.

<div  id="container" class="border" style="padding-top:1px;background-color:#336699; width:260px; height:195px; position:relative;">
    <div class="shadow" style="position: absolute; top: 0; right: 5px;">
        <img id="img"  style="" src="close.png" value="Remove Element" onClick="removeElement('p','context');" />
    </div>

UPDATE 2: Here's a url that shows the above changes in action: http://dap.bstruthers.com/for_tom.html

Upvotes: 1

Linens
Linens

Reputation: 7942

Its because the image is inside the shadow container which sets the margin to outside the box when dragged. Heres a start I've moved the image into the container div and you can see it drags around with the box. You just need to do some more css styling now especially with the shadow class.

Upvotes: 0

Related Questions