JQuery и изменение размера Div согласованности - PullRequest
Новая
       0

JQuery и изменение размера Div согласованности

0 голосов
/ 22 марта 2011

программист, у меня проблема с изменением размеров. я использовал jquery для перетаскивания элементов div и изменения их размера, но после изменения их размера img не остается в исходном положении, я попытался изменить все теги, изменив их свойства, но я не нашел ответа, надеюсь, вы понимаете мою проблему хорошо :) 1001 *

закрытое изображение: я не смог опубликовать img из-за политики сайта 

    <!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>

Ответы [ 2 ]

1 голос
/ 22 марта 2011

Если я правильно вас понимаю, вы хотите, чтобы изображение оставалось в верхнем правом углу.Так как родительский div изображения установлен в положение: относительное, а изображение установлено в положение: абсолютное, попробуйте установить 

top: 0; right: 0;

ОБНОВЛЕНИЕ: Извините, я неправильно понял, что вы пытались сделать в разметке.Попробуйте установить положение: относительное в div контейнера, установить положение: абсолютное значение в div тени и убрать стилизацию с самого изображения. 

<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>

ОБНОВЛЕНИЕ 2: Вот URL-адрес, на котором показаны вышеуказанные измененияв действии: http://dap.bstruthers.com/for_tom.html

0 голосов
/ 22 марта 2011

Это потому, что изображение находится внутри теневого контейнера, который при перетаскивании устанавливает поле за пределами поля. Вот начало Я переместил изображение в контейнерную ячейку, и вы можете видеть, что оно тащит с собой коробку. Вам просто нужно сделать немного больше стилей CSS, особенно с классом тени.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...