[ANN] Carousel 2 Action

Just released:

http://actionsforge.com/actions/view/283-carousel-2

Important new features:

  • Stands alone (not bundled in Protaculous) and cooperates with Protaculous 2. (Using this Action on your page will also silently upgrade the Prototype and Scriptaculous libraries applied by any other Actions in the same page.)

  • Wraps around! Finally! Infinite carousel effects are one check-box away.

  • Always uses Content Delivery Network (CDN) links to the JavaScript files, so no more issues with bundled Actions! No more timeouts if your network is busy, too!

The working method is the same as the original Carousel Action, but there is one difference under the hood: rather than sweeping up the panes and removing them from their original locations during the publish process, this Action leaves them exactly where you place them. The JavaScript does the layout-rearranging when the page loads in a browser. This is both good and bad from a usability standpoint. On the bad side, if someone visits your page with JavaScript disabled, they will see the original page with everything laying just the way you placed it in Freeway’s design view. On the good side, if you place the panes somewhere thoughtful, you won’t have the usability nightmare that the original Carousel Action could create; where the panes were hidden by CSS, but couldn’t be navigated to either.

Walter


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

Walter,

Thanks for your improvements!

I seem to have lost the boarder for the active tab, and wonder if there is another implementation for that then with the Carousel original?

Also, the slides used to have links on them which still show in the design stage/page window of freeway, but the no longer work as links to other pages.

Thanks again, looking forward to your response.

http://www.class-e-ads.com/websitedevelopmentactiveanddesignedwebsites.html

Frank H.

On Jan 6, 2013, at 7:08 PM, Walter Lee Davis email@hidden wrote:

Just released:

http://actionsforge.com/actions/view/283-carousel-2

Important new features:

  • Stands alone (not bundled in Protaculous) and cooperates with Protaculous 2. (Using this Action on your page will also silently upgrade the Prototype and Scriptaculous libraries applied by any other Actions in the same page.)

  • Wraps around! Finally! Infinite carousel effects are one check-box away.

  • Always uses Content Delivery Network (CDN) links to the JavaScript files, so no more issues with bundled Actions! No more timeouts if your network is busy, too!

The working method is the same as the original Carousel Action, but there is one difference under the hood: rather than sweeping up the panes and removing them from their original locations during the publish process, this Action leaves them exactly where you place them. The JavaScript does the layout-rearranging when the page loads in a browser. This is both good and bad from a usability standpoint. On the bad side, if someone visits your page with JavaScript disabled, they will see the original page with everything laying just the way you placed it in Freeway’s design view. On the good side, if you place the panes somewhere thoughtful, you won’t have the usability nightmare that the original Carousel Action could create; where the panes were hidden by CSS, but couldn’t be navigated to either.

Walter


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

I believe in the original, the .active style was added to the image, in this version it is added to the link wrapping around the image. This makes it consistent with how .active is applied in the Text Tab Action. I can’t locate the style you are using for your active class in the page source, so you might want to have a look and see where you are defining it in the first place. Then, if the style looks like this:

