Is anyone working on a scrolling table or div such as the openrico livegrid demo? I''m looking to develop (much like smashbox''s scrolling images) a collection of thumbnails that you can scroll horizontally. I''ve got a non-prototype.js example but I wanted to check to see if anyone was closer than I to this. BTW, I will be finishing up my slider code shortly and checking that in. I did implement functionality to limit the slider to predefined values. I did the easy thing and had the array of values set in the options part of the constructor. It could probably use a bit more work but it''s good enough for now. Cheers, Marty
Am 16.09.2005 um 00:19 schrieb Marty Haught:> Is anyone working on a scrolling table or div such as the openrico > livegrid demo? I''m looking to develop (much like smashbox''s > scrolling images) a collection of thumbnails that you can scroll > horizontally. I''ve got a non-prototype.js example but I wanted to > check to see if anyone was closer than I to this.Sounds good. I guess that''s a nice addition. I''d go for using a overflow:none DIV and have a DIV inside of that that you just move around (maybe with Effect.MoveBy); or use something like Effect.ScrollTo does (don''t know for sure if that is possible). You could hook it up to a horizontal slider, btw.> BTW, I will be finishing up my slider code shortly and checking > that in. I did implement functionality to limit the slider to > predefined values. I did the easy thing and had the array of > values set in the options part of the constructor. It could > probably use a bit more work but it''s good enough for now.Nice! I guess I''m going to have to break my "only bugfixing for next release of script.aculo.us announcement" again. :) Thomas
Thomas Fuchs wrote:> Sounds good. I guess that''s a nice addition. I''d go for using a > overflow:none DIV and have a DIV inside of that that you just > move around (maybe with Effect.MoveBy); or use something > like Effect.ScrollTo does (don''t know for sure if that is possible). > > You could hook it up to a horizontal slider, btw.Definitely. The working example had the two div thing going with overflow: none. The next thing that I will need to solve is how to handle large amounts of data in the scrollable part. For instance, imagine that we have 200 thumbnails to scroll. I''ll need to code a way to pull off excess thumbnails on both ends. I can see that if you put all of this in a table (and were doing this horizontally) it''d be easy as you just redo the rows in the table. I''m currently looking into how the livegrid code does it''s stuff and possibly take clues from that. Yes, hooking in the sliders would be easy. There are two hooks that you can code in the slider. One that it updates as you move the slider and another that gets called when you finish moving the slider. You can also call the slider and tell it to go to X value. In the scrollable thumbnail code that I''ll be doing will use mouse over to scroll left and right.> Nice! I guess I''m going to have to break my "only bugfixing for > next release of script.aculo.us announcement" again. :)Heh. Well, I would like folks to do a code review of it. So maybe you could hold it back until you guys give it the stamp of approval. I''m new to web 2.0 so it might need some tweaking to be more inline with the rest of the libraries. It shouldn''t be too bad but a code review is definitely needed. Cheers, Marty
We''ve got draggable elements which are great, but it''d be nice to have resizable elements. That way we could further ease the creation of ''window'' like elements. I''ve been working on it myself using examples from the drag code in script.aculo.us, but haven''t gotten it to quite work perfectly yet. Maybe a pro could take a crack at it? I think it would be a very nice addiition to the script.aculo.us library.
This is a small effort from a couple weeks ago. I''ve tested this on
Safari and Firefox. I meant to post it, but didn''t:
Resizable = Class.create();
Resizable.prototype = {
initialize: function(element) {
this.element = $(element);
this.handle = Builder.node(''div'',
{style:"background:#000;width:
8px;height:8px;position:absolute;z-index:1000;"});
document.body.appendChild(this.handle);
new Draggable(this.handle, {change:(function(){this.updateElement
();}).bind(this)});
this.updateHandle();
},
updateHandle: function() {
var offsets = Position.cumulativeOffset(this.element);
this.handle.style.left = offsets[0] + (this.element.offsetWidth
- (this.handle.offsetWidth/2)) + "px";
this.handle.style.top = offsets[1] + (this.element.offsetHeight
- (this.handle.offsetWidth/2)) + "px";
},
updateElement: function() {
var elementOffsets = Position.cumulativeOffset(this.element);
handleOffsets = Position.cumulativeOffset(this.handle);
width = (handleOffsets[0] - elementOffsets[0]) +
(this.handle.offsetWidth/2);
height = (handleOffsets[1] - elementOffsets[1]) +
(this.handle.offsetWidth/2);
if (width < 20) width = 20;
if (height < 20) height = 20;
style = this.element.style;
style.width = width + "px";
style.height = height + "px";
this.updateHandle();
}
}
Then call:
r = new Resizable(''thing'');
and to make the resizable element draggable, call:
new Draggable(''thing'', { change:function()
{r.updateHandle()} });
''thing'' might be something like:
<div id="thing"
style="position:absolute;top:0;left:0;width:
100px;height:100px;overflow:hidden;">
<img src="image.gif" width="100%"
height="100%" />
</div>
This takes a bunch of stuff for granted, like having the handle
centred on the bottom-right corner of the element, having the handle
be a 8px x 8px black square, etc. I suppose the style of the handle
could very easily be passed as an argument.
-- Michael
On Sep 15, 2005, at 4:27 PM, Eric wrote:
> We''ve got draggable elements which are great, but it''d be
nice to
> have resizable elements. That way we could further ease the
> creation of ''window'' like elements. I''ve been
working on it myself
> using examples from the drag code in script.aculo.us, but haven''t
> gotten it to quite work perfectly yet. Maybe a pro could take a
> crack at it? I think it would be a very nice addiition to the
> script.aculo.us library.
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>