[Pro] How to do this?

t50ufo1 · December 4, 2012, 9:52am

On this page: Clicking on ALL MODELS slides out a pane from the left.

Any solution for this in a freeway page?

Thanks in advance

Trev

http://www.jaguar.com/gb/en/

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

t50ufo1 · December 4, 2012, 10:50am

Further to this:
I can achieve the effect with a Carousel Pane but the transition is right to left. If only I could change the direction of the transition this would do the job?

Trev

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

waltd · December 4, 2012, 1:42pm

You can do this with the Protaculous Action, using the Scriptaculous Morph effect as in this example:

http://www.freewaytalk.net/thread/view/120524#m_120694

Your effect would be slightly different, because you want the element to be initially hidden.

gist.github.com

https://gist.github.com/walterdavis/4203930

gistfile1.js

var panel = $('yourElement').store('width', $('yourElement').getWidth()).setStyle('width:0');
$('button').observe('click', function(evt){
  if(panel.getWidth() < panel.retrieve('width')){
    panel.morph('width: ' + panel.retrieve('width') + 'px', {duration: 0.4});
  }else{
    panel.morph('width: 0', {duration: 0.4});
  }
}).setStyle('cursor:pointer');

All I did was set the width to 0 at the end of the first line to get that to work. Note that your panel element must have Overflow set to Hidden in the Inspector for this effect to work.

To test this code, start with a blank new page, set to HTML 4 or XHTML 1. Make sure that the CSS Layout button is on, so everything you draw will become a layer. Draw an HTML box where you want your panel to appear, and give it a background color. In the Inspector (while that first box is selected – handles showing at the corners) make sure the Title field in the Inspector reads ‘yourElement’. Now draw a second box on the page, and set its Title to ‘button’. Be sure to give it a color as well, so you can see it to click it.

Now apply the Protaculous Action to your page, and set the Library picker to scriptaculous-packed. Click on the top Function Body button and paste in the code from the Gist above in the editor dialog. Okay out of the dialog, and preview your page in a browser. Assuming everything else was set correctly, you should see your button element, and nothing else. Click the button element, and the panel should slide in from the left.

Walter

On Dec 4, 2012, at 5:50 AM, t50ufo wrote:

Further to this:
I can achieve the effect with a Carousel Pane but the transition is right to left. If only I could change the direction of the transition this would do the job?

Trev

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

t50ufo1 · December 4, 2012, 1:53pm

Walter - Spot On!

Worked first time!

Really Happy with that.

Thaks

Trev

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

t50ufo1 · December 4, 2012, 2:03pm

Slight problem Walter

When I try to enter text or graphics in the (sliding) html box it remains visible and the box slides in and out behind.

Trev

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

waltd · December 4, 2012, 2:31pm

You have to make the box their parent. It’s not enough to just draw those elements over the top of the HTML box, you have to have the box selected as you draw (the edges of the HTML box will glow blue as you draw, indicating that it is the parent). If you are building a similar effect in the future, remember to click once on the parent box before you choose the HTML or Graphic Box tool to draw a child element, and keep the start and end of your drag within the bounds of the parent element.

It is possible to create this hierarchy after you draw the elements in the wrong order, by using the Page view of the Site pane in Freeway. Click once on the word Site at the top of the Site pane. The title will change to Page, and you will see a hierarchical (outline) list of all elements on the page. Click once on your sliding panel, so you know where it is in the list. Then click on the first element you wish to make a child within the design view. The name of that element will highlight in the list. Click on the item’s name in the list, and drag it until it is just under the sliding panel’s name in the list. Drag a little bit to the right, so the name of the sliding panel highlights and turns bold. Release the mouse, and the child element should remain, nested to the right, under the main panel element in the list. The page layout should not change at all. Repeat for all of the other child elements. Now you have a nested group that will behave as one. Now when the outer box shrinks, it will “clip” the content elements (because you set Overflow to Hidden).

Walter

On Dec 4, 2012, at 9:03 AM, t50ufo wrote:

Slight problem Walter

When I try to enter text or graphics in the (sliding) html box it remains visible and the box slides in and out behind.

Trev

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

t50ufo1 · December 4, 2012, 2:46pm

Can’t get that to work Walter.

I click once on the html box (it outlines blue) and draw a graphic box inside, add a colour fill but when I preview the filled box is in view and the sliding box still slides in an out behind

Trev

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

t50ufo1 · December 5, 2012, 2:40pm

Can anyone help please with problem (as posted) adding items to sliding panel using Protaculous Action. Really stumped on this one!

Thanks

Trev

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

waltd · December 5, 2012, 2:45pm

