Resizable Rounded Corner Sliding DIVS

Posted by e. | Filed under Design, JavaScript

With the web 2.0 era in full swing, it’s hard NOT to find a site conforming to what seems to be the definitive web 2.0 look and feel. Unless you’ve been hiding under a rock for the past few years, you know what I mean by this. Sites (at least the updated ones) tend to be moving towards a more “desktop-y”, shall I say RIA feel. This movement causes a lot of frustration for developers and designers because achieving this look is no walk in the park. Due to browser inconsistencies, it is definitely not easy to achieve that desktop feel without at least a little headache. I was recently presented with a project that challenged me to come up with a way to implement a fluid user interface containing 2 separated sections that were re-sizable via a handle in the middle. Something along the lines of this:

This desktop effect which is usually handled by your operating system gets a little trickier when translated to your browser. So on to the problem. There are two constraints I was faced with:

  1. the 2 divisions are constrained inside a fixed width panel
  2. the 2 divisions have rounded corners

I did some research and found a couple resources. Ryan from Draconis Software posted a really good article on resizable divs which can be found here which forms the basis of my implementation. My other constraint was rounded corners. As you may or may not realize, there are MANY different ways to implement rounded corners. I needed to find a rounded corner solution that kept proportions when resizing. So, I browsed around and found this. Scott Schiller posted a really good resizable rounded corners solution here.

After a few attempts of merging the two together, I came up with this:

DEMO

A few notes about this implementation:

Right-click and view source to download. There are a couple things to notice if you want to customize this to your implementation. The first thing you will need to customize is your CSS. You’ll notice that the layout consists of a main panel, left panel, track, and right panel. These DIVS comprise the layout of the application.

<div id="mainPanel">
<div id="leftPanel">
<div class="dialog" style="z-index:2">
				......</div>
</div>
<div id="track">
                <img id="sliderHandle" src="demo/handle.gif" alt="" width="20" height="60" /></div>
<div id="rightPanel">
<div class="dialog">
                            .........</div>
</div>
</div>

The CSS defines the width and position shown below:

#mainPanel{
 position: relative;
 width:850px;
}
#leftPanel{
 top:0px;
 left:0px;
 width:542px;
 height:100%;
 position:absolute;
}
#rightPanel{
 top:0px;
 right:0px;
 width:292px;
 height:100%;
 position:absolute;
}
#track{
 width:850px;
 height:0px;
 position:absolute;
 left:122px;
 top:45px;
 cursor:move;
}

Your going to have to do a little fiddling with the width of both the left and right panel to fit the width of your main panel. If you notice the CSS above and you do the math, you can see that they don’t exactly add up to the width of the main panel because I left a little room for the width of the handle.

Once you get this correctly sized in your layout, the next thing you need to configure is your javascript. This implementation uses the Scriptaculous Slider control. You need to set the width of the left DIV, right DIV, and track in your JS function to the width you specified in your CSS. And finally, because of the way the Slider control works, you need to specify the minimum width allowed on the RIGHT DIV, and fiddle with the position of the slider to make it stop in the correct place once it hits that minimum width. One thing to note is that the Scriptaculous Slider uses a percentage (.01 - .99) to specify where the position of the handle will be positioned.

//Change these values to match your CSS ----------
var leftDivWidth = 542;
var rightDivWidth = 292;
 
var slider1 = new Control.Slider('sliderHandle','track',{
   sliderValue:0.5,
   onSlide:function(v)
   {
     //calls the debug function
     debug(slider1);
 
      //Change this value to match your CSS
      var sliderWidth = 850;
      var divDiff = sliderWidth * v - (sliderWidth / 2);
      var currLeftDiv = leftDivWidth;
      var currRightDiv = rightDivWidth;
 
      currLeftDiv += divDiff;
      currRightDiv -= divDiff;
 
      //Right-most boundary must be set here to limit the drag overflow of the sliders	
      // set the min value of the right div here
      if (currRightDiv < 110){
         currRightDiv = 110;
         currLeftDiv = 723;
         // fiddle around with the position of the slider here after it reaches the min width
         setSliderValue(slider1, .72);
      }
 
      document.getElementById('leftPanel').style.width = currLeftDiv + "px";
      document.getElementById('rightPanel').style.width = currRightDiv + "px";
   }
});

The demo also has a debug() JS function that will aid you in finding those widths if you’re having trouble finding the magic numbers.

A little forewarning, I have not tested this in IE so I’m not sure how well it will fare. If anyone has any suggestions or improvements, please feel free to comment on this post.

Tags: , , , ,

Permalink | June 11th, 2008

2 Responses to “Resizable Rounded Corner Sliding DIVS”

  1. Fatih Hayrioğlu'nun not defteri » 11 Haziran 2008 web’den seçme haberler » Form, Bağlantı, jQuery, ipuçları, Güzel, olmuş, Sitelerimizi, edebileceğimiz, güzel, araç Says:
    June 11th, 2008 at 6:32 am

    [...] Esnek yapılı genişlikte yuvarkla kenarlı alanlar yapmak. Bağlantı [...]

  2. Ewout Says:
    September 15th, 2008 at 7:09 am

    in IE 7 it looks excellent and works like a charm

Leave a Reply