scrolling carousel / box?

good afternoon,

I am unsure how to search this or even ask this.

I am looking to make a carousel (?) that people can scroll down to get more of the show listings. - whether it is the 2 finger lion way or a scroll arrows to see more info.

Just like the twitter box on this page:

http://www.greyareaprod.com/index.php

that you can scroll down to see more of the previous conversations. (this box will not be an rss feed - just more info/show dates)

Thank you

Julie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In Freeway, draw an HTML box. While it is still selected, look in the Inspector for the Overflow setting. Change it to either Auto or Scroll. Now add as much content to that box as you like. In Auto, if the current browser font settings cause the box to overset, the scroll bars will appear. In Scroll, the scroll bars will be there always.

Walter

On Oct 1, 2011, at 1:14 PM, Julie Maxwell wrote:

Just like the twitter box on this page:

GREY AREA PRODUCTIONS

that you can scroll down to see more of the previous conversations. (this box will not be an rss feed - just more info/show dates)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

that is perfect I knew there was something - but could not find it

only question:

in FF only I am seeing a white thick border on the bottom and side (where the scroll is) is there a way to remove that?

Thanks

J
On Oct 1, 2011, at 2:17 PM, Walter Lee Davis wrote:

In Freeway, draw an HTML box. While it is still selected, look in the Inspector for the Overflow setting. Change it to either Auto or Scroll. Now add as much content to that box as you like. In Auto, if the current browser font settings cause the box to overset, the scroll bars will appear. In Scroll, the scroll bars will be there always.

Walter

On Oct 1, 2011, at 1:14 PM, Julie Maxwell wrote:

Just like the twitter box on this page:

GREY AREA PRODUCTIONS

that you can scroll down to see more of the previous conversations. (this box will not be an rss feed - just more info/show dates)


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

Here is my question, now that I have looked on a pc I see that the scroll bars are there.

I only see minimal black ones on my MBP in safari and chrome and thats what I would like, but white ones on FF.

My client says he sees them (standard scroll bars) on FF and chrome.

is there a way to modify / style the scroll bars to just have the minimal / hidden ones like I am seeing instead of the regular scroll bars?

Thank you again for your help!

Julie
On Oct 1, 2011, at 3:17 PM, Julie Maxwell wrote:

Walter,

that is perfect I knew there was something - but could not find it

only question:

in FF only I am seeing a white thick border on the bottom and side (where the scroll is) is there a way to remove that?

Thanks

J
On Oct 1, 2011, at 2:17 PM, Walter Lee Davis wrote:

In Freeway, draw an HTML box. While it is still selected, look in the Inspector for the Overflow setting. Change it to either Auto or Scroll. Now add as much content to that box as you like. In Auto, if the current browser font settings cause the box to overset, the scroll bars will appear. In Scroll, the scroll bars will be there always.

Walter

On Oct 1, 2011, at 1:14 PM, Julie Maxwell wrote:

Just like the twitter box on this page:

GREY AREA PRODUCTIONS

that you can scroll down to see more of the previous conversations. (this box will not be an rss feed - just more info/show dates)


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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Some browsers make these controls possible to style, any that do require different rules for each browser, and it becomes a bit of a snipe hunt. Many people use the JavaScript scrolling area effects (I think there’s an Action for this, I’ve certainly written a small novella about how to do it with Scriptaculous) in order to impose their own graphic sensibilities on the situation. That will certainly work, and it fixes the cross-browser look and feel issue neatly. But that creates another problem: in the absence of JavaScript, the page is simply unusable.

My opinion is that wherever possible, browser-level controls ought to be left alone, because that allows the visitor to leverage his or her own experience with the the browser to understand that “this is a widget – when I do this, it does that”. Nowhere is this more important than in form fields – I have lost whole months of my life looking for the Search field in some over-designed blog skins.

One thing you could try is to add a border to the box you’re working on. That can help define the edges. Adding padding to the scroll-bar side can also help to give the controls somewhere to “live”. You can also get more precise with the overflow setting: overflow-x and overflow-y can be substituted for the generic overflow property set by the Inspector. To do that, you simply restore the Overflow picker in the Inspector to its default of Visible, and then use the Item / Extended dialog to inject one or the other of these properties into the Div/Style. Try using overflow-x: scroll to put a scroll bar only on the right side of the box.

Walter

On Oct 4, 2011, at 1:00 AM, Julie Maxwell wrote:

Here is my question, now that I have looked on a pc I see that the scroll bars are there.

