FreewayTalk

15 replies to this thread. Most Recent

Marcus Do Carmo

21 May 2019, 5:38 pm

ScriptyAccordion question

Hi everyone, I hope all is well.

I have a couple of questions: Working with a website that has a long text I chose the action ScriptyAccordion with a trigger event on click on “More” to open the rest of the text.

Is there a way to customize it in a way that once the text is fully opened the word “More” changes to “Less” and we can click to close it?

Please let me know, Many thanks in advance,

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

waltd

21 May 2019, 5:43 pm

There’s no way to do that in the Action itself, but you could write a custom script that would do exactly that. There’s also the Read More Action, which features this sort of effect, but it doesn’t do what the accordion does visually. Rather, it launches a modal with the “more” copy inside it. Let me know if you’d like the “bones” of how to build a custom script. It’s surprisingly simple to do if you use the Protaculous 2 Action to lay in the foundation for you.

Walter

On May 21, 2019, at 1:38 PM, Marcus Do Carmo <[email protected]> wrote:

Hi everyone, I hope all is well.

I have a couple of questions: Working with a website that has a long text I chose the action ScriptyAccordion with a trigger event on click on “More” to open the rest of the text.

Is there a way to customize it in a way that once the text is fully opened the word “More” changes to “Less” and we can click to close it?

Please let me know, Many thanks in advance,

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

21 May 2019, 5:49 pm

Hey Walter, Thanks!

Sure! I would love to try to build that custom script. I could also take a look at the Read More action, but the custom script is nice

Best, Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

waltd

21 May 2019, 6:47 pm

Here’s a code example:

And here’s how to put it into Freeway:

  1. In an existing HTML box, add your “preamble text”. Type the word ‘more’ at the end of the line, highlight that text, press Command-K, and do the following in the Hyperlink dialog:
    • Set the URL (in the External tab) to # (just the octothorpe)
    • Press the Extended button, press New, and in the name column, enter ‘class’, and in the value column, enter ‘more’
  2. After the link, press Return, then from the main menu, choose Insert / HTML Item. Drag the resulting inline box out to be the full width of its parent (temporarily, we’ll adjust this item to be flexible later).
  3. While the inline box is still highlighted (corner handles showing), choose Item / Extended from the main menu, and again, add the class ‘more’, in the <div>, not the <div style> tab, just as you did for the link.
  4. Double-click inside the inline HTML box, and enter the remainder (the “more”) of the text.
  5. Click elsewhere, then back on the inline HTML box, and look in the Inspector. In the Measurements segment of the HTML Item Inspector, set the Width to “Available” and the Height to “Flexible”. The box will “shrink-wrap” to the content you entered into it. When it is hidden, it will not occupy any space. When it is shown, it will push all of its neighbors away from itself, so any text you enter below the inline HTML box (outside of that box) will flex away from the inline box.
  6. Apply the Protaculous 2 Action to the page. Click the ‘DOM Loaded Observer’ button, and in the dialog that appears, copy and paste the content of the <script> tag in the Gist above (important: don’t include the <script> and </script> tags when you do).

Let me know how this goes for you.

Walter

On May 21, 2019, at 1:49 PM, Marcus Do Carmo <[email protected]> wrote:

Hey Walter, Thanks!

Sure! I would love to try to build that custom script. I could also take a look at the Read More action, but the custom script is nice

Best, Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

21 May 2019, 7:08 pm

Thanks, Walter.

I will be working on this and let you know, though this is very juicy “bone”. I’m not sure have the proper teeth (brain) to chew on it, but I”l try. :)

Best, Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

21 May 2019, 7:08 pm
  • a very

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

21 May 2019, 8:40 pm

Hi Walter, I started on this, followed all the steps correctly but stoped just before finishing applying the Protaculous 2 action, since I have some questions that might sound really foolish:

  1. Even though I saw the word “less” in the code, I didn’t understand if I had to enter this word after finishing the last sentence of the whole text inside the same html box or not, as I did when I entered the word “more”. Please let me know.

  2. On the other hand, I applied the Protaculous 2 action to the page, and opened the DOM “Loaded Observer” button, but stoped before copy/paste the text from the Gist above, because at that point I had two more questions: 2.1 Should I include the “lorem ipsum generator” text of the Gist, or it’s just a sample and I have to substitute it with the actual text I have? 2.2 (important: don’t include the <script> and </script> tags when you do). I understand I have to copy all content between the <script> and </script> but not the tags itselves. I found the closing </script> but didn’t find the initial <script>