.active { border: 1px solid #ccc }

change it to this (for image-based tabs):

.active img { border: 1px solid #ccc }

Walter

On Jan 7, 2013, at 2:52 AM, Frank Harshbarger wrote:

I seem to have lost the boarder for the active tab, and wonder if there is another implementation for that then with the Carousel original?


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

Look for an empty HTML box on your page named item3. It is overlapping the carousel area, and blocking clicks to any links within that area. There is nothing in the Carousel 2 Action that does anything to links contained within the individual panes.

Walter

On Jan 7, 2013, at 2:52 AM, Frank Harshbarger wrote:

Also, the slides used to have links on them which still show in the design stage/page window of freeway, but the no longer work as links to other pages.


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

Just wondering would it be too stressful for computers/browsers to have, say two or three little carousels running on one page…

Cheers


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

No, you can have as many of them as you like. Just keep an eye on the total page size – that’s the real killer. If you are swiping through a bunch of photos, the total page size can really start to add up. If you don’t already, leave “Show page sizes” turned on in the Site panel – look in the “cog” menu at the bottom. Publish your page every now and then to update the total.

Walter

On Jan 7, 2013, at 10:48 AM, Justin Easthall wrote:

Just wondering would it be too stressful for computers/browsers to have, say two or three little carousels running on one page…

Cheers


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

Great thanks


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

Thank you Walter, I’ll give it a go later tonight.

Frank H.

On Jan 7, 2013, at 7:26 AM, Walter Lee Davis email@hidden wrote:

Look for an empty HTML box on your page named item3. It is overlapping the carousel area, and blocking clicks to any links within that area. There is nothing in the Carousel 2 Action that does anything to links contained within the individual panes.

Walter

On Jan 7, 2013, at 2:52 AM, Frank Harshbarger wrote:

Also, the slides used to have links on them which still show in the design stage/page window of freeway, but the no longer work as links to other pages.


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

Hi again Walter,

I knew what you were talking about and sure enough removing it did the trick. First I tried to make it a gif and png, as the purpose was to provide a frame around the images and the corresponding ‘Tabs’ thumbnails. This is something that worked fine with the previous version, and I took pains to keep it (item3) the first item on the page after the reproduction stuff from the master page: title, etc.

This site is pretty much dormant still, so just for the sake of discussion, am I incorrect in taking the ‘cascading’ in css as sort of a 3d chess game, with the first layers on the page site view list (left side) in order of diminishing priority? I fully expect you to reply - but this is independent for the html structure or something, another ball of wax…

Anyway, is there a way to restore the frame? Not sure I want it but…

Thanks,

Looking forward to your peals of wisdom!

Frank H.

On Jan 7, 2013, at 7:26 AM, Walter Lee Davis email@hidden wrote:

Look for an empty HTML box on your page named item3. It is overlapping the carousel area, and blocking clicks to any links within that area. There is nothing in the Carousel 2 Action that does anything to links contained within the individual panes.

Walter

On Jan 7, 2013, at 2:52 AM, Frank Harshbarger wrote:

Also, the slides used to have links on them which still show in the design stage/page window of freeway, but the no longer work as links to other pages.


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 cascade in CSS refers to the styles rather than in your example where you see the Items listed on a page they are positioned using CSS.

Think of that list of items as each being on a different layer. The items at the top of the list are at the bottom of the pile - the ones at the bottom (closest to you) are at the top.

Any item that has another item indented below it signifies a Parent/Child relationship. So an indented item is a child of the one above.

What you could have done to sort your problem with your ‘frame’ would be to select it and Item>Send to Back. This would have moved it to the top of the list of items (the bottom of the pile)

This relies on the premise that all your items are CSS positioned (Layers)

This is certainly only part of the CSS story - the greater part is as you have observed is to do with cascading styles but it is a HUGE topic which you could spend years studying. Especially as new standards are introduced.

David


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

Thanks Walter,

Had to work on this for a while, trying to adjust the attributes in the style editor/inspector with no results.

Finally in frustration I thought, I’m just going to cut and paste Walter’s values right into the Tag window and see what happens.

Geesh. And there it was.

By the way, if one were looking for the stlyes in the file of the site, would that be the CSS>sheet 1 (in my case)? Doesnt seem like much…

Thanks again. \

Frank H.

On Jan 7, 2013, at 7:23 AM, Walter Lee Davis email@hidden wrote:

I believe in the original, the .active style was added to the image, in this version it is added to the link wrapping around the image. This makes it consistent with how .active is applied in the Text Tab Action. I can’t locate the style you are using for your active class in the page source, so you might want to have a look and see where you are defining it in the first place. Then, if the style looks like this:

.active { border: 1px solid #ccc }

change it to this (for image-based tabs):

.active img { border: 1px solid #ccc }

Walter

On Jan 7, 2013, at 2:52 AM, Frank Harshbarger wrote:

I seem to have lost the boarder for the active tab, and wonder if there is another implementation for that then with the Carousel original?


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

Hi Waltd,

Tried the carousel action2,

but have something strange,
My first pane in my design is centered on the page
when uploading it’s not centered anymore?

Do you have any idea?

thx

http://www.bw.graphicid.nl/


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

What technique did you use to center it? Are you using the RPL Action by any chance?

Walter

On Jan 8, 2013, at 7:10 AM, Erik wrote:

Hi Waltd,

Tried the carousel action2,

but have something strange,
My first pane in my design is centered on the page
when uploading it’s not centered anymore?

Do you have any idea?

thx

http://www.bw.graphicid.nl/


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

Yup. This is how the CSS cascade works. And 3-dimensional chess is an apt metaphor.

###First dimension:
The selector (the part of a CSS rule outside of the curly-braces) is a sort of pidgin HTML. It describes an element (or collection of elements) on the page with a certain degree of specificity. Less specificity means (possibly) more elements match the rule. Greater specificity (like using an ID, or body or head – two singleton elements according to the spec) means only one thing can possibly match. More than one rule in a given sheet (or collection of sheets – no limit to how many you can use in a single page) may match a given element or collection of elements. The rules are additive, like layering colored filters.

###Second dimension:
The HTML itself defines a hierarchical relationship between elements. CSS rules run down, from top to bottom, with any rule that isn’t set explicitly accepting either the attributes set by its ancestor(s) or the browser’s native defaults for elements of that kind.

###Third dimension:
Combination selectors can target a very particular element with tremendous specificity. If you wanted to stripe every other row in a table, but didn’t want to alter the HTML at all, you could do this:

#myTableWrapper tr:nth-child(2n) td { background-color: #eee; }

This rule will only apply itself to table rows found within the item with the ID myTableWrapper, so it won’t escape and pollute the rest of your page. Every other table row will match the nth-child pseudo-class selector, and then we apply the color itself to the td (so you can see it in more browsers, since you could style the tr, but it might not be visible everywhere). This type of combined selector carries enormous weight, and it is able to reach into the bottle and adjust the mizzen-mast with tweezers (to mix in another metaphor).

Walter

On Jan 8, 2013, at 5:13 AM, Frank Harshbarger wrote:

Finally in frustration I thought, I’m just going to cut and paste Walter’s values right into the Tag window and see what happens.

Geesh. And there it was.


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

Walter,

Apologies for asking the simple Q’s i use Carousel at present if i just apply the new Action do i need to do anything additional? any new set up procedures etc???

Thanks

John


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

Walter,

What have i done wrong, take a look at the web site home page

http://www.reenoserve.com/GHYC/

The whole of the Carousel is shifted to the right, and the first pane has dropped down… and the Carousel Buttons do not work !!.

John


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

You need to remove the previous iterations of the Carousel Action from your page, and you need to apply the new ones. Carousel 2 is not a newer version of Carousel, it’s a fundamentally different Action.

Walter

On Jan 8, 2013, at 4:36 PM, ejw wrote:

Walter,

Apologies for asking the simple Q’s i use Carousel at present if i just apply the new Action do i need to do anything additional? any new set up procedures etc???

Thanks

John


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

Your panes have to all be exactly the same dimensions. That’s why the directions tell you to draw an HTML box, add your content on top of that box, then duplicate the box to make the second pane. If you follow that plan (and also the boxes cannot be flexible-height – they have to have a defined height attribute) then this will just work.

Apparently you have both of your buttons set to Previous, rather than one Previous and one Next.

Walter

On Jan 8, 2013, at 4:55 PM, ejw wrote:

Walter,

What have i done wrong, take a look at the web site home page

reenoserve.com - reenoserve Resources and Information.

The whole of the Carousel is shifted to the right, and the first pane has dropped down… and the Carousel Buttons do not work !!.

John


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

Walter,

Yes the buttons was my screw up but i have followed the instruction on the pane size now and it still does not work for me, the panes in the Carousel are shifted to the right.

John


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

Walter,

For the time being i have reverted to Carousel and all is fine at present.

John


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