Read more read less buttons

[woodman]

Does Xara ver 18 have a device for a "read more, read less" button for long text on a web page? I'm having trouble getting a script to do multiple ones on a single page.

[Chris M]

Right hand column (Page & Layer Gallery) expand and click MouseOff
Click New Layer (Page & Layer Gallery Tab) - name the layer anything you like but add (lock) at the end

Select MouseOff layer
Create your main text area and fill to the point you want to stop - add READ MORE, or whatever, at the end
Highlight READ MORE > Utilities > Web Properties > Link (tab) - use the drop down menu next to Pop-Up Layer (radio button) and choose the name of your layer

Create the text area you want to appear - add READ LESS, or whatever, at the end
Highlight READ LESS > Utilities > Web Properties > Link (tab) - type popup:close into the Link To Web Or Email Address
Highlight READ LESS > Utilities > Web Animation > Reveal/Scroll - choose the animation you'd like to use from the drop down box
Select (not highlight) the text area, right click and cut
Select your layer in Page & Layer Gallery and paste your text area - click the eye icon to hide the layer
Test to see if all works in preview

Notes: If you don't want/need animation you can create the hidden text directly on the layer you created eliminating the cut and paste.

>>>Woodman.web<<<

[Boy]

Thanks for sharing, Chris!

[Acorn]

Does Xara ver 18 have a device for a "read more, read less" button for long text on a web page? I'm having trouble getting a script to do multiple ones on a single page.

The simplest Xara way is to place the more text into a separate layer and use a More link to open the layer.

Acorn

[Chris M]

I made a mistake with the animation section.
I said to highlight READ LESS and apply the reveal animation. It should be select the Text Area and apply the reveal animation.

[Chris M]

After Acorn pointed out this bug >>>This has been Bugging me (talkgraphics.com)<<< I've revisited with a simpler version 2.0

Right hand column (Page & Layer Gallery) expand and click MouseOff
Click New Layer (Page & Layer Gallery Tab) - name the layer anything you want but add (lock) at the end
Ensure your named layer is selected in Page & Layer Gallery
Create the text area you want to appear - add READ LESS, or whatever, at the end
Highlight READ LESS > Utilities > Web Properties > Link (tab) - type popup:close into theLink To Web Or Email Address

Create your main text area and fill to the point you want to stop - add READ MORE, or whatever, at the end
Highlight READ MORE > Utilities > Web Properties > Link (tab) - use the drop down menu next to Pop-Up Layer (radio button) and choose the name of your layer
Click the Settings button and choose an animation if required. Leave Close Pop-Up Automatically ticked


Originally I used a paragraph background, which breaks the pop-up animation. In this version I replaced the background with a white rectangle.

>>>Woodman v2.web<<<

[Acorn]

After Acorn pointed out this bug >>>This has been Bugging me (talkgraphics.com)<<< I've revisited with a simpler version 2.0

Right hand column (Page & Layer Gallery) expand and click MouseOff
Click New Layer (Page & Layer Gallery Tab) - name the layer anything you want but add (lock) at the end
Ensure your named layer is selected in Page & Layer Gallery
Create the text area you want to appear - add READ LESS, or whatever, at the end
Highlight READ LESS > Utilities > Web Properties > Link (tab) - type popup:close into theLink To Web Or Email Address

Create your main text area and fill to the point you want to stop - add READ MORE, or whatever, at the end
Highlight READ MORE > Utilities > Web Properties > Link (tab) - use the drop down menu next to Pop-Up Layer (radio button) and choose the name of your layer
Click the Settings button and choose an animation if required. Leave Close Pop-Up Automatically ticked

Originally I used a paragraph background, which breaks the pop-up animation. In this version I replaced the background with a white rectangle.

>>>Woodman v2.web<<<

As ever, in Xara, there are a number of solutions to hiding a detail on a lower layer.

The simplest is to place a box the text area behind and Soft-group. You have to remember to adjust both on edits. Setting Push on the Soft-group helps to avoid overlaps with other object on the layer.

Text Inside is another possible approach. One that works with Rectangles. By that I can change it to an ellipse (rounded corners) and still no create an image.
Text Inside works well with any reasonable convex shape and with Repelling is probably my go-to option but is is also fun to work with negative space too.
Just don't apply Paragraph Background to an odd-shaped Text Inside grouping. You get more than you bargained for.

@Xara - It is about time you admit that Smart Shapes have destroyed WYSIWYG, across features and across versions.

Acorn

[yellowbird]

These posts are great! Been wanting to ask. Thanks!

[GorsoSurthis]

Thanks for posting!