Custom Scrollbars
I've been developing a portal site using ruby on rails and script.aculo.us and I wanted to be able to scroll the contents of some of the 'portlets' but I wanted the scrollbars to match the overall appearance of the page, which the standard scrollbars don't. I'd seen this done before so I assumed that script.aculo.us would have implemented such a thing, but they hadn't. I managed to find some examples of scrollable div javascript libraries on the net of which the best are probably fleXcroll and the scrolling layer content page at dyn-web, but I had a couple of concerns like: Would they work if the content were updated via Ajax? Would they live in harmony with script.aculo.us?
So in the end I decided to implement my own (I seem to live my life saying to myself; 'how hard could it be'?). This is the result. It is certainly not as accomplished as fleXcroll, but it works fine if content is updated using Ajax and it re-uses scipt.aculo.us classes so its pretty small and is guaranteed to play nice with it too. (BTW - its based pretty heavily on this one. I couldn't see any licensing terms, but credit where credit is due).
Here is an example:
To use, you will need to include the scriptaculous scripts in the page (as it uses them pretty heavily) and then simply include scroller.js in your page, for example:
<script src="/javascripts/prototype.js" type="text/javascript"></script> <script src="/javascripts/slider.js" type="text/javascript"></script> <script src="/javascripts/scroller.js" type="text/javascript"></script>
Add the class makeScroll to any div that you want to have a scrollbar, set its overflow style to hidden and make sure it has a height, e.g.:
<div style="height:165px; overflow:hidden" class="makeScroll"> somecontent </div>
And the script will do the rest.
If you use Ajax to re-write the original div you will need to make sure it has an id and then call Scroller.reset(<id>) once the update is complete. For example if the div has id body_1 then you should call Scroller.reset("body_1") to wrap just that div with a scrollbar.
The appearance of the scrollbar can be controlled using a stylesheet. The scrollbar itself has class scroll-track, the thumb (the part you grab) has class scroll-handle. This is the stylesheet I use at the portal above:
.scroll-track{
height:10px;
width:10px;
background:black;
}
.scroll-handle{
border: 1px solid black;
height:10px;
width:10px;
background:#5B207B;
cursor:pointer;
}
Obviously you could set the classes to use images as the background too if you wanted - which is what the examples on this page do.
The scrollbar on the left adds buttons at the top and bottom of the bar and adds rounded end-cap to the thumb. These additions (and scrolling using the mouse wheel) have been added by Paul Castle. To add scroll buttons you need to define a CSS style for the classes scroll-track-top and scroll-track-bot. To define end-caps for the thumb you need to define styles for the classes scroll-handle-top and scroll-handle-bot.
You can get the file at my subversion server. Its been tested in Firefox and IE6, so can't say if it works in other browsers. BTW the comments in the file are designed to be rendered using NaturalDocs - which was the only document generator I could find that handled prototype-style JavaScript.
See the NaturalDocs here.
December 4th, 2006 at 12:43 am
Hi Jools, thanks for the reference.. I’d like to correct one thing, fleXcroll is able to cope with ajax changes, just like any other change. Just calling element.scrollUpdate(); after the content is injected is enough. That said, your solution is just fine.
December 4th, 2006 at 9:40 am
Too bad it doesn’t support arrow keys, page up/down, or mouse scroll wheels. But then, I haven’t seen a custom scroll bar that does yet.
December 4th, 2006 at 7:43 pm
I belive fleXcroll supports all of those. I thought I needed scroll arrows too, but the reality is I never actually use them. As for page up/down and scroll wheel support - I agree it would be nice. I will add them when I get time, or if someone else wants to add them I am happy to give them write access to subversion.
January 22nd, 2007 at 3:19 pm
hi!
i really like your implementation. I would like to use it to display the news on our website, and have it scroll to a specific news item (we publish our upcoming events a few months in advance; it would be nice that it centers to the most current date). So that means, have it scroll to, says, top: -450px;
Do you think it is possible? Also, do you plan to add more functionalities?
Anyway, i will try to do it, and also add up/bottom arrows.
Thanks for sharing!
Alexandre
January 22nd, 2007 at 8:21 pm
@Alexandre: sure. You should set the slider value as appropriate (i.e. this.slide.setValue(…)).
Yes I plan to work on it some more - in my case I want to add support for mouse scroll wheels etc. But at the moment I am working on something else. Let me know if you add the functionality you describe.
January 23rd, 2007 at 1:00 am
Hi judge,
i’m half way implementing the arrows (i ‘ve modified heavily the decorate() function ).
I have other scroll controllers ideas, so i’ve set up the html a bit differently: i’ve created a “scrollController” div that contains the arrows and the scrollbar. it didn’t break anything so far
Now, i’m about to add the actual scroll up / down behaviors. That’s a good lesson for someone that is not used to javascript
I hope i’ll manage, and let you know…
January 23rd, 2007 at 4:31 pm
Hi judge,
at this point i have a working version of the scrollUp/Down buttons. It’s far from perfect, but i need some help/ tips.
Like, for the moment, i can scroll per “click” event, but if i do it onmousedown, or onmouseover, it just does it once, and not continuously.
I would be grateful if i could show you the code i came up with, maybe you can see if i’m going in the right direction?
thanks,
alexandre
January 27th, 2007 at 7:11 am
Hi,
I built something similar but on top of the jQuery library. It’s got up/down buttons and listens to the mouse wheel (including when it’s nested) - you may want to check the code out for ideas on how to add these functionalities to yours…
jScrollPane page
Some more examples
Cheers,
Kelvin
June 1st, 2007 at 12:34 pm
I have a problem with this implementation of the custom scrollbars. Whenever I try to add a border to either left or right side in the ’scroll-track’ class, the whole scrollbar disappears in Firefox, leaving just the space freed up by the script.
Everything works fine in IE though.
July 7th, 2007 at 12:51 am
I’m coding the UI for a site that uses the Rails/Prototype/Scriptaculous trio and the customer doesn’t have much money so instead of coding my own custom scroller, I went with yours. Thank you very much for your scroller. You should put credits in the source code. I will put a link to this page.
I have pages with A LOT of content so the JS needs to be optimized. I had to change a few things in your code for performance reasons as well as one thing that was just wrong: never ever use innerHTML to manipulate DOM elements. This is a poor toString() method that will screw up other scripts modifying the DOM simultaneously. That was my case and I had to rewrite your code:
while (this.outerBox.hasChildNodes()) {
this.innerBox.appendChild(this.outerBox.firstChild);
}
this.outerBox.appendChild(this.innerBox);
//this.innerBox.innerHTML = this.outerBox.innerHTML;
//this.outerBox.innerHTML=”";
The other things are less important. One is an iteration with a for…in that should not be used with Prototype:
http://prototypejs.org/api/array
Scroller.updateAll = function () {
$H(Scroller.ids).each(function(pair) {
Scroller.ids[pair.key].resetScrollbar(true);
});
}
August 29th, 2007 at 9:11 pm
Love it! So light weight and easy to manage.
Any chance you’ve started working on enabling wheel scroll?
I guess another feature you could have - like you don’t have enough on your plate as it is - is having up and down buttons, not just a scrollbar.
Thanks again!
September 7th, 2007 at 4:17 am
Hi Guys,
this custom scroll bar is not compatible with mozilla 1.5. if any body know how can i compatible it with mozilla1.5. please suggest me.
October 23rd, 2007 at 9:10 am
Hi, I met one problem. it is happening when i look the scroller with Internet Explorer 6. I click over the scrollbar thumb and start to drag it. At this moment, the image used to be the thumb dissappears, and it appears after some seconds. In the satus bar it seems like it is loading the image again. Why is this happening and how can it be avoided?
Thanks
December 3rd, 2007 at 6:41 am
Hi,
i was looking for a slider like this that works with Ajax. It’s ok with Firefox but not with IE7, Safari 2 or Safari 3. And yes, i’m using the Scroller.reset after the ajax update! if somebody has a suggestion…
Thanks
December 13th, 2007 at 8:28 am
I’ve not tested with IE7 but i have a working version on Safari 3.0.2.
I’m also using YUI Animated Scrolling (http://developer.yahoo.com/yui/examples/animation/scroll.html) buti i cannot see how to combine the automatic scrolling from YUI with the placement of the scrolling Any help ?
January 11th, 2008 at 1:27 pm
I’m wondering if this will work inside of Lightwindow from Stickmanlabs. Before I found your prototype script, I tried merging jQuery with LW. It showed up, but won’t go away…like a bad house guest.
March 4th, 2008 at 12:02 am
[…] As Aaron already said, scrollbar colors are only supported by IE and partially by Opera. Quirksmode has a good browser support list that verifies that statement. If you want a crossbrowser solution you should use javascript, i.e. flexscroll, scroller.js using the prototype library or jScrollPane for jQuery. […]
March 7th, 2008 at 12:46 pm
What brilliant work - between fleXcroll and this, I’m in scrolling heaven. I’m now purposefully making every element in all pages scrollable. In fact, now my wife and cat are both scrollable.
Re: people who are seeing oddities in Firefox, I did too for a short time… had to remove scriptaculous transitions and after doing so, the scroller appears for me in firefox, ie and safari so far w/out problems.
Problematic code:
new Ajax.Updater(’divScroll’, page, {onComplete:function(){ Element.hide(’divScroll’); new Effect.Appear(’divScroll’); Scroller.reset(’divScroll’); }, asynchronous:true, evalScripts:true});
Happy code:
new Ajax.Updater(’divScroll’, page, {onComplete:function(){ Scroller.reset(’divScroll’); }, asynchronous:true, evalScripts:true});
March 26th, 2008 at 8:16 am
Hi this may be blatently obvious but how can i get a link within the scolled text to change the vertical position of the scrolled text itself.
For example, I have a block of faq text to go in the scroll box. This content consists of all the questions at the top of the list, followed by each question and answer in order. So the customer can just scroll down through them at their leisure or click on any of the questions to jump to that question exactly.
I saw in a previous comment
this.slide.setValue(…)
but alas i am lame at javascript and i don’t even know how to target the javascript object from a link within the html.
Can someone please give me an example, preferably with a brief explanation of how and why please?
Thanks, great script by the way!
May 21st, 2008 at 4:37 am
I’m having troubles getting these scrollbars to work with Scriptaculous’ Autocompleter. Sometimes, it seems, the page decides to load the scrollbars and sometimes it doesn’t. Funny thing is: When it doesn’t load the scrollbars, autocompletion works perfectly fine - but when it does load the scrollbars, the Autocompleter doesn’t work (it doesn’t send the AJAX request so I guess the change event doesn’t fire properly).
Has anyone had similar problems? If so, it would be great if you could contact me at clemens [ at ] railway [ dot ] at.
Thanks a lot,
- Clemens
June 13th, 2008 at 8:55 am
I’ve been so very happy with both jlog and flexcroll… until the dreaded Microsmut opened the gaping ugly maw of IE8…
Can the developers or our forum friends say if these will ever be IE8 compatible? I have a feeling that I may be forced back to standard scrollbar hell. Which really isn’t hell. Just bland purgatory.
Sean
June 13th, 2008 at 12:46 pm
There’s always hope. I’ve not used IE8. If Scriptaculous works with it then there’s a shouting chance that I might make this work.
June 19th, 2008 at 9:58 am
Hi,
Nice Work, But actually I ran into deep problems: As long as i use it without extra windows, everything works as expected. But if i try to get the scrollbars work in a “different window” like the prototype implementation of a window ( http://prototype-window.xilinus.com ) I don’t get the scrollbars working.
Does anybody have an idea how to get the scrollbars work in a window created by prototype’s window implementation ?
Thanks for any suggestions.
July 19th, 2008 at 3:13 pm
Hi Judge,
Great script - my scrollbars look vastly improved now!
I do have one little thing I’m wrestling with though. When I have tags that jump further down a page (for example in an FAQ where the questions are up at the top and then the answers are down further) I cannot seem to get the scrollbar to redraw when someone clicks on a question and is jumped down the page. Any suggestions you can provide would be sincerely appreciated!
Thanks,
Devon
Here’s some sample code:
1. Question 1
…
1. Question 1’s answers
July 31st, 2008 at 12:51 pm
The script with extra features I sent to your mail (js + css).
Greetings
August 2nd, 2008 at 8:22 pm
Thanks. I’ve incorporated your mods into the script and updated the article to describe them.
August 2nd, 2008 at 10:44 pm
This Script was tested in IE7, Firefox 3.0.1 (Win and Linux), Opera 9.51 (Win) and Safari 3.1.2 (Win only) by me, whitout problems apparently.
Greetings, Paul Castle
August 31st, 2008 at 5:15 pm
Hey Judge,
Nice job with the code! Any chance you can add an option to keep the scroll-handle element a fixed height rather than automatically sizing based on content (though that is a *very* nice touch)?
I’m working on a band web site for a friend of mine and I wanted to use a fixed size guitar pick image as the scroll handle. I’ve tried setting the scroll-handle-top and scroll-handle-bot CSS elements to be the top and bottom halves of the image (that part works fine), but I can’t seem to force the scroll-handle element to be of zero height. Having the code check for a forced zero height before overriding the value with an auto scaling the scroll-handle height would be nice.
September 11th, 2008 at 10:18 am
i am not able to implement .scroll-track-top and .scroll-track-bot and i also found out that on your site you have used css for id -> #scroll-track-top-2 and #scroll-track-bot-2. on my local server , scroll-track-top-1 is created instead of scroll-track-top-2. can you please confirm why different ids are being generated on my local server?
September 11th, 2008 at 12:10 pm
The CSS class (.scroll-track-top etc.) should work. If you’re using Firefox with Firebug installed, take a look at the elements and you will see that that class is defined.
The id (e.g. scroll-track-top-1 etc.) is generated per-scrollbar - the first scollbar will have an ID of scroll-track-top-1, the second scroll-track-top-2 etc.
September 12th, 2008 at 6:12 am
thanks for the details but i am still not able to use those scroll-track-top/scroll-track-bot classes and one thing which i found out on my local server is that scroll-track is taking same height as scroll-innerBox whereas on this page they are of different heights i.e scroll-track = height:145px and scroll-innerBox = height:165px. the remaning 20px height is taken by scroll-track-top and scroll-track-bot evenly. i wonder if any one else has faced the same issue?
September 17th, 2008 at 5:01 am
Amazing script!!! Never knew implementing custom scrollbars could be this easy. Thanks for making it so simple.
October 30th, 2008 at 5:01 pm
Thank you SOOO much, truly awesome, saved my day.
Great solution, easy, not too hard to tweak, already love the scriptaculous, perfect.
Great service to everyone.
November 7th, 2008 at 1:41 am
The scroller grabs every mouse wheel event of a mouse hovering over a div with the class makeScroll and does not distinguish between divs with added scrollbars and those without.
The solution is to cut the lines
this.domMouseCB = this.MouseWheelEvent.bindAsEventListener(this, this.slider);
this.mouseWheelCB = this.MouseWheelEvent.bindAsEventListener(this, this.slider);
this.trackTopCB = this.tracktopEvent.bindAsEventListener(this, this.slider);
this.trackBotCB = this.trackbotEvent.bindAsEventListener(this, this.slider);
//Events control
$(this.outerBox).observe(’DOMMouseScroll’, this.domMouseCB); // Mozilla
$(this.outerBox).observe(’mousewheel’, this.mouseWheelCB);// IE/Opera
$(this.tracktop).observe(’mousedown’, this.trackTopCB);
$(this.trackbot).observe(’mousedown’, this.trackBotCB);
from line 151 ff and paste them to the if (this.innerHeight
November 7th, 2008 at 2:40 am
Due to the comment restrictions, here is the rest of it:
Cut the lines and pasthe them inside the if (this.innerHeight
November 7th, 2008 at 2:41 am
OK, html problem:
cut the lines and paste them inside the if (this.innerHeight < this.innerBox.scrollHeight) block
December 13th, 2008 at 4:49 pm
That is a very nice script, sir! It is very customizable and the comments in the JS files sure do help. Thank you for this script; I was looking for a script such as this for a long time, and this is by far the best-quality script that I have found for custom image scrollbars so far.
Once again, thank you for your hard work on this extremely well-done script!
December 22nd, 2008 at 9:57 pm
Is it possible to make the buttons’ Mousedown event continue for as long as the user holds the mouse down over the button?
Very useful script! Thanks.
January 30th, 2009 at 11:02 am
Nice script, i’m trying to implement it to joomla powered site. Everything works just fine but have problem with scrolling length as the scrolls goes to something about middle of the height of the box and stops (but it does the job, it gets all the text). So, my question is, what i should change to get the slider pass all the box length? Thanks.
April 30th, 2009 at 10:59 pm
Hi, I was just wondering if there is a way to scroll to top. Basically, I am reloading the content of the div using AJAX, and so I need to scroll to top. Is there a way to do this?
June 20th, 2009 at 8:54 pm
Is it possible to use a link to scroll the area to an anchor (or simply to top)?
toTop: function() {
$(’scroll-innerBox-1′).scrollTop = 0;
$(’scroll-handle-container1′).style.top = ‘0px’;
}
… does not work because if you then try to scroll with the wheel, the contents jump around. Clicking the scroll track or grabbing the handle works though.
July 8th, 2009 at 6:24 am
Hi, I found this page yesterday and I must say, this scroller look excellent, it’s the easiest one I found out there. I was only wondering if it can scroll horizontally as well?
July 8th, 2009 at 7:47 am
@Arpan D: Its been a while, but I’m pretty sure that the default behavior is that it will scroll to the top.
@Jules: Sounds like you just need to sort out the scroll wheel functionality.
@Steven: No, it can’t scroll horizontally.
July 13th, 2009 at 4:35 am
Hi thanks for the grate script. This is a cool and its light weighted. So I’m using it.
But I have few issue - if possible pls answer
1. Scroller.reset(’divScroll’); is resetting the div but the scroller is still in the same place.
2. how do I scroll to a specific place like Scroller.scrollTop = 10;
3. as in the documentation getHeight, getWidth are not in the script ( am I using an old version ? )
thanks & keep up good work
July 23rd, 2009 at 3:43 am
Hi
Seems like its giving the scroll-track-1 height much higher in Opera 9.64 than in other browsers.
Can you pls. suggest a solution ? I really appreciate your work.
Thanks
July 29th, 2009 at 12:43 pm
Great scrollbar implementation! Lots easier to implement than Flexcroll. My problem is that I want there to be a scrollbar even when there’s not enough content to actually scroll. Just an empty scroll track is fine. Any idea how to make that happen?
It would also be awesome if the entire scrollbar — track, handle, arrows — were wrapped in a div. It would make it a lot easier to position relative to the container div.
Thanks!
Aaron
December 28th, 2009 at 12:26 pm
When I view this page on IE 7, both of the sample scrollbars are showing and working. But when I created a similar one on my machine, it looks good and works on Firefox but it is missing on IE 7. Any idea would be appreciated!
Thanks,
Diana
February 15th, 2010 at 4:27 am
Hi
I had a problem in opera too (v10.10 /win) - same as Viraj mentions
how to fix - after line 197 of scroller.js (after the line containing “hth = 0;”) add this:
if(navigator.appName.indexOf(’Opera’)>-1)
{
tth += 10;
hth += 10;
}
it seems to help although I’m not sure about what is causing this problem or whether there is a better fix.
btw this is the best custom scrollbar implementation I’ve ever seen, and I was looking for one for a while. It’s no problem using it togehter with jQuery either - which is great.
many thanks
Mario
April 7th, 2010 at 4:47 am
Hi
I want to give a gap in place top and bottom buttons. I am having a problem in IE. The scrollbar on Mozilla appears good and fine but when I run the same script on IE (any version) I have a problem. The scroller shifts to top. In scroller.js I give a gap of 25px to handle height. Its shown in Mozilla but fails in IE.
Please reply asap I am getting late.
Thanks in advance.
April 7th, 2010 at 4:48 am
one thing to be mentioned was left. the name of the function is resetScrollbar.
Thanks again!
Faras
April 12th, 2010 at 8:02 am
Hi there,
Great scrollbar, although I am having trouble - I just can’t get it to work as I already have my html file linking to a jquery file…why won’t it work? Is there anyway to get it to work even when this is linking: ??
Many thanks! Kerry
April 14th, 2010 at 7:53 am
Its not designed to run with jquery - just prototype.js
May 18th, 2010 at 2:47 pm
Hi judge,
any chance I can position the scrollbar not directly beside the Div? If you look at my page (kalender, bilder&videos, projekte) you will get the idea: I’m trying to place it at the right border. Could you help me?
Best regards
May 31st, 2010 at 3:41 am
hi Alexander,
“Like, for the moment, i can scroll per “click” event, but if i do it onmousedown, or onmouseover, it just does it once, and not continuously.”
I solved this problem by using setInterval method. Create a handler for arrow up & down when mousedown then call the method that implements a timer which trigger the continuous scroll my ex. below is trackbotEventDown handler attached to trackbot mousedown event.
Ex.
tracktopEventDown:function(event,slider){
if (Event.isLeftClick(event)) {
if(this.timerinterval) clearInterval(this.timerinterval);
this.timerinterval = setInterval(function(){slider.setValueBy(-0.02);},100);
Event.stop(event);
}
},
trackbotEventDown:function(event,slider){
if (Event.isLeftClick(event)) {
if(this.timerinterval) clearInterval(this.timerinterval);
this.timerinterval = setInterval(function(){slider.setValueBy(0.02);},100);
Event.stop(event);
}
}
@judge
Thank you very much for this great tool.
August 5th, 2010 at 10:56 pm
Have implemented the scrolling buttons. Works like a gem!!
September 2nd, 2010 at 8:11 am
I want to implement this custom scrollbar throughout my site. I go for flexscroll but it is not working with ajax and lightboxes. Is your Scrollbar is compatible with Ajax and LightBox. I am using lightbox gone wild (http://particletree.com/examples/lightbox/) in my site.Just curious is it possible to customize the main scroll bar for a pages like this.
looking forward for your reply as it’s very urgent.
September 10th, 2010 at 7:36 am
Hi judge,
Great scrollbar, but I am having trouble in ajax updater, the scrollbar dont want to show up, can you help me?
here’s the script:
function showPage() {
startLoading();
new Ajax.Updater(’maincontent’, ‘testpage’, { method: ‘get’, asynchronous:true,
evalScripts:true,
onComplete: finishLoading
});
}
function finishLoading() {
Scroller.reset(’divmakeScroll’);
}
document.observe(”dom:loaded”, init);
and the scrollbar is inside the testpage.php
Thanks in advance
milo
March 8th, 2011 at 4:43 am
Couldn’t thank you more. Works like a charm, good work!
April 14th, 2011 at 1:59 pm
Mouse wheel works but scrollbar not sliding. Anybody have this problem? Thank you.
April 15th, 2011 at 8:20 am
The examples look great and I like the unobtrusive approach. I try to use this with rails 3.0.5. Rails includes:
* Prototype 1.7rc2
* script.aculo.us effects.js v1.8.3
* script.aculo.us controls.js v1.8.3
I have added the libraries:
But I get following error:
Error: Control is not defined
Source File: http://localhost:3000/javascripts/scroller.js?1302875811
Line: 146
Line 146:
this.slider = new Control.Slider($(this.handle).id, $(this.track).id, {axis:’vertical’,
Any clues how to solved that?
Cheers,
Roberto
July 10th, 2011 at 7:05 am
Hi Judge, don’t know if you’re still there, I hope you are
Great tool, implemented it in my site, amazing look and features! here my question: is it possible to have a scrollbar even when there’s not enough content to actually scroll. I mean just an empty scroll track. do you see it possible? thanks you again! you should add your creadits to scroll.js, I added your url to my downloaded file. Bye,
February 12th, 2012 at 10:02 pm
Hi, did anyone else experience this? Whenever I resize my browser window the scrollbar just disappears, it sort of “jets” to the right or fly’s to the right and never comes back until you refresh the page. Any suggestions?
May 10th, 2012 at 12:03 pm
Well, kind of old.
But i just want to tell you, that there are people outside here, who are using this
Works very well with the newest Firefox, btw. Scrolling with Mouse Wheel works with IE, but dragging the handle or clicking the track-bot and track-top isnt working in IE.
Well… But actually you “saved” my life with this. Because its very hard to find this kind of thing…
Thank you
June 17th, 2012 at 12:51 am
i want to use this scroll bar style on my websites new template signseo.com . thanks for this useful resources.
July 26th, 2012 at 2:17 pm
Hello guys. Can someone please tell me if one of these 2 awesome scrollbars can be applied not only to a custom div…but to the entire webpage/site. Like the standard we have in the right of the screen on most websites. If yes, can someone please tell me step by step pretty much on short how to do it? I would really appreciate it. Regards, Chris.
November 26th, 2012 at 8:46 am
Thanks for your job!
Is it possible to easily update the size of the visible part of a div that is scrollable ?
For exemple I have 2 scrolled divs. The first has a height = 100px, the second has a height :200px;
On click a user can hidde div1, so i’d like to update (on the fly) div2 to have height = 200px + 100px(freespace);
How can i do that ? Thanks.