Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 14
  1. #1
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    150

    Default 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.

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    38,048

    Default 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?
    Attached Files Attached Files
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,374

    Info Re: Stick to the right margin

    Here is an extract from the Manual:

    Manual - 17dot0_444.pdf

    Acorn
    Acorn - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

  4. #4
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    150

    Default 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.

  5. #5
    Join Date
    Apr 2018
    Location
    London
    Posts
    245

    Default 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.

    Click image for larger version. 

Name:	Scale-to-fit-width overlay.jpg 
Views:	4 
Size:	67.4 KB 
ID:	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
    Attached Files Attached Files

  6. #6
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    150

    Default 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.

  7. #7
    Join Date
    Apr 2018
    Location
    London
    Posts
    245

    Default Re: Stick to the right margin

    Re Scale-to-fit-Width
    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

  8. #8
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    150

    Default 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

  9. #9
    Join Date
    Apr 2018
    Location
    London
    Posts
    245

    Default Re: Stick to the right margin

    Hi Greg,

    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.

    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.

  10. #10
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    150

    Default 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.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •