[Pro] Centre align DIV in Browser - HOW?!!

Hi all,

I have a single pg inline built site… 5000px deep

The contact form is in a seperate DIV that is fixed the the bottom of the page at all times (bottom inset = 0)

However this uses the FX action & is set to initially hidden.

So when the CONTACT tab is clicked the form ‘scrolls up from the bottom of the page’ (browser window) no matter where you are on the page…

Here’s the tricky part!!!

How do I get this div to centre align both within the page & browser window?

My site is 900px wide centre aligned.

The contact div is 900px wide also but the left inset makes it appear at my defined input. There is no option to align centre etc…

Does any clever FW user have any suggestions please, I know Delta Dave has had a look at this too, but requires a bit more thinking…

Regards

Worm


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

Try using a nested layout for this part. Put a fixed-position DIV where you want the element to appear, then double-click inside that and Insert / HTML Item to add an inline child. Click once on that element, set its Margin to Auto (center) and then set its width and height to match your desired content. Place your content inside that, and you’ll be set. It’s a bit “Inception”, but it works perfectly.

Walter

On May 9, 2012, at 10:09 AM, Mr worm wrote:

Hi all,

I have a single pg inline built site… 5000px deep

The contact form is in a seperate DIV that is fixed the the bottom of the page at all times (bottom inset = 0)

However this uses the FX action & is set to initially hidden.

So when the CONTACT tab is clicked the form ‘scrolls up from the bottom of the page’ (browser window) no matter where you are on the page…

Here’s the tricky part!!!

How do I get this div to centre align both within the page & browser window?

My site is 900px wide centre aligned.

The contact div is 900px wide also but the left inset makes it appear at my defined input. There is no option to align centre etc…

Does any clever FW user have any suggestions please, I know Delta Dave has had a look at this too, but requires a bit more thinking…

Regards

Worm


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 did think about this…

It works, but with my content ‘contact form’ inside the inline child element… it aligns centered perfectly & from the bottom of the page.

Only trouble is I NEED it to have a bottom inset of 0 in the inspector dimensions to lock it to the bottom on my page at all times, even while brower page is scrolled as my page is 5000px deep & the link to make this form appear is right at the top Walt.

So currently when clicked it works, but you have to scroll all the way to the bottom to see it

I can send you an archive file of my working if needed?

Worm


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

Click on the outer element, the one you have set to 0 bottom, and make sure that Position is set to Fixed In Window. This will stick it to the bottom of the screen (not the page) at all times, and the rest of the page will scroll under it. If you don’t have room to keep it on screen at all times (if it’s too tall to leave showing all the time) then you may need to switch to a fully inline page layout (or use the RPL Action) as that will allow you to have an element that respects the overall height of all the page contents.

Walter

On May 10, 2012, at 5:32 AM, Mr worm wrote:

I did think about this…

It works, but with my content ‘contact form’ inside the inline child element… it aligns centered perfectly & from the bottom of the page.

Only trouble is I NEED it to have a bottom inset of 0 in the inspector dimensions to lock it to the bottom on my page at all times, even while brower page is scrolled as my page is 5000px deep & the link to make this form appear is right at the top Walt.

So currently when clicked it works, but you have to scroll all the way to the bottom to see it

I can send you an archive file of my working if needed?

Worm


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 walt, having a few issues so I’ve sent you an archive if you can take a look please via yousendit (check you spam)… :slight_smile:

Web pr pg: page is my original working… (works but not centre aligned)

Walt pg: Is using your working… I’ve yet to apply your second set of instructions (centre aligned but sill have to scroll page to see form at bottom of page)

Close, but not quite the finished article

Worm


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

Here’s another approach, from a site I just did an “Extreme Makeover” on for another Freeway user: http://carolinaallergyandasthma.com/

Note the fixed footer, and what happens when you scroll near the bottom of the page. I made each page in the document 2000px tall (way larger than needed for the content) and then added a Position: Fixed in Window element at the bottom of each page to hold the footer. All the other page content was a mixture of absolute and inline, with the bottom-most elements all inline and having a 140px bottom margin to clear the footer. That way I didn’t have to fuss with page heights and footer positions, and everything just worked.

Walter

On May 10, 2012, at 10:45 AM, Mr worm wrote:

Hi walt, having a few issues so I’ve sent you an archive if you can take a look please via yousendit (check you spam)… :slight_smile:

Web pr pg: page is my original working… (works but not centre aligned)

Walt pg: Is using your working… I’ve yet to apply your second set of instructions (centre aligned but sill have to scroll page to see form at bottom of page)

Close, but not quite the finished article

Worm


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

It looks like your Contact Us link at the top of the page is set with TransitionFX to blind down the footer form element (there’s just a blank area on the screen when the page loads) but there’s no corresponding anchor to scroll you down to that element when you trigger the effect.

You might try applying the Observer Action to the same box that you’ve applied TransitionFX to, set the Event to ‘mouseup’ and the Library to ‘scriptaculous-packed’, and the Function Body to:

Effect.ScrollTo('FOOTER-DIV');

This will double up the effects on this particular element, adding an animation down to the form.

Another way to approach this would be to have an anchor link to the URL #FOOTER-DIV on Contact Us, since that would engage the SmoothScroll effect to the same end.

Walter

On May 10, 2012, at 10:51 AM, Walter Lee Davis wrote:

