Jquery resizable shifts my DOM element_问答_开发者

开发者 https://www.devze.com 2023-03-10 15:27 出处：网络

I have the following code <html> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />

I have the following code

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>

<style type="text/css">
  #main-content {
    width:300px;
    height:500px;
    background:#00F;
    overflow:auto;
  }
  #top-name , #top-ip {
    background:#000;
    color:#FFF;
    width:80%;
    position:relative;
    left:10%;
    margin-bottom:5px;
    margin-top:5px;
  }
 </style>

 <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>
$(function() {
    $("#top-ip").resizable({
        handles: 'n, s'
    });
    $("#extrainfo").hide();
    $("#top-name").mouseenter(function() {
        $("#extrainfo").fadeIn();
    });
    $("#top-name").mouseleave(function() {
        $("#extrainfo").fadeOut();
    });
    var stop = false;
    $( "#accordion h2" ).click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });
    $( "#accordion" )
        .accordion({
            header: "> div > h2"
        })
        .sortable({
            axis: "y",
            handle: "h2",
            stop: function() {
                stop = true;
            }
        });
});
$(function() {
    $( "#accordion" ).resizable({
        maxHeight: 100,
        resize: function() {
            $( "#accordion" ).accordion( "resize" );
        }
    });
});
</script>
    </head>

    <body>
    <div id="main-content">
    <div id="top-name">
    Name here
    <div id="extrainfo">
     blanl</div>
     </div>
     <div id="to开发者_运维知识库p-ip">
     Resizalbe element
     </div>
     <div id="accordion">
<div>
    <h2>Player List</h2>
    <div style="background:#F00">
    OMG OMG OMG OMG
    </div>
</div>
    <div>
    <h2>Configs</h2>
    <div>
    OMG OMG OMG OMG

    sdg<br />
    SDF
    sDsag
     sdzh
     z<br />
     zh<br />
     zh
    </div>
</div>
<div>
    <h2>Comming Soon</h2>
    <div>
    Comming Soon Zong
    OMG OMG OMG OMG
    </div>
</div>
<div>
    <h2>Server Disscussion</h2>
    <div>
    Server Disscussion
    Server Disscussion
    </div>
</div>
<div>
    <h2>comming Soon</h2>
    <div>
    comming Soon
    comming Soon
    </div>
</div>

     </div>
     </div>
    </body>
     </html>

When i resizable the ip element it moves the element a bit left y?

demo here Demo

It's the percentage left property on the #top-name, #top-ip selector. I was surprised to find the jQuery UI #2421 enhancement request has been around for 3 years!

Until that is fixed, if you make the left property a non-percentage value (30px seems about right), the resize works as expected.

Edit: I've found a workaround. You can use the resize function to keep setting the left value during the resize. If you change the code to this, the resize works as expected and does not alter the left position of the element.

$("#top-ip").resizable({
    handles: 'n, s',
    resize: function(event, ui) {
        $(this).css({left:'10%'});
    }
});

Jquery resizable shifts my DOM element

精彩评论

关注公众号

热门标签

图文推荐

Jquery resizable shifts my DOM element

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：