[Pro] How would you build a page like this

On this page, when you click items on the left, the only thing that changes is the center. How would you build something like that in FW?

http://solarpathusa.com/resources/technology/


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

the only thing that changes is the center.

I am not seeing that - to me the whole page refreshes/changes.

It may be that because the only content that has any ‘weight’ is in the middle creates that impression for you.

You could create an effect like that (center content only changes) by using iFrames but I am not sure how much juice that would give you SEO wise.

There are other methods using Ajax but not sure you want to go down that route. The Log In form at FWT is brought in using an Ajax request if my memory serves me correctly.

David


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

Ahh, yeah it looked to me like only the center was changing and not a whole new page.


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

If the site was faster it might look like a frame, but it’s reeaallly slow right now - so loading a new page is obvious.


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

Yeah the whole site is really really slow


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

Yes, that’s how it works. Keeps a whole class of spam-bots out, because they don’t run JavaScript and so they don’t even see it.

Walter

On Sep 5, 2014, at 2:49 AM, DeltaDave wrote:

The Log In form at FWT is brought in using an Ajax request if my memory serves me correctly.


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

I started building an Action to do this trick a couple of years ago, but I never finished it. The real issue is getting links to work. If you build all the content in one page (in your Freeway document – imagine one extremely tall page), then it can work just fine. But if you are trying to combine multiple pages into one, there’s a couple of problems that crop up. First is styles and other linked external content. These have to be moved out of the page head of your “partials” (the fragments that you are loading into the main page) and their links need to be massaged so they work from their new perspective. Second is any links you make to other pages from within the partial. They are going to start off on the wrong relative foot from the page where they are being inserted. It’s a non-trivial exercise.

You can try the following steps and see how it works for you. Do this in a stunt page, so you don’t waste too much time with something you care about.

  1. Make your page ridiculously tall, then lay out the navigation and “content spot” where you like them at the top of the screen. Name this box ‘content’ (without the quotes) using the Name/ID input on the Item Inspector. Leave it entirely empty.
  2. Drag-duplicate the content spot down the page, so you have a correctly-sized element that you can pop into the same location on screen.
  3. Using that duplicated box, make a new set of content to appear by default. Then duplicate it and make several different versions. Each HTML box should be named uniquely and memorably using the Inspector as above.
  4. In your navigation area, add text links to each of your options. The links in each should be made manually, to a version of whatever you named each HTML box. Let’s say you named one box ‘products’ using the Name/ID control. Change the URL to _products.html (leading underscore, ID, trailing .html).
  5. Go to each of the content elements and apply the TemplateHelper Action to it. Check the following options:
    • Make Partial
    • Remove Positioning
  6. Publish and preview in a browser. At this point, your content elements should disappear, and clicking on one or another of these manual navigation links should just take you directly to the partial, which will look bad (no style) and be positioned in the top-left of your browser.
  7. Apply the Protaculous 2 Action to the page, and click on the DOM Loaded Observer button to open the editor. Paste in the following blob of code (which assumes that you named the box containing your navigation items ‘nav’ (without the quotes) using the Name/ID control in the Item Inspector.
$('nav').on('click', 'a', function(evt, elm){
  evt.stop();
  new Ajax.Updater('content', elm.readAttribute('href'));
});
new Ajax.Updater('content', '_yourInitialFrame.html');

If you changed _yourInitialFrame.html’ to match the ID of the box you set up as your first content frame, you should be all set. The last line of code loads that “page” into the content area when the page loads, and the first block of code “wires” the links in the ‘nav’ element to load their linked content into the content panel when you click on them. If you squint a lot, this is precisely what the ScriptyFader Action does, only that fades between elements.

Walter

On Sep 5, 2014, at 2:49 AM, DeltaDave wrote:

There are other methods using Ajax but not sure you want to go down that route.


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