Home/ Questions/Q 5983225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:12:00+00:00

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

  • 0

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="top-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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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%'});
    }
});
    • 0