ScriptyAccordion question

Marcus_Do_Carmo · May 21, 2019, 5:38pm

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:

waltd · May 21, 2019, 5:43pm

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@hidden 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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Marcus_Do_Carmo · May 21, 2019, 5:49pm

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:

waltd · May 21, 2019, 6:47pm

Here’s a code example:

gist.github.com

https://gist.github.com/walterdavis/679966e203cc793b3de0bb6a65ed27f3

read-more.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Read more...</title>
  <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
  <style>
    body, html {
      width: 100%;
      height: 100%;

This file has been truncated. show original

And here’s how to put it into Freeway:

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’
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).
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
, not the
tab, just as you did for the link.
Double-click inside the inline HTML box, and enter the remainder (the “more”) of the text.
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.
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 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@hidden 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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Marcus_Do_Carmo · May 21, 2019, 7:08pm

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Marcus_Do_Carmo · May 21, 2019, 7:08pm

a very

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Marcus_Do_Carmo · May 21, 2019, 8:39pm

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:

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.
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 tags when you do). I understand I have to copy all content between the but not the tags itselves. I found the closing but didn’t find the initial 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@hidden 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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

waltd · May 21, 2019, 8:55pm

On May 21, 2019, at 4:39 PM, email@hidden 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:

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.

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 tags when you do). I understand I have to copy all content between the but not the tags itselves. I found the closing but didn’t find the initial 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@hidden 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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Marcus_Do_Carmo · May 21, 2019, 9:11pm

Thanks a lot, Walter!

I will let you know later

Best,

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Marcus_Do_Carmo · May 21, 2019, 9:31pm

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Marcus_Do_Carmo · May 21, 2019, 9:42pm

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

thanks,

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at:

waltd · May 22, 2019, 12:49am

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 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@hidden wrote:

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

thanks,

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

waltd · May 22, 2019, 12:57am

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@hidden 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 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@hidden wrote:

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

thanks,

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

waltd · May 22, 2019, 1:13am

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

gist.github.com

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

show-more.js

// find all the divs with the class name 'more', and hide them
$$('div.more').invoke('hide');
// "listen" for clicks on any link with the class name 'more', and respond...
$(document).on('click', 'a.more', function(evt, elm){
// first, stop any normal reaction, like scrolling back to the top of the browser window
  evt.stop();
  // starting from the link that was clicked, look up to its containing element...
  // then select the following div with the class name 'more', and if it's hidden, show it, or vice-versa
  elm.up().next('div.more').toggle();
  // toggle the text inside the link that was clicked

This file has been truncated. show original

Walter

On May 21, 2019, at 8:57 PM, Walter Lee Davis email@hidden 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@hidden 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 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@hidden wrote:

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

thanks,

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Marcus_Do_Carmo · May 22, 2019, 4:02am

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

Thank you, Walter!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Marcus_Do_Carmo · May 22, 2019, 7:21pm

Hi Walter, thank you so much!

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

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at: