Stick to the right margin

Hello and happy Thursday. I have a dilemma that perhaps someone can shed light on.

I want to place an area (for some items) to the right side of the image at the top of my web page. The area should always be pushed up against the right margin, to accommodate any desktop browser width.

If the element is placed at the right edge of the page board, it shows up with a gap to the right when the browser is wider. If it is further to the right, partially off the page board, it is truncated when the browser is narrower. Logically, using the sticky property should resolve the problem, right?

In fact, using sticky works and gives the desired effect if the element is placed off the page board entirely on the right side. It hugs the right margin as the browser is resized. However, the element remains vertically stationary during scrolling. In other words, it also sticks to the top margin.

What I want is for the element to move up along with the image as the user scrolls down below the fold.

I looked at auto-fit to page, but the option has no effect on how the page behaves on export… only on how items react to page resizing within the design project.

I also tried assigning a CSS class using right:0% and both position: absolute and relative, but apparently because of Xara’s structure, the instructions are completely overridden. In other words, they have no effect.

Am I overlooking something? Is there a way to do this?

As always, any advice is appreciated.

I just tried this using an object off the page on the right (it only needs be off the page, it will automatically vertically center and align to the right side of the browser.

The sticky item will retain it's position even when the page is scrolled.

In addition, you can add a rectangle and make it the same color as the background and group it with the sticky object to bring the sticky object away from the right side of the browser.

What browser are you using?

Here is an extract from the Manual:

Attachment 127050

Acorn

Thanks both @Acorn and @gwpriester.

In fact, I had consulted the manual, and the results are exactly what gw produced.

The problem is that the brown sticky objects also stick on scrolling. My objective is to have the object sticking to the right margin, but NOT sticking with respect to scrolling.

The website HERE has the effect I’m after.

Thanks, again.

The effect when you look at it closely has a static fill-browser photo background and an overlay set on the right. The overlay and the text move as one. As you scroll further down it also triggers a slide menu from the right.

Attachment 127052

I just used scale-to-width at 3840 px to keep the overlay on the right. You would have to play around with the scaling, but it works at 4K on my desktop. For the background, I just placed a video in the Page HTML Head which scales well too.

Gary

Wow, @Gary! That’s fantastic. It took me a few minutes, but I finally understood what you did. I had not thought of using Scale to fit width, but it really does the trick.

Unfortunately, though one of the reasons I renewed my subscription last September was to have that new feature, I later determined that it is incompatible with other Xara features that I was already using. (I confirmed this directly with Magix at the time I discovered the issue). So, it’s not an option for me. Still, it is a very ingenious solution to the problem! Thanks.

Re Scale-to-fit-Width

Quote:

---

I later determined that it is incompatible with other Xara features that I was already using.

---

It would be good to understand what you found incompatible. There might be a workaround.

Gary

Hi Gary,

The thing I discovered back in September was that a full-width slide show using the Xara widget gets truncated at the margins of the page board if you use Scale to fit width.

Something I found out later concerns parallax scrolling. Although it is not native to the Xara program, you can add CSS code to produce a stationary image somewhere down the page. It appears as you scroll down and is hidden again as you continue down. For some reason, if you use this with Scale to fit width, some browsers produce strange behavior… parallax movement downward or the image appears very magnified.

So far those are the two that caused me problems, but I imagine there might be more.

Greg

Hi Greg,

Quote:

---

I discovered back in September was that a full-width slideshow using the Xara widget gets truncated at the margins of the page board if you use Scale to fit width.

---

I am big fan of 'Scale-to-fit-Width' but not of Xara widgets. Acorn started an excellent thread on sliders and it's well worth the read: https://www.talkgraphics.com/showthr...ltimate+slider

Here is an example that works with Scale-to-fit-Width that was just one outcome from those discussions: https://initiostar.co.uk/demo/zeberd..._xr_page_index. I use also the WOW slider and that works fine with Scale-to-fit-Width.

Quote:

---

you can add CSS code to produce a stationary image somewhere down the page. It appears as you scroll down and is hidden again as you continue down. For some reason, if you use this with Scale to fit width, some browsers produce strange behavior… parallax movement downward or the image appears very magnified.

---

Difficult to replicate the issue, but the standard Xara animations for Reveal and Scroll all appear to work with Scale-to-fit-Width when I have used them.

I haven't worked out a native way in Xara to combine a triggered reveal for an object, have it parallax scroll and trigger it to become hidden at a given xy position. Interesting effect though and I can see why it might be useful.

Hi Gary,

The thread where the parallax issue was discussed and the problem with Scale to fit width came to light is HERE.

If you open up the page in different browsers, you'll see the strange behavior.

If you then remove the Scale to fit width property, the parallax effect works in all browsers.

Quote:

---

Originally Posted by gcellison

Hi Gary,

The thread where the parallax issue was discussed and the problem with Scale to fit width came to light is HERE.

If you open up the page in different browsers, you'll see the strange behavior.

If you then remove the Scale to fit width property, the parallax effect works in all browsers.

---

Hi Greg,

I remember the thread now and looking at what at the TGer was trying to achieve. I read back through the thread and I guess I am missing something here. I created a new demo, three scrolling objects at different rates, one of which was a photo set to full width, and exported with Scale-to-fit-Width (the photo needs of course to be a higher resolution). https://initiostar.co.uk/demo/parallax/. On my 4k screen it scaled OK and the parallax scroll seemed to work? Does the example work in your browser?

Gary

Hi Gary,

The parallax works for me in Chrome, Firefox, and Edge. It has a very slow crawl up the page.

The previous thread concerned the type of image that is below the fold and which appears as the user scrolls down, but the image is completely stationary. It disappears under the continued scrolling. I don't think this is possible in Xara natively. I had found the way this works using the code:
<style>
.parallax {
background-attachment: fixed !important;
background-position: top center !important;
background-size: cover !important;
}
</style>
and it works very well in all the browsers. But once you activate Scale to fit width, it starts to behave oddly.

At the time Egg posted, he was using that feature, and the unusual behavior could be seen. Since then, he apparently removed it for what we now see on his demo. The "stationary" parallax works great.

Hi Greg,

Quote:

---

The parallax works for me in Chrome, Firefox, and Edge. It has a very slow crawl up the page

---

I could have made any objects parallax scroll faster, but the good news is that Xara out-of-the-box works fine with Scale-to-fit-Width, unless you want to do something a bit more clever that requires code.

Attachment 127075

If you want a moment's entertainment set up an object that reveals on a named trigger, then apply a parallax scroll to the same object, where you will see the name of your trigger greyed out; kind of counter-intuitive but an interesting effect when the object is sandwiched between two overlays.

Over on out in this now!

Gary

Hi Gary,

Quote:

---

Originally Posted by Initiostar

I could have made any objects parallax scroll faster, but the good news is that Xara out-of-the-box works fine with Scale-to-fit-Width, unless you want to do something a bit more clever that requires code.Gary

---

Right. Since you had asked if the parallax worked for me, I was just wanted to give details on how it appeared. In fact, the ultimate objective would be to have an image that doesn't scroll at all, but that is located below the fold.

Quote:

---

If you want a moment's entertainment set up an object that reveals on a named trigger, then apply a parallax scroll to the same object, where you will see the name of your trigger greyed out; kind of counter-intuitive but an interesting effect when the object is sandwiched between two overlays.

---

That sounds like a cool possibility. I will definitely give it a try.

Greg