Got it Walter.
Once again, thanks for all your help.
Craig
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here’s the final Freeway 5 Pro file with all of the code in place if anyone wants it.
Craig
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Just an update for anyone who has gotten here in February 2009 – the Action is now at ActionsForge, naturally:
http://www.actionsforge.com/actions/view/18-protaculous
And there are a few changes to the Action UI that render some of the instructions above nonsensical:
- There is no longer any way to choose individual Scriptaculous libraries. This was done to enforce compatibility with Softpress’s FX Actions. There is a new picker to choose between “packed” and regular versions of the libraries. (The packed versions are about 1/3 the size of the regular ones, but they produce completely unusable errors for debugging. Use regular until everything works, then switch to packed for deployment.)
- Also, there are now TWO Function Body buttons to choose from. The first one fires before the page ever displays in the browser, and the second one fires after the page is fully visible (all images have loaded, everything is visibly ready).
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’ve created a horizontal sliding scrollbar like Walters. (Thanks for the help) but the hand pointer does not appear on hover which may be confusing for browsing. I’ve tried inserting cursor: pointer into item / extended /div and also tried inserting this into scriptaculous code but so far nothing has changed. Does anybody have any idea how to change this?
Thanks
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
this is Walter’s slider that I was referring to.
http://scripty.walterdavisstudio.com/slider.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you are using item / extended / div, make sure you add your cursor rule to the div style segment, not the div segment. You’re doing this on the “thumb” div, right?
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi
Yes its the “thumb”. I added cursor: pointer to the div style segment but it doesn’t work. Do I need to add anything else?
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Could you post a link? I can’t tell from here, it sounds like you’ve
done the right thing.
Walter
On Apr 15, 2009, at 6:07 PM, mog wrote:
Hi
Yes its the “thumb”. I added cursor: pointer to the div style
segment but it doesn’t work. Do I need to add anything else?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter
Here is a link to the test site gallery page.
http://www.thewraiths.co.uk/ukeytest/gallery.html
Thanks!
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Aha. You seem to have added cursor:pointer in both the Name and Value
fields of the Extended / New dialog. This results in a style that
looks like this:
cursor:pointer:cursor:pointer;
…which isn’t valid, so the browser pretends it didn’t hear you.
Click once on the thumb element, then press Apple-Option-X. Double-
click on the line in the style side of the Extended dialog and edit it
so that the Name field has cursor in it, and the Value field has
pointer in it.
Publish, and you should be good.
Walter
On Apr 16, 2009, at 4:52 AM, mog wrote:
Hi Walter
Here is a link to the test site gallery page.
http://www.thewraiths.co.uk/ukeytest/gallery.html
Thanks!
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Brilliant! Thanks! It works!
Mog : )
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Since this thread was started in 2008 and last updated in early 2009, it’s not surprising that nearly all the once-useful URLs posted here are now broken.
Walter, can you post “sensical” instructions and repost slider.html example to your site again for us?
Many thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’m rebuilding my server right now, so it won’t be visible for another
hour or so (unless I pass out on the keyboard or similar). The
original links are still good, just “resting”, as they say in the pet
shop sketch.
Walter
On Apr 6, 2010, at 1:40 AM, JDW wrote:
Since this thread was started in 2008 and last updated in early
2009, it’s not surprising that nearly all the once-useful URLs
posted here are now broken.Walter, can you post “sensical” instructions and repost slider.html
example to your site again for us?Many thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you, Walter. I have confirmed that the following page on your site is up and running now:
http://scripty.walterdavisstudio.com/slider.html
However, I am still interested in knowing more specifics on how to put this all together in light of your more recent post in this thread, “Just an update for anyone who has gotten here in February 2009…” Could you revise your 7 steps for us? (The code-savvy among us may not need such hand-holding, but I certainly do.)
And is it really necessary to use an “XHTML page” as you suggest? “HTML 4.01 Transitional” won’t work?
Thank you,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That was a seriously long night for me – I think I ended up on Tokyo time by the end of it…
Here’s what I can tell you about the technique:
First, I’m not sure if XHTML is absolutely necessary, but many if not most of the examples I have ever seen using Scriptaculous use it, and so I just start there. Try it on a sample page first, see if it works with HTML 4 or transitional in a basic example layout like the one linked above, and if it does, then try it in a more complete site. If it doesn’t, then you’ll have to see if simply bumping the HTML level to one of the Strict DOCTYPES helps. (In other words, you may find that the error lies elsewhere. Fewer variables makes it easier to rule out the non-culprits.)
One thing I can tell you absolutely is that non-valid HTML of any level will not work with Prototype or any other JavaScript library. They all draw the line there – even though browsers work around invalid code perfectly well, JavaScript is a much simpler beast than a browser.
Second, the entire trick relies on a specific construction method. If you follow the steps precisely, you will get a working result. You must use DIVs (layers) rather than cells in a table layout, so this is Pro-only and you must have the CSS layout button on or you must check the Layer checkbox in the Inspector for each of the elements in the construction. You want to end up with the following hierarchical outline of elements to allow the effect to work:
Outer Box (absolute or relative position, overflow hidden)
Inner Content Box (absolute position, top:0 left:0)
Whatever other content you like, either
absolute or relative to the inner content
box, but visually constrained to the outer
box's dimensions.
Slider Track (absolute or relative position)
Thumb (absolute position, top:0 left:0)
The only other thing you need to know are the names of the major elements: the inner content box, the slider track, and the thumb. Because you used DIVs rather than cells, this part will be automatic – Freeway always gives DIVs IDs. You can get the ID by clicking on the DIV and looking in the Title field in the left-most tab of the Inspector.
I’ll paste the code in again here, with the names of elements written as clearly as I can on my second cup of coffee.
var f = function(value){
var inner = $('innerContentBox');
var w = inner.getWidth();
w = (w - inner.up('div').getWidth());
var leftPos = Math.round(value * w) * -1;
inner.style.left = leftPos + 'px';
}
var s = new Control.Slider('thumb','sliderTrack', {
onSlide: f,
onChange: f
});
I’ve managed to make it a little simpler in the process. Recall, though, that if you want more than one of these things on a single page, you must create a new instance of the “f” function for each one, with a different name, and call it instead. You could name these f1, f2, f3 and the caller functions s1, s2, s3…
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi there big dog!
I cant’ seem to get the scroll to work as it should. Can you help me?
I would like to click within any area of the slider field to jump there directly. I can’t find the info on how to do that. my page is here: http://www.biscaya.com/begmc.html
Also never found out how to get that Effect.MoveTo. included
And even better, can I scroll with button of the mouse directly while hovering over the layer (without clicking)?
I bow in awe to your wisdom.
Sverker
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I can’t see what’s going wrong in there, but you have a LOT of other
effects going on in the same page, so it’s hard to see. Could you try
isolating the scroll box element on another scratch page, and publish
and see if you can get that part alone to work. No other fading
slideshow what-have-you, just this one box with its one slider. Then
start adding things and note where it breaks.
Walter
On Jun 1, 2010, at 11:44 AM, Zignar wrote:
Hi there big dog!
I cant’ seem to get the scroll to work as it should. Can you help me?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi again
Tried it: http://www.biscaya.com/begtest.html
That is a clean page, only some CSS menu, noting else (that I can see). Still no good.
Is my Java correct?
var s = new Control.Slider(‘thumb’,‘track’, {axis:‘vertical’});
var f = function(value){
var inner = $(‘innerDiv’); //change innerDiv to whatever your inner box is called
var h = (inner.getHeight() - inner.up(‘div’).getHeight());
inner.style.top = (Math.round(value * h) * -1) + ‘px’;
}
s.options.onChange = function(value){
f(value);
};
s.options.onSlide = function(value){
f(value);
};
THANKS!
Sverker
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The box is scrolling correctly as near as I can tell. Only tested in Safari 4, but if you are seeing an error in another browser, please let me know.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I actually wanted to be able to simply click anywhere on the scroll bar, and not click and drag. That is the more common way of scroll bar behavior that I have seen (like in the apple site mentioned above).
Any ideas would be helpful!
Sverker
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options