Hidden Text

How can one accomplish this, my brain is to frazzled to figure it out by myself. I seem to want to recall several freeway talks that were replied to by the Freeway Gurus with great minds. But, darned if I can put it together so a simpleton like myself can figure it out.

In the example URL scroll down towards the middle of the page that has the headline “ABOUT.” You will see text to the right of the ABOUT graphic which ends with a, “Read more +” link. When one clicks on the link hidden text appears. It brings in the rest of the paragraph, while pushing the photos and text below it downwards .


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

Perhaps this script can help you out : Edit fiddle - JSFiddle - Code Playground

Could become a nice Freeway Action though …


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

I have written a Read More Action, but it uses a lightbox metaphor to show the extra text. You could create this exact effect using the Protaculous 2 Action and some additional HTML elements. What I would do is put the extra text in an inline HTML box, so you have this sort of thing:

Lorem ipsum dolor sit amet et cetera et cetera
Lorem ipsum dolor sit amet et cetera et cetera
Lorem ipsum dolor sit amet et cetera read more
+--------------------------------------------------+
|  Lorem ipsum dolor sit amet et cetera et cetera  |
|  Lorem ipsum dolor sit amet et cetera et cetera  |
|  Lorem ipsum dolor sit amet et cetera et cetera  |
|  Lorem ipsum dolor sit amet et cetera et cetera  |
+--------------------------------------------------+

Then you can put a link on the read more text, and in the Extended interface of the Hyperlink dialog, you can add a classname to the link: click New, then in the Name field enter class and in the Value field enter read-more.

Finally, in the Protaculous 2 Action, you would add the following to the DOM Loaded Observer dialog:

$$('.read-more').each(function(elm){
	var box = elm.up().next().hide();
	elm.observe('click', function(evt){
		evt.stop();
		box.show();
		elm.hide();
	});
});

And if I haven’t forgotten a comma somewhere, that should just work.

Walter

On Jun 30, 2013, at 2:14 PM, gunner holmes wrote:

How can one accomplish this, my brain is to frazzled to figure it out by myself. I seem to want to recall several freeway talks that were replied to by the Freeway Gurus with great minds. But, darned if I can put it together so a simpleton like myself can figure it out.

In the example URL scroll down towards the middle of the page that has the headline “ABOUT.” You will see text to the right of the ABOUT graphic which ends with a, “Read more +” link. When one clicks on the link hidden text appears. It brings in the rest of the paragraph, while pushing the photos and text below it downwards .

The Blacklist - NBC.com


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