I know, these questions might sound foolish

Please let me know Many thanks, Walter

Marcus

On May 21, 2019, at 2:47 PM, Walter Lee Davis <[email protected]> wrote:

Here’s a code example:

And here’s how to put it into Freeway:

  1. In an existing HTML box, add your “preamble text”. Type the word ‘more’ at the end of the line, highlight that text, press Command-K, and do the following in the Hyperlink dialog:
    • Set the URL (in the External tab) to # (just the octothorpe)
    • Press the Extended button, press New, and in the name column, enter ‘class’, and in the value column, enter ‘more’
  2. After the link, press Return, then from the main menu, choose Insert / HTML Item. Drag the resulting inline box out to be the full width of its parent (temporarily, we’ll adjust this item to be flexible later).
  3. While the inline box is still highlighted (corner handles showing), choose Item / Extended from the main menu, and again, add the class ‘more’, in the <div>, not the <div style> tab, just as you did for the link.
  4. Double-click inside the inline HTML box, and enter the remainder (the “more”) of the text.
  5. Click elsewhere, then back on the inline HTML box, and look in the Inspector. In the Measurements segment of the HTML Item Inspector, set the Width to “Available” and the Height to “Flexible”. The box will “shrink-wrap” to the content you entered into it. When it is hidden, it will not occupy any space. When it is shown, it will push all of its neighbors away from itself, so any text you enter below the inline HTML box (outside of that box) will flex away from the inline box.
  6. Apply the Protaculous 2 Action to the page. Click the ‘DOM Loaded Observer’ button, and in the dialog that appears, copy and paste the content of the <script> tag in the Gist above (important: don’t include the <script> and </script> tags when you do).

Let me know how this goes for you.

Walter

On May 21, 2019, at 1:49 PM, Marcus Do Carmo <[email protected]> wrote:

Hey Walter, Thanks!

Sure! I would love to try to build that custom script. I could also take a look at the Read More action, but the custom script is nice

Best, Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

waltd

21 May 2019, 8:55 pm

On May 21, 2019, at 4:39 PM, [email protected] wrote:

Hi Walter, I started on this, followed all the steps correctly but stoped just before finishing applying the Protaculous 2 action, since I have some questions that might sound really foolish:

  1. Even though I saw the word “less” in the code, I didn’t understand if I had to enter this word after finishing the last sentence of the whole text inside the same html box or not, as I did when I entered the word “more”. Please let me know.

The word ‘less’ will be added into the page by the script. You don’t need to put it there when you make the HTML elements. You just need the word more, linked to # with the class name ‘more’ applied to it. Line 58 of the Gist does the switcheroo.

  1. On the other hand, I applied the Protaculous 2 action to the page, and opened the DOM “Loaded Observer” button, but stoped before copy/paste the text from the Gist above, because at that point I had two more questions: 2.1 Should I include the “lorem ipsum generator” text of the Gist, or it’s just a sample and I have to substitute it with the actual text I have?

Put whatever “more” text you want inside the inline HTML box. It doesn’t matter how much you put there — everything will expand and contract to fit (assuming that your outermost element also has its height set to “Flexible”).

2.2 (important: don’t include the <script> and </script> tags when you do). I understand I have to copy all content between the <script> and </script> but not the tags itselves. I found the closing </script> but didn’t find the initial <script>

The opening script tag is on line 53 of the Gist. So to be completely specific, you want to copy lines 54 through 59, inclusive.

I know, these questions might sound foolish

Nope. Everyone has their first time doing something like this. If it works, I will be happy to step through it line by line and explain it. I figured I’d get you drunk on the power of Prototype and JavaScript first, then explain how it works.

Walter

Please let me know Many thanks, Walter

Marcus

On May 21, 2019, at 2:47 PM, Walter Lee Davis <[email protected]> wrote:

Here’s a code example:

