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.
1 Attachment(s)
Re: Stick to the right margin
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?
1 Attachment(s)
Re: Stick to the right margin
Here is an extract from the Manual:
Attachment 127050
Acorn
Re: Stick to the right margin
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.
2 Attachment(s)
Re: Stick to the right margin
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
Re: Stick to the right margin
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: Stick to the right margin
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
Re: Stick to the right margin
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
Re: Stick to the right margin
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.
Re: Stick to the right margin
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.