jquery et redimensionnement div cohérence

programmeur, j'ai un problème avec le redimensionnement. J'ai utilisé jquery pour faire glisser les divs et les redimensionner, mais après les avoir redimensionnés l'img ne reste pas à sa position initiale j'ai essayé de relooker tous les tags changeant leurs propriétés mais je n'ai pas trouvé la réponse j'espère que vous comprenez mon problème bien :)jquery et redimensionnement div cohérence

l'image près: je ne pouvais pas poster le img à cause de la politique du site

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

Source

2011-03-22 Tom Hellan

Postez le src de l'img et quelqu'un avec assez de réputation (comme moi) l'éditera dans votre message. – Kyle

Si je comprends bien, vous voulez que l'image reste dans le coin supérieur droit. Depuis est défini le div parent de l'image à la position: relative et l'image est en position: absolute, essayez de

top: 0; right: 0;

MISE À JOUR: Désolé, j'ai mal compris ce que vous essayez de tenter dans le balisage. Essayez de définir la position: relative sur le conteneur div, la position de réglage: absolute sur le div shadow et en supprimant le style de l'image elle-même.

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

MISE À JOUR 2: Voici une URL qui montre les changements ci-dessus en action: http://dap.bstruthers.com/for_tom.html

Source

2011-03-22 11:32:47 BStruthers

Son parce que l'image est à l'intérieur du conteneur d'ombre qui fixe la marge à sortir des sentiers battus lorsqu'ils sont traînés. Heres a start J'ai déplacé l'image dans le div conteneur et vous pouvez le voir se traîne avec la boîte. Vous avez juste besoin de faire un peu plus de style CSS en particulier avec la classe d'ombre.

Source

2011-03-22 15:39:30 LostLin

jquery et redimensionnement div cohérence

Répondre

Questions connexes