And here’s how to put it into Freeway:

  1. In an existing HTML box, add your “preamble text”. Type the word ‘more’ at the end of the line, highlight that text, press Command-K, and do the following in the Hyperlink dialog:
    • Set the URL (in the External tab) to # (just the octothorpe)
    • Press the Extended button, press New, and in the name column, enter ‘class’, and in the value column, enter ‘more’
  2. After the link, press Return, then from the main menu, choose Insert / HTML Item. Drag the resulting inline box out to be the full width of its parent (temporarily, we’ll adjust this item to be flexible later).
  3. While the inline box is still highlighted (corner handles showing), choose Item / Extended from the main menu, and again, add the class ‘more’, in the <div>, not the <div style> tab, just as you did for the link.
  4. Double-click inside the inline HTML box, and enter the remainder (the “more”) of the text.
  5. Click elsewhere, then back on the inline HTML box, and look in the Inspector. In the Measurements segment of the HTML Item Inspector, set the Width to “Available” and the Height to “Flexible”. The box will “shrink-wrap” to the content you entered into it. When it is hidden, it will not occupy any space. When it is shown, it will push all of its neighbors away from itself, so any text you enter below the inline HTML box (outside of that box) will flex away from the inline box.
  6. Apply the Protaculous 2 Action to the page. Click the ‘DOM Loaded Observer’ button, and in the dialog that appears, copy and paste the content of the <script> tag in the Gist above (important: don’t include the <script> and </script> tags when you do).

Let me know how this goes for you.

Walter

On May 21, 2019, at 1:49 PM, Marcus Do Carmo <[email protected]> wrote:

Hey Walter, Thanks!

Sure! I would love to try to build that custom script. I could also take a look at the Read More action, but the custom script is nice

Best, Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

21 May 2019, 9:11 pm

Thanks a lot, Walter!

I will let you know later

Best,

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

21 May 2019, 9:31 pm

It worked!!

Yes, at first I got drunk with the full Phototype and javascript code :| and thought I had to copy and paste everything on the Protaculous action.

After your specific explanation I understood that I had to copy just the lines 54 through 59, inclusive and….voila!!

Thank you so much, Walter I will definitely save that information.

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

21 May 2019, 9:42 pm

One more question: How do I stylize the links “more and “less” changing font and or color?

thanks,

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

waltd

22 May 2019, 12:49 am

The easiest way would be to use the Edit Styles dialog to create a new style called a.more. Anything you set up in that style will apply to any a (anchor) tag that has the class name ‘more’. But I just tried this in Freeway 7, and it used to be that a style that was defined only in the Tag field would publish to the page whether you applied it to an element or not, but this doesn’t seem to work with this style, likely because it has a tag associated with it. I found that I could not apply it to the text, either. It just doesn’t want to publish. I’ll file a bug.

So because we’ve done all this work using the Extended dialog, which lives outside of the universe of Freeway’s styling engine, we’re going to have to continue working around Freeway here. Try this:

Page/Extended, switch to the Before </head> section using the picker at the bottom of the dialog, and then paste in this:

<style type="text/css">
a.more {
  color: #61ae3e;
  font-family: 'Verdana', sans-serif;
</style>

You won’t see any difference in the page when you view it in Freeway, but when you preview in a browser, you should see the color and font. Fiddle around with the various styles and experiment. If you want to create a style visually, draw some text, style it in Freeway, and then note what name Freeway assigned to the temporary style (style42 or whatever). Preview in a browser, then use the Safari Web Inspector to see what that style looks like as code. You can copy and paste out of the browser’s Developer interface and into the Page / HTML Markup dialog where you’ve created the extra style.

Walter

On May 21, 2019, at 5:42 PM, Marcus Do Carmo <[email protected]> wrote:

One more question: How do I stylize the links “more and “less” changing font and or color?

thanks,

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

22 May 2019, 12:57 am

Aha. No sooner did I write this than I remembered another way to force Freeway to make a style appear even if it hasn’t been used visually on the page. You can ignore all this business about using the Extended dialog. Just do this:

  • Open the Edit Style dialog, and create the style you want your links to look like.

  • Then click into the Tag field, type a space or two, then a.more after the spaces.

  • Click or tab from the Tag field into the Name field, and delete whatever test you find there.

  • Tab once more, so Freeway doesn’t helpfully insert ‘style23’ or whatever in there.

Now you can preview in a browser or publish, and the links will have whatever styling you have defined.

Walter

On May 21, 2019, at 8:49 PM, Walter Lee Davis <[email protected]> wrote:

The easiest way would be to use the Edit Styles dialog to create a new style called a.more. Anything you set up in that style will apply to any a (anchor) tag that has the class name ‘more’. But I just tried this in Freeway 7, and it used to be that a style that was defined only in the Tag field would publish to the page whether you applied it to an element or not, but this doesn’t seem to work with this style, likely because it has a tag associated with it. I found that I could not apply it to the text, either. It just doesn’t want to publish. I’ll file a bug.

So because we’ve done all this work using the Extended dialog, which lives outside of the universe of Freeway’s styling engine, we’re going to have to continue working around Freeway here. Try this:

Page/Extended, switch to the Before </head> section using the picker at the bottom of the dialog, and then paste in this:

<style type="text/css">
a.more {
 color: #61ae3e;
 font-family: 'Verdana', sans-serif;
</style>

You won’t see any difference in the page when you view it in Freeway, but when you preview in a browser, you should see the color and font. Fiddle around with the various styles and experiment. If you want to create a style visually, draw some text, style it in Freeway, and then note what name Freeway assigned to the temporary style (style42 or whatever). Preview in a browser, then use the Safari Web Inspector to see what that style looks like as code. You can copy and paste out of the browser’s Developer interface and into the Page / HTML Markup dialog where you’ve created the extra style.

Walter

On May 21, 2019, at 5:42 PM, Marcus Do Carmo <[email protected]> wrote:

One more question: How do I stylize the links “more and “less” changing font and or color?

thanks,

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

22 May 2019, 1:14 am

Here’s a bit more explanation about what is going on inside that script:

Walter

On May 21, 2019, at 8:57 PM, Walter Lee Davis <[email protected]> wrote:

Aha. No sooner did I write this than I remembered another way to force Freeway to make a style appear even if it hasn’t been used visually on the page. You can ignore all this business about using the Extended dialog. Just do this:

  • Open the Edit Style dialog, and create the style you want your links to look like.

  • Then click into the Tag field, type a space or two, then a.more after the spaces.

  • Click or tab from the Tag field into the Name field, and delete whatever test you find there.

  • Tab once more, so Freeway doesn’t helpfully insert ‘style23’ or whatever in there.

Now you can preview in a browser or publish, and the links will have whatever styling you have defined.

Walter

On May 21, 2019, at 8:49 PM, Walter Lee Davis <[email protected]> wrote:

The easiest way would be to use the Edit Styles dialog to create a new style called a.more. Anything you set up in that style will apply to any a (anchor) tag that has the class name ‘more’. But I just tried this in Freeway 7, and it used to be that a style that was defined only in the Tag field would publish to the page whether you applied it to an element or not, but this doesn’t seem to work with this style, likely because it has a tag associated with it. I found that I could not apply it to the text, either. It just doesn’t want to publish. I’ll file a bug.

So because we’ve done all this work using the Extended dialog, which lives outside of the universe of Freeway’s styling engine, we’re going to have to continue working around Freeway here. Try this:

Page/Extended, switch to the Before </head> section using the picker at the bottom of the dialog, and then paste in this:

<style type="text/css">
a.more {
color: #61ae3e;
font-family: 'Verdana', sans-serif;
</style>

You won’t see any difference in the page when you view it in Freeway, but when you preview in a browser, you should see the color and font. Fiddle around with the various styles and experiment. If you want to create a style visually, draw some text, style it in Freeway, and then note what name Freeway assigned to the temporary style (style42 or whatever). Preview in a browser, then use the Safari Web Inspector to see what that style looks like as code. You can copy and paste out of the browser’s Developer interface and into the Page / HTML Markup dialog where you’ve created the extra style.

Walter

On May 21, 2019, at 5:42 PM, Marcus Do Carmo <[email protected]> wrote:

One more question: How do I stylize the links “more and “less” changing font and or color?

thanks,

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

22 May 2019, 4:02 am

wow, more good stuff to study and work!! I’ll be working on this tomorrow and let you know.

Thank you, Walter!

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Back to Top

Marcus Do Carmo

22 May 2019, 7:21 pm

Hi Walter, thank you so much!

The “aha” option, to create create the style was the easiest thing I did .

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com