I only see minimal black ones on my MBP in safari and chrome and thats what I would like, but white ones on FF.

My client says he sees them (standard scroll bars) on FF and chrome.

is there a way to modify / style the scroll bars to just have the minimal / hidden ones like I am seeing instead of the regular scroll bars?

Thank you again for your help!

Julie
On Oct 1, 2011, at 3:17 PM, Julie Maxwell wrote:

Walter,

that is perfect I knew there was something - but could not find it

only question:

in FF only I am seeing a white thick border on the bottom and side (where the scroll is) is there a way to remove that?

Thanks

J
On Oct 1, 2011, at 2:17 PM, Walter Lee Davis wrote:

In Freeway, draw an HTML box. While it is still selected, look in the Inspector for the Overflow setting. Change it to either Auto or Scroll. Now add as much content to that box as you like. In Auto, if the current browser font settings cause the box to overset, the scroll bars will appear. In Scroll, the scroll bars will be there always.

Walter

On Oct 1, 2011, at 1:14 PM, Julie Maxwell wrote:

Just like the twitter box on this page:

GREY AREA PRODUCTIONS

that you can scroll down to see more of the previous conversations. (this box will not be an rss feed - just more info/show dates)


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


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.

here is another question… would it be better for all to do a scrolling carousel with an up and down button?

if so… how? LOL

J
On Oct 4, 2011, at 9:29 AM, Walter Lee Davis wrote:

Some browsers make these controls possible to style, any that do require different rules for each browser, and it becomes a bit of a snipe hunt. Many people use the JavaScript scrolling area effects (I think there’s an Action for this, I’ve certainly written a small novella about how to do it with Scriptaculous) in order to impose their own graphic sensibilities on the situation. That will certainly work, and it fixes the cross-browser look and feel issue neatly. But that creates another problem: in the absence of JavaScript, the page is simply unusable.

My opinion is that wherever possible, browser-level controls ought to be left alone, because that allows the visitor to leverage his or her own experience with the the browser to understand that “this is a widget – when I do this, it does that”. Nowhere is this more important than in form fields – I have lost whole months of my life looking for the Search field in some over-designed blog skins.

One thing you could try is to add a border to the box you’re working on. That can help define the edges. Adding padding to the scroll-bar side can also help to give the controls somewhere to “live”. You can also get more precise with the overflow setting: overflow-x and overflow-y can be substituted for the generic overflow property set by the Inspector. To do that, you simply restore the Overflow picker in the Inspector to its default of Visible, and then use the Item / Extended dialog to inject one or the other of these properties into the Div/Style. Try using overflow-x: scroll to put a scroll bar only on the right side of the box.

Walter

On Oct 4, 2011, at 1:00 AM, Julie Maxwell wrote:

Here is my question, now that I have looked on a pc I see that the scroll bars are there.

I only see minimal black ones on my MBP in safari and chrome and thats what I would like, but white ones on FF.

My client says he sees them (standard scroll bars) on FF and chrome.

is there a way to modify / style the scroll bars to just have the minimal / hidden ones like I am seeing instead of the regular scroll bars?

Thank you again for your help!

Julie
On Oct 1, 2011, at 3:17 PM, Julie Maxwell wrote:

Walter,

that is perfect I knew there was something - but could not find it

only question:

in FF only I am seeing a white thick border on the bottom and side (where the scroll is) is there a way to remove that?

Thanks

J
On Oct 1, 2011, at 2:17 PM, Walter Lee Davis wrote:

In Freeway, draw an HTML box. While it is still selected, look in the Inspector for the Overflow setting. Change it to either Auto or Scroll. Now add as much content to that box as you like. In Auto, if the current browser font settings cause the box to overset, the scroll bars will appear. In Scroll, the scroll bars will be there always.

Walter

On Oct 1, 2011, at 1:14 PM, Julie Maxwell wrote:

Just like the twitter box on this page:

GREY AREA PRODUCTIONS

that you can scroll down to see more of the previous conversations. (this box will not be an rss feed - just more info/show dates)


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


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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can use the Carousel Action to create a “scrolling” area that moves vertically – there’s a picker for axis in the Action interface. You would build it precisely the same way that you build a horizontal carousel, just change that one setting.

Walter

On Oct 4, 2011, at 10:12 AM, Julie Maxwell wrote:

