[Pro] ScriptyAccordion—need help!

I’d like to create a “Accordion” similar to the one on this page: http://ivk.org.ua/ua/uslugi-etsp/tarifnye-plany/vse-sub-ekty (unfortunately, the site is in Ukrainian). I’ve been fiddling around with this Action for two days and I still have no idea how to get it going properly. Any suggestions?

Roman

http://ivk.org.ua/ua/uslugi-etsp/tarifnye-plany/vse-sub-ekty


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

ScriptyAccordion doesn’t have the degree of controls that you would need to do this exact layout, but you could hand-code it in Protaculous 2 pretty simply. (Yes, for certain definitions of “simply”. This is long and detailed, but once you follow through these steps, you will have gained a new tool for your kit that an Action alone simply cannot give you.)

It all begins with the construction, which should be in-flow. Draw a single HTML box tall enough to hold all of your accordion elements fully expanded. (You may need to make your page taller to accommodate.) Make sure the Name/ID field reads ‘outer’ (without the single-quotes) if you’re following along here.

Double-click inside that box so you see a flashing text cursor, and choose Insert / HTML Item from the main menu. The result will be a 100px box inside the outer-most box. Click once on that box, and drag out its width to fill the outer box. In the Style tab of the Inspector, set the background color, border color, and in the layout tab, set the margin-bottom and padding to your desired dimensions. (I used #f7f7f7, #dedede, and 8px margin-bottom and 12px padding.)

Double-click inside that box, and at the flashing text cursor, choose Insert / Table from the main menu. Set the rows to 1 and the columns to 5. Drag it out to the full width of the containing box. Add the content into the table cells. Click once on the table (or Command-Option-click until the table itself is highlighted, not any of its cells) and from the Output tab of the Inspector, make sure that Height can shrink is checked.

Double-click inside the containing box below the table, so you get a flashing text cursor (can be difficult to see, as it gets hidden at the bottom-left of the table). Choose Insert / HTML Item to add a box to hold the descriptive text. This is the element that will appear and disappear as the link is clicked, so drag it out to full-width and add that content. Make sure this box has its height set to “Flexible” in the Inspector’s layout tab. Also (now that you’ve added content to it) make sure that the containing box is also set to Flexible. (If you add this property too soon, the item will collapse to zero height, which makes it very hard to select and add content.)

In the Styles palette, create a new style with the Name set to collapsed. Click the Extended button, then New, then in the Name field enter ‘display’, and in the Value field enter ‘none’ (both without quotes). Confirm that the Name field of the style reads only ‘collapsed’ (again, without quotes). Okay out of the stack of dialogs, and click once on the description HTML box so its corner handles appear. Click once on the style labeled .collapsed in the Styles palette. Note that nothing will happen in the design view – all elements will appear “expanded” at all times.

Now would also be a good time to add the link – so highlight some text inside the table, apply a link, and use the External tab of the Hyperlink dialog to enter just an empty anchor: # as the URL.

Now you’re done with the first element. Time to step-and-repeat. Select the containing box (the first level of inline HTML box inside the “outer” HTML box) so its corner handles are showing. Copy to the clipboard. Double-click inside the “outer” box so you have a text cursor, and paste as many times as you have segments to your accordion. (Later, you will go back and change the content of each box so it reflects what you want each one to say, but for now, this is enough to show how it works.)

Believe it or not, you’re almost done at this point. Click (or shift-option-click until you get the selection where you want it) on the outermost ‘outer’ box, and make sure its height is set to Flexible also. Time to add the little bit of JavaScript that will wire all of this together. Please note that this script is precisely targeted to making this layout. I will try to explain why and how as I go here, but realize that if you change any of the steps above, you will need to make concomitant adjustments to the script so that it will respond as you expect it to.

Apply the Protaculous 2 Action to the page, and click on the DOM Loaded Observer button. Enter the following code in the dialog, and okay it.

$('outer').on('click', 'table a', function(evt, elm){
  var desc = elm.up('table').next('div');
  if(desc){
    desc.toggleClassName('collapsed');
  }
});

Line-by-line, here’s what this does:

  1. Listen for a click on an a (link) that is contained within a table, that is itself within the item on the page with the ID ‘outer’.
  2. Find an item that is a div directly following the table containing the link that was clicked.
  3. If that item is present…
  4. Toggle the ‘collapsed’ classname on that item. (If the class is there, it is removed, and vice-versa.)
  5. Close the “if”.
  6. Close the listener function.

So the items that are specifically sensitive to construction are line 1 and line 2. If you change the type of element or the construction order, then these would need to be altered to match.

Now, publish your page, and see if it does what your example page did, first time. It did here: Custom Accordion

File is here: http://scripty.walterdavisstudio.com/custom-accordion/custom-accordion.freeway.zip

Further refinements: you could change the way that the .collapsed style works, and add CSS transitions to it so that the disclose happens gradually rather than all at once in a “snap”. You could also use the Scriptaculous library (available in Protaculous 2 with one click) to do the same thing using JavaScript rather than CSS. (This is a “heavier” solution, but it guarantees that IE < 10 will see the same thing that every other browser on earth does.)

Walter

On Jan 5, 2014, at 11:59 AM, Roman Zvarych wrote:

I’d like to create a “Accordion” similar to the one on this page: http://ivk.org.ua/ua/uslugi-etsp/tarifnye-plany/vse-sub-ekty (unfortunately, the site is in Ukrainian). I’ve been fiddling around with this Action for two days and I still have no idea how to get it going properly. Any suggestions?

Roman

http://ivk.org.ua/ua/uslugi-etsp/tarifnye-plany/vse-sub-ekty


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

WOW! Walter, thank you, again! All this seems to be a bit complicated at first glance, but I think that I get the basic concept. I will, certainly, try all of this and will follow your detailed instructions carefully. We’ll see what happens.

Again, thanks a lot!!!

Roman


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

You’re welcome. I just realized, in clicking on my example, that I left out one line of code that would stop the click on the empty anchor from “snapping” the page back up to the top. Change this:

$('outer').on('click', 'table a', function(evt, elm){
 var desc = elm.up('table').next('div');
 if(desc){
   desc.toggleClassName('collapsed');
 }
});

To this:

$('outer').on('click', 'table a', function(evt, elm){
 var desc = elm.up('table').next('div');
 if(desc){
   evt.stop();
   desc.toggleClassName('collapsed');
 }
});

That new line 4 keeps the click event from bubbling up to the page, where the browser will misinterpret what it means.

Walter

On Jan 5, 2014, at 1:37 PM, Roman Zvarych wrote:

WOW! Walter, thank you, again! All this seems to be a bit complicated at first glance, but I think that I get the basic concept. I will, certainly, try all of this and will follow your detailed instructions carefully. We’ll see what happens.

Again, thanks a lot!!!

Roman


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

OK! Your Actions are just amazing! The on-line assistance that you offer is awesome. Thank you, again!


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

Walter! It worked!!! Have a look at the new page:

http://www.ksystems.com.ua/tarifi.html

Many thanks!

Roman

PS: Just out of curiosity: is there a way to slow down the “accordion” effect?


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

You’re welcome! And thanks for your generous pledge to ActionsForge Next!

As far as slowing down the effect, you would need to change how the effect works. Instead of just removing the element from view with display: none, you would have to do something that set the height of the box to 0, and then toggled back to the full height. Those sorts of changes can be animated, but display: none cannot.

Go through your disclosure elements, and make sure that their height is set to Flexible, and their Overflow is set to Hidden. Click on each one in turn, and look in the Layout tab of the Inspector, near the top for both those controls.

Also remove the .collapsed style from each one by clicking on it, then Command-clicking on the style name in the list in the Styles palette.

Finally, in the Protaculous 2 Action, check the “Use Scriptaculous libraries” checkbox (the default Effects will also be checked, which is what you need). Edit the script to read like this:

var moving = false;
$('outer').on('click', 'table a', function(evt, elm){
  var desc = elm.up('table').next('div');
  if(desc){
    evt.stop();
    if(!!moving) return;
    moving = true;
    if(desc.getHeight() == 0){
      desc.morph('max-height:900px', {
        duration: 0.4,
        afterFinish: function(){
          moving = false;
        }
      });
    }else{
      desc.morph('max-height: 0', {
        duration: 0.4,
        afterFinish: function(){
          moving = false;
        }
      });
    }
  }
});
$('outer').select('div > div').invoke('setStyle', 'max-height: 0');

There’s a simpler way to do this with CSS animations, but it’s not widely supported in all currently-popular version of IE, so depending on your browser audience, you may not be able to use this.

A note about timing the effect – in this particular combination of effects, the duration attribute (set to 4/10 second) governs part of it, but the 900px max-height/ actual height of the thing ratio also governs the timing. You can fiddle with these values independently (don’t actually set the max-height to less than the desired height of the box, or the contents will just be cut off) and experiment with how long the effect takes to complete.

Walter

On Jan 5, 2014, at 3:56 PM, Roman Zvarych wrote:

Walter! It worked!!! Have a look at the new page:

http://www.ksystems.com.ua/tarifi.html

Many thanks!

Roman

PS: Just out of curiosity: is there a way to slow down the “accordion” effect?


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

Thanks! I was, actually, beginning to fiddle around with CSS, but not really getting anywhere. This is, indeed, more elegant. I’ll let you know, when it’s all done (probably tomorrow).

By the way, do you know of anyone else in Ukraine using FW Pro to build websites. There aren’t many people here, who are Mac-efficient. All of them wonder how I managed to learn to do this so quickly, particularly since a few months ago I had no idea what HTML even meant…

And regarding the pledge – just let me know when and where. It will be my pleasure!

Roman

Roman


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

Here’s a version of the code that “memorizes” the height of the element before it sets it to 0, so the animation is precisely to the height of the item, and back to zero.

$('outer').select('div > div').each(function(elm){
  elm['original_height'] = elm.getHeight();
  elm.setStyle('max-height: 0');
}).
var moving = false;
$('outer').on('click', 'table a', function(evt, elm){
  var desc = elm.up('table').next('div');
  if(desc){
    evt.stop();
    if(!!moving) return;
    moving = true;
    if(desc.getHeight() == 0){
      desc.morph('max-height:' + desc.original_height + 'px', {
        duration: 0.4,
        afterFinish: function(){
          moving = false;
        }
      });
    }else{
      desc.morph('max-height: 0', {
        duration: 0.4,
        afterFinish: function(){
          moving = false;
        }
      });
    }
  }
});

Walter

On Jan 5, 2014, at 4:43 PM, Walter Lee Davis wrote:

A note about timing the effect – in this particular combination of effects, the duration attribute (set to 4/10 second) governs part of it, but the 900px max-height/ actual height of the thing ratio also governs the timing. You can fiddle with these values independently (don’t actually set the max-height to less than the desired height of the box, or the contents will just be cut off) and experiment with how long the effect takes to complete.


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

Hello again, Walter! Your assistance proved to be invaluable. Here is the page of the site that I’m working on with the “accordion” effect applied as per your instructions: http://www.ksystems.com.ua/tarifi.html. As you can see, it works very nicely, except for one little thing that I cannot seem to figure out on my own (although I’ve tried everything). The header (which triggers the effect) in each separate “box” stays the same colour when it is “hovered” over. Any suggestions on how I can get this to work like the other links on the same page (those outside of the “collapsing” main box, i.e., so that the colour of the text changes to another colour, when the mouse hovers over it)?


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

Sure. These are not links, so they won’t react to any settings you have created for links in your page. To make the hover effect (in all browsers except IE < 9, which I recommend you ignore anyway just on general principles) you simply create the following style:

h3:hover
color: whatever

Put the h3:hover part in the Tag field, erase whatever is in the Name field, then tab back out of the Name field so the lack of name “sticks”.

You can use the normal color control in Freeway’s Edit Styles dialog to create the color you want. Obviously, use whichever H tag you actually are using, unless it’s actually an h3.

Walter

On Jan 11, 2014, at 9:16 AM, Roman Zvarych wrote:

Hello again, Walter! Your assistance proved to be invaluable. Here is the page of the site that I’m working on with the “accordion” effect applied as per your instructions: http://www.ksystems.com.ua/tarifi.html. As you can see, it works very nicely, except for one little thing that I cannot seem to figure out on my own (although I’ve tried everything). The header (which triggers the effect) in each separate “box” stays the same colour when it is “hovered” over. Any suggestions on how I can get this to work like the other links on the same page (those outside of the “collapsing” main box, i.e., so that the colour of the text changes to another colour, when the mouse hovers over it)?


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

Thanks, Walter! I, probably should have thought of that myself.


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

Hello, again, Walter! I tried to follow your instructions very carefully (re: creating a hover color), I’ve also tried a myriad of variations - and I can’t get it to work. Basically I did the following:

  1. created a new style, typing <h3: hover color> in the Tag field.
  2. Erased what was in the Name Field and tabbed out, so that the field was left empty.
  3. In the Character section of the Edit Styles dialogue box, I chose the color that I wanted the text to change to, when hovered, or “moused over”. And OK’d the new Style.
  4. I then applied the style (“h3:hover color”) to the text – and – nothing…
    I feel somewhat embarassed, since I am sure that the problem is something very silly, that I am overlooking. But I can’t figure out what it may be. What am I doing wrong?

Roman


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

I then applied the style (“h3:hover color”) to the text

This style should not be applied to anything.

This style will apply to anything with the h3 tag when hover(ed) over.

Can you post a link to the page where these styles are applied?

D


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

Two things. First, no angle-brackets in the Tag field! Second, you don’t ever apply this style to anything. Because it is a Tag-only style, Freeway will publish it always, whether you apply it or not, and because it is a :hover pseudo-class style, the browser will apply that to your h3 tags whenever you hover over one.

Walter

On Jan 12, 2014, at 12:19 PM, Roman Zvarych wrote:

Hello, again, Walter! I tried to follow your instructions very carefully (re: creating a hover color), I’ve also tried a myriad of variations - and I can’t get it to work. Basically I did the following:

  1. created a new style, typing <h3: hover color> in the Tag field.
  2. Erased what was in the Name Field and tabbed out, so that the field was left empty.
  3. In the Character section of the Edit Styles dialogue box, I chose the color that I wanted the text to change to, when hovered, or “moused over”. And OK’d the new Style.
  4. I then applied the style (“h3:hover color”) to the text – and – nothing…
    I feel somewhat embarassed, since I am sure that the problem is something very silly, that I am overlooking. But I can’t figure out what it may be. What am I doing wrong?

Roman


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

OK, I think I get it. I didn’t put the angle brackets in the tags field. I wrote it that way for this thread, instead of quote marks. What I understand from you is that after creating the “h3:hover” general style, I need to create a color, with h3 selected in the tag field. I’ll try that…

Roman


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

Are you trying to alter the base color of the h3, before it gets hovered? Here’s some instructions that might better serve you when making a header that has a rollover effect.

First, “scope” the style to the box containing the accordion content. Click once on the box, and note what the Name/ID field reads. This will become the ID that you use in your style selector. (Example to follow uses item42 as the ID.)

Next, in the New Style dialog, create a Tag-only Style with the tag set to #item42 h3. In this style, set the normal base color, font and font style (and any other style you may want, including padding (space-before and space-after in Freeway’s non-standard lingo) or borders or background colors, or anything else you may wish to have in your accordion header.

Finally, decide which attributes you wish to alter when the header is rolled over. Maybe you change the color only, or the color and background color, or make the text bold – anything you like. Make a new style for this, with the tag set to #item42 h3:hover. In that style, change only the things you need to change. This can be a much simpler style, because you are only overriding the things that you set in the previous style that you want to have change during the rollover.

Walter

PS: My code-style examples above are done using the ` back-tick character as a quote mark. This tells Markdown to set a tag around the enclosed text.

On Jan 12, 2014, at 12:50 PM, Roman Zvarych wrote:

OK, I think I get it. I didn’t put the angle brackets in the tags field. I wrote it that way for this thread, instead of quote marks. What I understand from you is that after creating the “h3:hover” general style, I need to create a color, with h3 selected in the tag field. I’ll try that…

Roman


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

Thanks, Walter! I’ll try all of that very carefully…

Roman


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

Forgot to mention something critically important. When you follow these instructions: do not apply any style at all to your H3 tags in your accordion. Select each header in turn, and look in the Text Style tab in the Inspector – the little (T) tab – and click on the (x) icon that appears when you hover over each style attribute you see there. Your design view won’t look the way you intend, but your Preview and browsers will show your desired design. By doing this, you avoid all the heartache that comes from CSS styling clashes.

Walter

On Jan 12, 2014, at 1:06 PM, Walter Lee Davis wrote:

Are you trying to alter the base color of the h3, before it gets hovered? Here’s some instructions that might better serve you when making a header that has a rollover effect.

First, “scope” the style to the box containing the accordion content. Click once on the box, and note what the Name/ID field reads. This will become the ID that you use in your style selector. (Example to follow uses item42 as the ID.)

Next, in the New Style dialog, create a Tag-only Style with the tag set to #item42 h3. In this style, set the normal base color, font and font style (and any other style you may want, including padding (space-before and space-after in Freeway’s non-standard lingo) or borders or background colors, or anything else you may wish to have in your accordion header.

Finally, decide which attributes you wish to alter when the header is rolled over. Maybe you change the color only, or the color and background color, or make the text bold – anything you like. Make a new style for this, with the tag set to #item42 h3:hover. In that style, change only the things you need to change. This can be a much simpler style, because you are only overriding the things that you set in the previous style that you want to have change during the rollover.

Walter

PS: My code-style examples above are done using the ` back-tick character as a quote mark. This tells Markdown to set a tag around the enclosed text.

On Jan 12, 2014, at 12:50 PM, Roman Zvarych wrote:

OK, I think I get it. I didn’t put the angle brackets in the tags field. I wrote it that way for this thread, instead of quote marks. What I understand from you is that after creating the “h3:hover” general style, I need to create a color, with h3 selected in the tag field. I’ll try that…

Roman


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

Hi Dave!
Sorry that I didn’t notice your post earlier. Still fiddling around, according to Walter’s instructions.
Here’s a link to the page: http://www.ksystems.com.ua/tarifi.html

Roman


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