[Pro] Carousel question for Walt

Walt,

A question concerning your carousel action.
I’m using it in a CSS box layout which is fine, however I am also using a floating menu which is controlled by the ‘sticker’ action.
The idea is that all the content of the page can run behind the ‘stickered’ menu when scrolling down the page.
Unfortunately, this stops the carousel action working (which seems to work fine if sitting in front of the ‘stickered’ menu).

Is there a way round this?

In layman’s terms!

Cheers,

Nik


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

Can you post a working and non-working example, please? I’m not sure that Carousel can work in an inline layout, at least not predictably.

Walter

On May 3, 2012, at 9:50 PM, Nik Andrew wrote:

Walt,

A question concerning your carousel action.
I’m using it in a CSS box layout which is fine, however I am also using a floating menu which is controlled by the ‘sticker’ action.
The idea is that all the content of the page can run behind the ‘stickered’ menu when scrolling down the page.
Unfortunately, this stops the carousel action working (which seems to work fine if sitting in front of the ‘stickered’ menu).

Is there a way round this?

In layman’s terms!

Cheers,

Nik


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

Not sure how to post this.
It is destined to be an re-design of my own website.
I suppose I could publish it or I can send you the freeway folder.

What works best for you?


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

I need to see it failing, so I can decipher what the issue is at the JavaScript and CSS level. If you can cut it down to a single page, you can send that to me privately. If you would, though, I’d prefer you publish it on a server somewhere and post the address. Then it’s not just me with eyes on it and debugging skills. There’s quite a lot of Prototype talent on this list these days.

Walter

On May 3, 2012, at 10:43 PM, Nik Andrew wrote:

Not sure how to post this.
It is destined to be an re-design of my own website.
I suppose I could publish it or I can send you the freeway folder.

What works best for you?


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

Its only a single page at this point.

I’ll upload and send the link

Cheers,


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

Walt,

Uploaded.
http://www.andrewdesign.co.nz/

The sticker section is working fine.
The carousel which sits just below and underneath… isn’t.

I fear I may have to sacrifice my sticky menu – which would be a shame.

many thanks!


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

Okay, that was easy. Your Scripty Actions are out of synch with the copy of Freeway that you’re running. Go to ActionsForge and download the latest Sticker and Protaculous. One of these is out of date, because you’re getting a mixture of Prototype 1.6 and 1.7, and they’re not compatible.

Walter

On May 3, 2012, at 11:06 PM, Nik Andrew wrote:

Walt,

Uploaded.
http://www.andrewdesign.co.nz/

The sticker section is working fine.
The carousel which sits just below and underneath… isn’t.

I fear I may have to sacrifice my sticky menu – which would be a shame.

many thanks!


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.
So easy for you!

Uploaded and working just as I always imagined!
Brilliant – many thanks.

Now seeing as you’re still up – I have another question concerning the same page… (sorry)

the boxes and accompanying text further down have the CSS transparency applied.
Ideally, I would have liked both to be activated together but as the effect can only be applied to a graphic item rather than the html box that houses everything – I can’t come up with a solution.

Any ideas? (That aren’t too difficult!)

Many thanks,

Nik


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

Sure. Since you have the Carousel on the page, you also have access to Protaculous. Apply that Action to the page, and set the Library picker to scriptaculous-packed. Draw an HTML box on the page, and either use the Item / Extended dialog or the Add Selector Action to add a class attribute to that HTML box. Let’s say you call it ‘fader’. In Extended, you would make sure that the

tab was selected, then click New, then enter:

  • Name: class
  • Value: fader

…in the sub-dialog. Okay out of that stack, and put some content in the HTML box as inline content. Maybe a graphic and some text, just to prove the point.

Now, click elsewhere on the page, so nothing is selected, and in the Actions palette, click on the top Function Body button. Paste in the following code:

$$('fader').each(function(elm){
	elm.setOpacity(0.6);
	elm.observe('mouseenter', function(evt){
		new Effect.Opacity(this, {from: 0.6, to: 1.0, duration: 0.4});
	});
	elm.observe('mouseleave', function(evt){
		new Effect.Opacity(this, {from: 1.0, to: 0.6, duration: 0.4});
	});
});

Now preview, and mouse over your HTML box. It should start out faded, and become full-strength when you mouse over it, and fade away when you mouse out. Now duplicate this element in Freeway and test again – one block of code handles both elements independently. So now, all you need to do is apply the fader classname to each box that you want to have this effect, and you’re done.

Walter

On May 3, 2012, at 11:34 PM, Nik Andrew wrote:

the boxes and accompanying text further down have the CSS transparency applied.
Ideally, I would have liked both to be activated together but as the effect can only be applied to a graphic item rather than the html box that houses everything – I can’t come up with a solution.


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

Um, that should read

$$('.fader').each(function(elm){

Forgot the leading dot that means it’s a classname.

Walter

On May 3, 2012, at 11:53 PM, Walter Lee Davis wrote:

$$(‘fader’).each(function(elm){


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

A little homework…

I will try this and see how it goes!

Again, many thanks.


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