Carousel 2 can live in a relatively-positioned (in-flow or inline) page, but it cannot itself be made to flex along with the rest of the page. Each pane must have an absolute size in pixels, otherwise the effect can’t calculate the dimensions of the slider element.
Walter
On Mar 27, 2014, at 1:09 PM, David Li wrote:
Hi All,
Just wondered if some can help me.
I’m building a new website and would like the header and footer to fit to the width of the browser window.
I have done this successfully including adding content and menus using inline layout.
The only thing I’m having trouble with is getting Carousel 2 to work. I have no trouble getting it to work using relative page layout.
I want to use Carousel 2 using the inline CSS box model layout. The carousel is 500px wide and sits in the middle of the page. It does not need to expand the width of the browser.
I just tested this, and it does work. Steps to follow:
Insert an HTML box inline where you want the Carousel 2 effect to appear. Make it the desired dimensions of a pane, and give it a solid color. Copy it to the clipboard.
Apply the Carousel 2 Action to the HTML box you made in step 1. Configure it to auto-glide.
Click somewhere blank on the pasteboard, and paste from the clipboard. Change the pane’s color. Apply the Carousel 2 Pane Action to this item.
Duplicate the second pane a few more times if you like.
Preview in a browser. You should see the animation start.
Now you can add other elements to this – the previous and next buttons, the tabs for direct navigation to one of the panes – and they will also work in an inline layout context. The only restriction is that the extra panes are going to be off the screen on the pasteboard somewhere, not in your layout. Only the one element that you’ve applied the Carousel 2 Action to needs to be inline in your layout.
Walter
On Mar 27, 2014, at 3:11 PM, Davl1 wrote:
Thanks for your reply.
I may have used the wrong wording in my 1st posting.
Is there a difference between ‘inline layout’ and “Inline CSS layout (box model layout)”?
I want to use Carousel 2 using the inline CSS box model layout. The carousel is 500px wide and sits in the middle of the page. It does not need to expand the width of the browser.
I hadn’t tried that one, but I just did. I double-clicked inside the central yellow pane, above the many mentions of foxes and dogs, and pasted in my Carousel 2 instance from the test document. Then I copied and pasted the two panes from the test document to the pasteboard of the box model tutorial document. Previewed in a browser, and there is my carousel, animating furiously away in shocking primary colors. What happens when you try that? And were you trying to place the carousel inline within a different parent element?
Walter
On Mar 27, 2014, at 3:41 PM, Davl1 wrote:
Hi Walter,
Again thanks for your reply, but I’m still having trouble doing this.
What I’m trying to achieve is to create a website with a header and footer that grows and shrinks to the same width of the browser window. The contents of the website to be center aligned.
Please see this page as an example:
I able to recreated the wordpress site in FW but not able to add the Carousel.
Is there an easier way than using the Inline CSS layout (box model layout)?
What I’m trying to achieve is to create a website with a header and footer that grows and shrinks to the same width of the browser window. The contents of the website to be center aligned.
I able to recreated the wordpress site in FW but not able to add the Carousel.
Are you using the Carousel Action (part of Protaculous) or Carousel 2 (a separate, stand-alone Action)? The former definitely cannot be used inline, and the latter definitely can.
Is there an easier way than using the Inline CSS layout (box model layout)?
This is the only way to make a site with an expando header and footer, but you can make an expando header with a normal “draw it in place” layout and a centered page. You just have to fake the header with a horizontally-tiling page background.