Twice on this page, and other places in the site, I have “read more / read less” sections. The idea is to avoid taking people who want more content off to another page, but also to make pages look simpler and less full of content for those who don’t need the depth. My best kluge to do this has been to use Scripty Accordion to show a hidden div, then to use CSS on the shown item to hide it again, adding a pointer to the child of this DIV with the “read less” message inside it so users click on it and not elsewhere in the parent shown/hidden div.
I would love to achieve the following:
-The same smooth motion physics to showing and hiding the div
-The “read more” (or other “show” message) disappear when the div is showing and appear when it is not
-The “read less” (or other “hide” message like an “X”) be the actual item to click on to hide the div, rather than faking that as I do now.
Previous to inline construction, I would have used show/hide layer to achieve this, but that doesn’t seem to work in this situation.
(This seems like something that will be useful to a lot of people in many situations, so I hope SP is working on it.)
You will need the Protaculous2 Action to do anything similar.
Note how I used the Freeway styles palette to create a “marker” style to make this effect work. The .more style is used to indicate the elements that respond to a click to show/hide the element immediately following in the document flow. In order to show/hide more than one paragraph, I wrapped it in an inline
, set to flexible height and available width.
Note that I used the Paragraph style controls in the Edit Style dialog to set a completely meaningless attribute (leading 100% – the default) so that the style would not become a based inline style. If I had allowed that to happen, then the call in the JavaScript to next() would have not returned anything, because the to which the style applied would be alone inside its parent
tag, rather than referring to the
, which makes next() return the following
in the document flow.
Walter
On Dec 3, 2014, at 5:14 PM, Peter Laundy email@hidden wrote:
Twice on this page, and other places in the site, I have “read more / read less” sections. The idea is to avoid taking people who want more content off to another page, but also to make pages look simpler and less full of content for those who don’t need the depth. My best kluge to do this has been to use Scripty Accordion to show a hidden div, then to use CSS on the shown item to hide it again, adding a pointer to the child of this DIV with the “read less” message inside it so users click on it and not elsewhere in the parent shown/hidden div.
I would love to achieve the following:
-The same smooth motion physics to showing and hiding the div
-The “read more” (or other “show” message) disappear when the div is showing and appear when it is not
-The “read less” (or other “hide” message like an “X”) be the actual item to click on to hide the div, rather than faking that as I do now.
Previous to inline construction, I would have used show/hide layer to achieve this, but that doesn’t seem to work in this situation.
(This seems like something that will be useful to a lot of people in many situations, so I hope SP is working on it.)
You will need the Protaculous2 Action to do anything similar.
Arghhh! Sounds like I can’t avoid using this “above my head” action.
Are there any detailed general instructions as to how to fill out its dialog box? The explanation in ActionsForge assumes knowledge I don’t have.
If there is no such explanation to let me sort through this on my own, here are my questions in relation to using “expand-o”:
I copy the script starting with into the DOM Loaded Observer, right?
Do I paste the Scriptaculous effect code into the dialog box somewhere or just make sure “Scriptaculous” and “effect” are checked? And if I don’t paste it in to the action’s dialog box, do I insert it in Page Markup?
I see that expand-o includes Prototype script. Does the statement in the action’s dialogue box that “Prototype is added by default” mean I should not paste the script into the Protaculous 2 action? And if so, do I include it using Page Markup?
There is .js resources script to be used by IE9. Does this go in Page Markup or get entered into this action’s dialogue box?
Anything I left out that appears in expand-o that involves Protaculous 2?
Add the action to your page and then tick Add Scriptaculous and Add Effects - then copy the contents of the Dom Loaded Observer box from Walt’s page into yours.
Make the class .more and apply it to your Read More text.
Insert an inline div after the read More text and populate it with the content you want to reveal.
Very important. Don’t add the document.observe(‘dom:loaded’… part – the Action makes that for you. Just copy the lines inside the block.
<script type="text/javascript">
document.observe('dom:loaded', function(){
--------- cut here ---------
function stuff here
and here and here
--------- cut here ---------
});
</script>
Got it?
Walter
On Dec 4, 2014, at 7:51 PM, DeltaDave email@hidden wrote:
Add the action to your page and then tick Add Scriptaculous and Add Effects - then copy the contents of the Dom Loaded Observer box from Walt’s page into yours.
Clicking once causes only the HTML “read more” message created in SWP to be replaced by the “read more” message generated by the javascript. So you must click a second time to show the hidden div and change the message to “hide”. Then it toggles back and forth properly between the two javascript generated messages and the shown and hidden div.
Also, using the Protaculous 2 action rather than page markup does not allow me to tweak the “read more” or “hide” messages, without the action overwriting my edits to the code it generates.
Perhaps I did not correctly follow this instruction as I didn’t fully understand it:
Note that I used the Paragraph style controls in the Edit Style dialog to set a completely meaningless attribute (leading 100% — the default) so that the style would not become a based inline style. If I had allowed that to happen, then the call in the JavaScript to next() would have not returned anything, because the [MISSING WORD HERE?] to which the style applied would be alone inside its parent
tag, rather than referring to the
, which makes next() return the following
in the document flow.
The two ways I thought perhaps complied with this was to apply 100% leading to the unnamed p tag in the style menu, or to, as you had done, set the line-height to 1 in the .more style. So I did both.
The issue is that whatever you have in the ‘read more’ paragraph as default must be exactly matching what is going to be tested for in the JavaScript. My example worked because I made sure of that. You can change that default, but you must remember to change it in both places.
Walter
On Dec 5, 2014, at 6:55 PM, Peter Laundy email@hidden wrote:
Clicking once causes only the HTML “read more” message created in SWP to be replaced by the “read more” message generated by the javascript. So you must click a second time to show the hidden div and change the message to “hide”. Then it toggles back and forth properly between the two javascript generated messages and the shown and hidden div.
I’m not sure where you are editing the text – you would have to do it in the JavaScript that you paste into the Protaculous Action. And again, it would have to match the exact contents of the original HTML from Freeway.
Walter
On Dec 5, 2014, at 6:55 PM, Peter Laundy email@hidden wrote:
Also, using the Protaculous 2 action rather than page markup does not allow me to tweak the “read more” or “hide” messages, without the action overwriting my edits to the code it generates.
Thank you for your patience. It is all working now. Kicking myself for not reinspecting what I pasted into Protaculous 2 before firing off that question.