Home arrow JavaScript arrow Page 3 - Displaying Pinned Handles with Resizable Containers with the Ext JS Library

Adding pinned handles to enhance the visual aspect of resizable containers - JavaScript

As a web designer, you know that building resizable divs for a web site can be a pretty challenging task, particularly if you’re planning to do this from scratch. There’s no need to reinvent the wheel, though, since there are a few handy JavaScript frameworks available nowadays, such as Ext JS and jQuery, that allow you to create this class of dynamic containers in a truly painless fashion. So if you’re interested in learning how to incorporate dynamic resizing capabilities into certain containers on your web site using the Ext JS package, then this series of articles might be what you’re looking for.

TABLE OF CONTENTS:
  1. Displaying Pinned Handles with Resizable Containers with the Ext JS Library
  2. Review: building simple resizable containers using Ext JS
  3. Adding pinned handles to enhance the visual aspect of resizable containers
  4. Using the preserve ratio feature to enhance the behavior of resizable containers
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
March 30, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

Adding pinned handles to a resizable container is a pretty straightforward task that can be tackled with minor hassles. It only requires that you feed the “Resizable” class that you learned before an additional input argument, not surprisingly called “pinned.” 

However, this is only boring theory that needs to be made real with practice, right? Thus, below I set up a new example that illustrates how to add pinned handles to a selected div. 

Have a look at it, please:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on creating a resizable container with pinned handles</title>

<link rel="stylesheet" type="text/css" href="ext-all.css" />

<link rel="stylesheet" type="text/css" href="examples.css" />

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #eee;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#resizable{

width: 350px;

padding: 10px;

background: #9cf;

}

</style>

<script type="text/javascript" src="ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">

// build resizable container when web page is loaded

Ext.onReady(function(){

var resDiv= new Ext.Resizable('resizable', {

wrap: true,

pinned: true,

dynamic: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Example on creating a resizable container with pinned handles</h1>

<div id="resizable">

<p>These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container.</p>

</div>

</body>

</html> 

As I stated before, the pinned handles are added to the resizable div by specifying a “pinned: true” parameter within the “Resizable” class, a procedure represented fairly clearly by the above code sample. 

Apart from studying how this particular example works, you may want to look at the following screen capture. It shows how the pinned handles are displayed all the time around the container, regardless of whether or not the element is being resized:

 

So far, so good. At this point, you hopefully learned how to create neat pinned handles on all of the boundaries of a resizable container. What comes next? Well, as you may have noticed, all the examples developed so far create resizable divs that don’t preserve their width/height ratio. Obviously, keeping the proportional aspect of the divs can be really useful, not to say mandatory, particularly when working with resizable images.  

Considering this requirement, in the last section of this tutorial I’ll be explaining how to build resizable containers that will be capable of preserving their width/height ratio.  

This topic will be discussed in depth in the segment to come. To learn more about it, click on the link below and keep reading. 



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: