How can I add coded design elements to a webpage

[Kelticmaid]

I'm just starting out on Xara Designer Pro X and I've been looking at some of the widgets. I found a site that has the interactive text panels I want to use as part of my website. I've got a placeholder shape placed for where I want to implement the panel. How would I go about adding it to the page, if its both HTML, css and some js

This is the example with the code to implement it.. https://codemyui.com/split-screen-te...ore-on-scroll/

[gwpriester]

Sounds like a question for Acorn.

[Acorn]

I'm just starting out on Xara Designer Pro X and I've been looking at some of the widgets. I found a site that has the interactive text panels I want to use as part of my website. I've got a placeholder shape placed for where I want to implement the panel. How would I go about adding it to the page, if its both HTML, css and some js

This is the example with the code to implement it.. https://codemyui.com/split-screen-te...ore-on-scroll/

Might I suggest you do not want to do that.

It is possible but you start to get into difficulties:

• The HTML text is disconnected form Xara's styling and formatting so you have to learn all about that and keeping is linked to any Xara changes.
• The prose itself needs to be added into the Placeholder and editing HTML there is a right pain - you could introduce a separate text editor into your workflow. You now have a second disconnect.
• The JavaScript requires the jQuery library; all for a very simple function.
• The CSS is only tuned to this presentation. It would probably collapse if used across any Xara Variant as it is using Viewport units.

I don't think the code and implementation is that robust.

My alternative is pure Xara but using a Placeholder simply as an IFRAME container: Xara - Scroll Screen Text.xar

• I have a very long page with a lot of text (or anything) on the righthand side.
• I have three coloured bars with Names so they can be used as Triggers. In production you would make them Transparent or hide them on the page.
• I have four images that can be any size or even Stretchy that are all onto top of each other and are Sticky.
  
  • Note, when Sticky, the images are on top of everything else so try not to overlap. I am avoiding any code at the moment.
  • Each image has a Link to the next Anchored coloured trigger.

As you scroll up or down when a trigger appears, it reveals the related image.
When you click an image you get an automatic scroll to the top or its linked trigger and so the image changes. You can click the images to therefore get a cycle forward of text and associated image.

On the main page, we have a simple Placeholder IFRAME that presents the splitscreen page in a smaller window.
You can drag the vertical scroll up and down and with focus in the IFRAME also use the Page Up/Down buttons.

Acorn

[Kelticmaid]

Thank you, Acorn

This will work as well. My main goal is to make the page as friendly as possible for tablets and desktops, even though I am using a mobile variant without sliders. I'm trying to stick with only 5 pages, including the "home" page, and yet have some detail regarding the individual presentations offered. My mother is my client and I'm doing this for free for her non-profit, I even paid for the software myself. I'm hoping with this option I can add a simplified version of the pictures she wants with the text. My next goal is figuring out accordion-style text panels for multiple contact information.. I'm going to age myself here, but I was graduating college, and Javascript was in its infancy as scrolling word banners on your Navigator browser. So I'm a bit rusty without the plug and play software, but I know this program is my better option for the versatility of web design and print (which is what I normally do)