Here’s another approach, from a site I just did an “Extreme Makeover” on for another Freeway user: http://carolinaallergyandasthma.com/

Note the fixed footer, and what happens when you scroll near the bottom of the page. I made each page in the document 2000px tall (way larger than needed for the content) and then added a Position: Fixed in Window element at the bottom of each page to hold the footer. All the other page content was a mixture of absolute and inline, with the bottom-most elements all inline and having a 140px bottom margin to clear the footer. That way I didn’t have to fuss with page heights and footer positions, and everything just worked.

Walter

On May 10, 2012, at 10:45 AM, Mr worm wrote:

Hi walt, having a few issues so I’ve sent you an archive if you can take a look please via yousendit (check you spam)… :slight_smile:

Web pr pg: page is my original working… (works but not centre aligned)

Walt pg: Is using your working… I’ve yet to apply your second set of instructions (centre aligned but sill have to scroll page to see form at bottom of page)

Close, but not quite the finished article

Worm


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

Another note – this is a very glossy and impressive site! Lots of Carousel in one page!

Walter

On May 10, 2012, at 10:45 AM, Mr worm wrote:

Hi walt, having a few issues so I’ve sent you an archive if you can take a look please via yousendit (check you spam)… :slight_smile:


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

Nicely done Walter :slight_smile: btw, how much of that javascript is necessary for
the footer animation? I’m assuming much of it is for the slider…


Ernie Simpson

On Thu, May 10, 2012 at 10:51 AM, Walter Lee Davis email@hiddenwrote:

Here’s another approach, from a site I just did an “Extreme Makeover” on
for another Freeway user: http://carolinaallergyandasthma.com/

Note the fixed footer, and what happens when you scroll near the bottom of
the page. I made each page in the document 2000px tall (way larger than
needed for the content) and then added a Position: Fixed in Window element
at the bottom of each page to hold the footer. All the other page content
was a mixture of absolute and inline, with the bottom-most elements all
inline and having a 140px bottom margin to clear the footer. That way I
didn’t have to fuss with page heights and footer positions, and everything
just worked.


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

This much:

Walter

On May 10, 2012, at 11:23 AM, Ernie Simpson wrote:

Nicely done Walter :slight_smile: btw, how much of that javascript is necessary for
the footer animation? I’m assuming much of it is for the slider…


Ernie Simpson

On Thu, May 10, 2012 at 10:51 AM, Walter Lee Davis email@hiddenwrote:

Here’s another approach, from a site I just did an “Extreme Makeover” on
for another Freeway user: http://carolinaallergyandasthma.com/

Note the fixed footer, and what happens when you scroll near the bottom of
the page. I made each page in the document 2000px tall (way larger than
needed for the content) and then added a Position: Fixed in Window element
at the bottom of each page to hold the footer. All the other page content
was a mixture of absolute and inline, with the bottom-most elements all
inline and having a 140px bottom margin to clear the footer. That way I
didn’t have to fuss with page heights and footer positions, and everything
just worked.


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!


Ernie Simpson

On Thu, May 10, 2012 at 11:29 AM, Walter Lee Davis email@hiddenwrote:

This much:

peek.js · GitHub

Walter

On May 10, 2012, at 11:23 AM, Ernie Simpson wrote:

Nicely done Walter :slight_smile: btw, how much of that javascript is necessary for
the footer animation? I’m assuming much of it is for the slider…


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

On 10 May 2012, 3:20 pm, waltd wrote:

Another note – this is a very glossy and impressive site! Lots of Carousel in one page!

Walter

Is this a good thing Walt??!! It’s a different approach & look reflects the subject well I feel :slight_smile:

Having quickly skimmed your replys, I can see your suggestion & will try it out!!

But if you look at the file I sent you & look at the WEB PR page, this is the functionality I want the contact form to have when clicked using the FX action (only centre aligned)

Can this be done Walt?

Worm


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

Hi Walter

Just trying to recreate your carolina allergy page but struggling a bit.

Any chance you can share a cut down FW example of it please.

David


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

Hi Walt, I’m still trying to get this form to centre align… having a frustrating time to get it to work this way with the FX action!!

Is it something I’m going to have to abandon or comprimise on?

Worm


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

In order to have something centered that is also fixed in window, you need another layer of positioning. Observe the following ASCII-gram:

+-----------------+
|     fixed       |
|  +-----------+  |
|  |  relative |  |
|0 |  <auto>   | 0|
|  |           |  |
|  +-----------+  |
|        0        |
+-----------------+

Make your fixed element have left and right at 0, width unset (so it can flex to the screen), and bottom at 0 and height unset (but do the height part last). Then double-click inside your fixed element and paste your form div as an inline. Click once on it (make sure you have CONTACT-FORM selected) and set the Margin to Auto. This will center the form within the fixed-in-window parent, which will also give the illusion of centering it on the page as long as the rest of the page is centered. This is how the Carolina Allergy footer is positioned.

Walter

On May 11, 2012, at 10:22 AM, Mr worm wrote:

Hi Walt, I’m still trying to get this form to centre align… having a frustrating time to get it to work this way with the FX action!!

Is it something I’m going to have to abandon or comprimise on?

Worm


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

What I mean by this is put your inline content in place before you disable the height. Otherwise, the fixed container will drop to 0 height, and become exceedingly hard to see or select.

Walter

On May 11, 2012, at 10:36 AM, Walter Lee Davis wrote:

do the height part last)


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