Resize Slider Script

[BYK]

Hello folks,

I made a simple resize-slider script which works like the slider in Google Docs, or the resize sliders in windows.

The code and the demo is attached to the post as a zip file.

Usage:
Prepare your content with divs which has CSS's "float" property set. Then between the divs you want to seperate by the slider, put the following line

<div class="slider" callbackFunction="aCallbackFunction">&nbsp;</div>

And call the "initSliders()" function when the page is fully loaded(I suggest using the onload event of the page). That's all!

Notes:

1. callbackFunction is optional, it is called when user completes a slide operation.
2. If you define the CSS classes ".slider_hover" and ".slider_active" in your page, and set the "sliderEffects" to true, your sliders will have hover and onclick effects according to those classes.
3. This code is not fully commented and tested and it is open to suggestions, comments and improvements.

[jscheuer1]

Works here in Opera 9.24, IE 7, FF 2.0.0.11, and Safari 3 Win. But things get a little strange in a 800px wide window, with the third division hopping around quite a bit. I know you say the css can be adjusted, but I would still suggest clearing that up if possible and making a more intuitive look and feel to it for the demo - Just looking at the page, there is no clue that you can do anything with it.

For the sample callback, it would be more professional looking to have each division have a text input in it that would get set to its own width or offsetWidth number.

[BYK]

Thank you very much for your useful response. I have improved the demo to have a much nicer look. I also improved some CSS and script things and changed the first post's file. Please check again for the updates.

Waiting for other responses, including the ones from you

[BYK]

Added collapsing when double clicked on a slider.
Put the new zip to the first post.

[JimboJones]

Hi.

Thanks for making this script. It works very well for me.

One thing I'm looking to do is to have the scroller roll over an image, hiding it as it goes along. Sort of like a "then and now" type thing where you'd have a old photo of something (say, a building) and on the right have a photo of it, today. By using the scroll bar, you'd "shrink" the image to the right and expand the image to the left.

This is different from what your script does, which just hides the image to the right.

There's an example of what I'm talking about on the NY Times site, where they take "then and now" images of the Japanese tsunami devastation.

https://www.nytimes.com/interactive/...sunami.html?hp

Any ideas?

Thanks.

[ggalan]

just checked on chrome browser and its not working

[BYK]

Hi JimboJones,

You can achieve that effect with some CSS magic(overflow: hidden and some aligning), the script only resizes the containers. Though as gglan already mentioned, the script does not work on Google Chrome and it might not work on some other modern browsers. The script is very old an it belogns to my times as a beginner JS programmer. I will try to update it to work with modern browsers but no promises.

Thanks for your valuable feedback(both JimboJones and gglan).

Cheers.

[JimboJones]

Thank you kindly for your rapid response.

I tried to modify some of the .css but I am not a coder and couldn't get it to work (although the code seems easy enough to understand).

After trying every single search term I could think of, I finally hit gold by searching on 'new york times image script'.

Someone has created exactly what I was looking for.

http://www.catchmyfame.com/2009/06/2...eafter-plugin/

I have not tried it yet but my guess is it might be a bit more complex than yours.

Thanks again, all the best.