Home/ Questions/Q 5950301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T17:22:27+00:00

I am using jQuery plugin for resizing the elements. Elements height & width is

  • 0

I am using jQuery plugin for resizing the elements. Elements height & width is set in percentage (%) not in pixel. Whenever i re-size any element it’s height & width changes to pixels which is fixed but i wanted this change in percentage.

I am sure there must be some technical issue for this but there would be solution too.

#parentDiv { height:100%; width:100%;}

.image { height: 25%; width: 25%; }  

<body>
<div id = "parentDiv">
    <div class="image" id="image1" onmouseover="resizeMe(this);"> </div>
    <div class="image" id="image2" onmouseover="resizeMe(this);"> </div>
</div>  

<script> 
  function resizeMe(obj) {
        $(#obj.id).resizable();  }

</body>

But once i re-size id=image1, below is HTML code. it contains the height & width size in pixels. Does anybody light on it, How can i manage to re-size in percentage only. 

<div class="image" style="width: 345px; height: 52px;">
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jQuery gets its values from the browsers DOM engine, which always return normalized values in pixels no matter how they were intially set.

    So the only way you will be able to do this is by recalculating the percentages based on elements width/height and parents width/height once the resizing has stopped.

    $(".image").resizable({
    autoHide: true,
    stop: function(e, ui) {
        var parent = ui.element.parent();
        ui.element.css({
            width: ui.element.width()/parent.width()*100+"%",
            height: ui.element.height()/parent.height()*100+"%"
        });
    }
});

    See the above in action on jsFiddle

    Notice how I’m setting the width/height with .css instead of using .width and .height. This is because the latter will be normalized by the DOM engine and turned into pixels.

    Now to some feedback on your code. It’s quite a mess to be honest. It’s a really bad practice to use inline styling and scripts. Set the width/height of #parentDiv with css just as you did with .image. And don’t use onmouseover attribute. Instead bind the event with jQuery using .bind.

    Also you shouldn’t make the elements resizable on mouse over. It should be done once, when the document is ready. Use the autoHide option to hide the handlers while the mouse isn’t over the element. An alternative is to bind enable and disable methods to mouse hover, but that will not have the same result.

    • 0