here is another question… would it be better for all to do a scrolling carousel with an up and down button?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Many people use the JavaScript scrolling area effects (I think there’s an Action for this…

Not yet… so GET BUSY!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 4 Oct 2011, 4:22 pm, chuckamuck wrote:

Many people use the JavaScript scrolling area effects (I think there’s an Action for this…

Not yet… so GET BUSY!

Take it back, there is one for a scroll area but it does not produce a scroll bar.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s as close as I’ve gotten to this:

http://www.freewaytalk.net/thread/view/30155#m_96336

You’ll need Protaculous, naturally, with the scriptaculous-packed library selected, and you need to name the elements very clearly and carefully so you can reference them in the script.

You need the following elements:

###Outer DIV
An HTML box with Overflow set to Hidden. This forms the “window” through which you reveal the inner DIV and its contents when you scroll the effect.

###Inner DIV
An HTML box drawn as a positioned child of the outer DIV, and named unambiguously. The easiest way to create this is to click once on the Outer DIV, so it’s highlighted, and then choose the HTML box tool and draw a small box directly in the middle of the outer DIV. The edges of the outer DIV will highlight blue to indicate that it is the parent object. Finally, use the Inspector to set the inner DIV at 0, 0 top and left, and width to match your outer DIV. Height doesn’t matter for now, just type something inside the inner DIV, then disable the height (make it a flexible height box) by clicking on the up/down arrow next to the height box in the Inspector.

###Track
An HTML box that defines the area that the thumb (the control handle) moves within. It must be the same height as the outer DIV. Make sure that the name of this element is related to the inner DIV, just so you can keep the effect(s) straight if you use more than one of these on a page.

###Thumb
The object that you drag with the mouse to make the effect go. This can be either an inline element within the track or a positioned child element of the track. Again, keep the name clear to yourself.

If you’re looking at the Gist with the code, the last three lines are there to set up three separate scroll areas, and they also include (optional) plus and minus buttons to scroll the effect in little jumps. If you’re only setting up one effect, you only need one of these lines, and you only need to indicate the thumb, track and inner DIV elements in the function signature. You would use YOUR names for these values, not the ones I used in my example.

Walter

On Oct 4, 2011, at 12:23 PM, chuckamuck wrote:

On 4 Oct 2011, 4:22 pm, chuckamuck wrote:

Many people use the JavaScript scrolling area effects (I think there’s an Action for this…

Not yet… so GET BUSY!

Take it back, there is one for a scroll area but it does not produce a scroll bar.


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

the scroll layer action works great!

BUt I am going to play with this also. :smiley:

Thanks!

J
On Oct 4, 2011, at 12:51 PM, Walter Lee Davis wrote:

Here’s as close as I’ve gotten to this:

http://www.freewaytalk.net/thread/view/30155#m_96336

You’ll need Protaculous, naturally, with the scriptaculous-packed library selected, and you need to name the elements very clearly and carefully so you can reference them in the script.

You need the following elements:

###Outer DIV
An HTML box with Overflow set to Hidden. This forms the “window” through which you reveal the inner DIV and its contents when you scroll the effect.

###Inner DIV
An HTML box drawn as a positioned child of the outer DIV, and named unambiguously. The easiest way to create this is to click once on the Outer DIV, so it’s highlighted, and then choose the HTML box tool and draw a small box directly in the middle of the outer DIV. The edges of the outer DIV will highlight blue to indicate that it is the parent object. Finally, use the Inspector to set the inner DIV at 0, 0 top and left, and width to match your outer DIV. Height doesn’t matter for now, just type something inside the inner DIV, then disable the height (make it a flexible height box) by clicking on the up/down arrow next to the height box in the Inspector.

###Track
An HTML box that defines the area that the thumb (the control handle) moves within. It must be the same height as the outer DIV. Make sure that the name of this element is related to the inner DIV, just so you can keep the effect(s) straight if you use more than one of these on a page.

###Thumb
The object that you drag with the mouse to make the effect go. This can be either an inline element within the track or a positioned child element of the track. Again, keep the name clear to yourself.

If you’re looking at the Gist with the code, the last three lines are there to set up three separate scroll areas, and they also include (optional) plus and minus buttons to scroll the effect in little jumps. If you’re only setting up one effect, you only need one of these lines, and you only need to indicate the thumb, track and inner DIV elements in the function signature. You would use YOUR names for these values, not the ones I used in my example.

Walter

On Oct 4, 2011, at 12:23 PM, chuckamuck wrote:

On 4 Oct 2011, 4:22 pm, chuckamuck wrote:

Many people use the JavaScript scrolling area effects (I think there’s an Action for this…

Not yet… so GET BUSY!

Take it back, there is one for a scroll area but it does not produce a scroll bar.


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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options