How to Create a Resizable Interface in CSS3

The wide variety and types of screens used to display information make it necessary that your CSS3 commands allow the user to resize elements as needed. In most cases, you can simply allow the user to make the element any size. However, there may be situations where you need to monitor the amount of resizing so that you can tailor content to meet the needs of the container.

The following example shows how to resize an object and monitor its size. (You can find complete code for this example in the \Chapter 06\Interactions folder of the downloadable code as ResizeContent.HTML.)

$(function()
 {
 $("#ResizeMe").resizable(
  {
  minWidth: 200,
  minHeight: 60,
  resize: function(event, ui)
  {
  $("#Content")
   .html("Width: " +ui.size.width +
   "<br/>Height: " + ui.size.height);
  }
  });
 });

This example is interesting because it shows how to set properties as well as respond to events. In this case, the minWidth and minHeight properties keep the element a specific minimum size — the user can’t make the element smaller.

The code also responds to the resize event. There’s a special requirement for resizing you need to know about. The resizing container is separate from the content element. Here’s the HTML for this example:

<div id="ResizeMe">
 <p id="Content">
 Resizable Paragraph
 </p>
</div>

The associated style, #ResizeMe, provides a border around the <div>, sets the starting height and width, and centers the content in the container.

When you want to write content to the screen, you must use the content element, not the container element. Otherwise the sizing handles will disappear, and the user won’t be able to resize the element after the first time. In this case, the current size of the container appears as part of the ui object passed to the resize event handler.

You access the information though the size.width and size.height properties, as shown in the code.

blog comments powered by Disqus
Advertisement

Inside Dummies.com