Is the parent HTML box set to Overflow: Hidden in the Inspector? That’s not the default, you would have had to change that to make it work.

Walter

On Dec 5, 2012, at 9:40 AM, t50ufo wrote:

Can anyone help please with problem (as posted) adding items to sliding panel using Protaculous Action. Really stumped on this one!

Thanks

Trev

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

t50ufo1 · December 5, 2012, 2:56pm

I could kick myself!

Yes changing the Overflow:Hidden has done the trick. Thanks so much Walter. Case of not seeing the wood for the trees. Now I can make some progress.

Trev

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

t50ufo1 · December 5, 2012, 3:20pm

Just a little addition required and I think it may have something to do with the other function event in the action. I need to place a close button on the opened pane to close it again.
I am using a graphic text link to open/close but it would be easier to close the pane with a click on a button.

Thanks

Trev

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

waltd · December 5, 2012, 3:42pm

Clicking the same button that opened the pane will cause it to close again. If you want a different button to do the same thing, you could change the code slightly, and your construction as well, to make that happen.

First, new code:

gist.github.com

https://gist.github.com/walterdavis/4216644

gistfile1.js

var panel = $('yourElement').store('width', $('yourElement').getWidth()).setStyle('width:0');
$$('.button').invoke('observe', 'click', function(evt){
  if(panel.getWidth() < panel.retrieve('width')){
    panel.morph('width: ' + panel.retrieve('width') + 'px', {duration: 0.4});
  }else{
    panel.morph('width: 0', {duration: 0.4});
  }
}).invoke('setStyle', 'cursor:pointer');

The differences are tiny and subtle, the function now listens for a click on any element that has the class attribute ‘button’ applied to it, rather than only listening to a single element named button.

The corresponding changes to your Freeway layout are as follows:

Click once on your existing button element (the one that opens the effect) and choose Item / Extended from the main menu. Click New, and add a new name/value pair: class: button. (If you’re viewing this in Mail, the back-tick characters are there to create code formatting in the Web view of this list, they are not literally what you should enter in Freeway. Only enter the text within them.
Create your “close” button, and repeat step one above to add the classname button to it.

Preview in a browser. Clicking the first button should open the panel, and clicking the second button (or the first, if it’s still visible) should close it. It makes no difference what sort of element you apply that class to – a graphic, a run of text (you’ll have to create a blank style with that Name in the Styles palette), a form button – as long as it has the classname attribute, it will work.

Walter

On Dec 5, 2012, at 10:20 AM, t50ufo wrote:

Just a little addition required and I think it may have something to do with the other function event in the action. I need to place a close button on the opened pane to close it again.
I am using a graphic text link to open/close but it would be easier to close the pane with a click on a button.

Thanks

Trev

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

t50ufo1 · December 5, 2012, 3:57pm

Excellent - worked 1st time!

What can I say - big grin here!

Trev

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

t50ufo1 · December 7, 2012, 8:56pm

Walter

Can you help

Work in progress here:

http://www.trevormckay.co.uk/orion/home.html

If you click on “image gallery”, the item you see at the bottom of the page (a telescope in a box) for some reason has the Observer action attached to it (don’t remember even doing that?). If I try to remove the item hence action the Protaculous pane activated by “View all items” is disabled and the pane is visible.

The same action is attached to the element on other pages ie: home page: product 2 and telescopes: ODK - which are copies from the original page. How can I rectify this and remove the item with the Observer action leaving my sliding window working as expected.

Thanks

Trev

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

David_McCallum · December 7, 2012, 9:54pm

Just jumping in here Trevor to say that is a pretty scary page with a huge mix of jQuery and script/protaculous on it and associated JS errors to match.

Do you really need all those JS libraries to make this page work?

David

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

t50ufo1 · December 8, 2012, 10:16am

Hi David

Thanks for having a look.

The original test page(s) had a Carousel Action which I removed in favour of the Protaculous Action for the sliding menu. I do get an incorrectly used error on publish re the Carousel and didnt’ get to rebuild the pages to clear that.

Do you think I should go for a more static approach? That sliding menu is quite nice!

CCS transperancy could certainly be ditched.

Any feedback would be much appreciated on how I could simplify/clean it up.

Thanks

Trev

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

David_McCallum · December 8, 2012, 12:24pm

So is the only JS functionality you need the slide in menu because I see all the associated files in there for a jQuery background slideshow too.

D

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

t50ufo1 · December 8, 2012, 12:35pm

Yes, just the slide out menu as it looks now - no slideshow.
I will have a go at cleaning it up later and re-upload.

Thanks

Trev

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