[Pro] pop out form

Freeway
1

I have a customer who wants the pop out form tab on the right side of the site. Anyone know of a way to do this?

Thanks John

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

2

Well, you can’t use TransitionFX for this, as it only includes the Blind Down or Slide Down form of the effect. You could use the underlying effect engine to do this, though. Apply Protaculous 2 to your page, and select “Add Scriptaculous Libraries” in the main interface. Effects will be checked by default, and that’s the one you want.

Draw an HTML box where you want your form to appear when it is showing, and note how wide it is and what its Name/ID is. Be sure to set it to Overflow: Hidden in the Inspector.

Either create your form inline within that HTML box, or make all of the form elements nested positioned children of the box. (To do the latter, click once on the HTML box, choose the element you wish to draw as its child from the Tools or toolbar, and then draw that child element entirely within the parent HTML box. When you are doing this correctly, you will see the HTML box’s edges glow blue as it accepts each child element. You have to click the box before you add each element.)

Once your form is done, move to the Protaculous 2 Action’s interface. In the DOM Loaded Observer, enter the following line:

$('your_form_box_id').setStyle('width:0');

That will cause the form to shrink to 0 width, effectively disappearing, when the page loads.

Now you will need to create some sort of trigger element that will cause the form to appear. I would draw a graphic box and fill it with a color for now. Position this so it looks like a tab sticking out of the left side of the page, and sent it to back (at the very least, behind the form box). Note the Name/ID of this element as well. Back to Protaculous – on the next line down below the line of code we added earlier:

$('your_tab_graphic_id').observe('click', function(evt){
	$('your_form_box_id').morph('width: 500px', {duration: 0.4});
});

Note that the 500px is just a guess as to how wide your form box actually was. Make this match your original design.

Also make sure that you put the EXACT Name/ID in place of my placeholders. JavaScript is extremely pedantic – case-sensitive and all.

So what this should do is cause the form to slide out of the left side of the screen when the tab graphic is clicked. Because you layered the form box above the button that caused it to appear, that button will be effectively hidden.

Walter

On Oct 25, 2013, at 1:53 PM, John Robinson wrote:

I have a customer who wants the pop out form tab on the right side of the site. Anyone know of a way to do this?

Thanks John

http://www.thompsoncreek.com/

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

3

Walter Thanks for your help. I guess I had better experiment with this before I build it on the site.
John

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