Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default MouseOver Object overlaps fixed Object

    Hello,
    I tried various options to solve my issue, but was not successful.

    The set-up:
    I have a nav bar which is a fixed object. Further down on the side I have several objects (e.g.pictures) with an mouse-over animation (mouse over appears Text and backgroundcolor over the picture)
    Issue: When the mouse-over object is activated (= cursor is on the mouse-over object so that this level appears) then the mouse-over object is always on-top of the fixed nav-bar.
    Target: Like the mouse-off picture, also the mouse-over object should "walk" beneath the fixed nav-bar when scrolling down.

    Not so easy to explain I guess, this is why I did attach a picture, hoping it helps to understand.
    Szenario1 = Mouse-Off
    Szenarion2 = Mouse-Over

    Regards,
    HK

    Click image for larger version. 

Name:	Xara-FAQ-ich.png 
Views:	43 
Size:	19.0 KB 
ID:	130936

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: MouseOver Object overlaps fixed Object

    Quote Originally Posted by ich View Post
    Hello,
    I tried various options to solve my issue, but was not successful.

    The set-up:
    I have a nav bar which is a fixed object. Further down on the side I have several objects (e.g.pictures) with an mouse-over animation (mouse over appears Text and backgroundcolor over the picture)
    Issue: When the mouse-over object is activated (= cursor is on the mouse-over object so that this level appears) then the mouse-over object is always on-top of the fixed nav-bar.
    Target: Like the mouse-off picture, also the mouse-over object should "walk" beneath the fixed nav-bar when scrolling down.

    Not so easy to explain I guess, this is why I did attach a picture, hoping it helps to understand.
    Szenario1 = Mouse-Off
    Szenarion2 = Mouse-Over

    Regards,
    HK

    Click image for larger version. 

Name:	Xara-FAQ-ich.png 
Views:	43 
Size:	19.0 KB 
ID:	130936
    HK,

    Set you purple bar and any objects on it to be 'Sticky' and everything will 'walk' beneath it.

    Click image for larger version. 

Name:	Sticky.PNG 
Views:	33 
Size:	27.5 KB 
ID:	130937

    Gary

  3. #3
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: MouseOver Object overlaps fixed Object

    Quote Originally Posted by Initiostar View Post
    HK,

    Set you purple bar and any objects on it to be 'Sticky' and everything will 'walk' beneath it.

    Gary
    Hi Gary,
    thanks for taking care.

    The solution you propose works fine when one want to fix an object in place.
    But my target is to fix the object only (!) once it hits the screen top-edge, while scrolling.
    Typically for Nav-Bars.
    This is the reason why the "purple-bar" in my example above should be a "stick-at-top" object only.
    Ciao,
    HK
    Last edited by ich; 01 November 2021 at 02:15 PM.

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: MouseOver Object overlaps fixed Object

    HK, a Stick at Top object is not "fixed".
    Gary would have answered differently had he known this was what you were after.

    One way is to set all the Stick at Top elements for have a special Name, htmlclass="topmost" and add this simple CSS to the Website Head Code block:

    <style>
    .topmost {
    z-index: 100;
    }
    </style>

    Things to watch out for:
    • Even with a Soft-group, each object will keep moving until it hits the topmost position.
    • Text sent to the bottom of a Text Area will still bubble up to the top; use a newline and at least a space to act as a buffer.
    • A Sticky object always trumps a Stick at Top one.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: MouseOver Object overlaps fixed Object

    Quote Originally Posted by ich View Post
    Hi Gary,
    thanks for taking care.

    The solution you propose works fine when one want to fix an object in place.
    But my target is to fix the object only (!) once it hits the screen top-edge, while scrolling.
    Typically for Nav-Bars.
    This is the reason why the "purple-bar" in my example above should be a "stick-at-top" object only.
    Ciao,
    HK
    There are some different ways of doing this; one is to change the z-index specifically for ALL Stick-at-Top objects.

    Add this line to the website HTML Code (head): <style>.xr_stt{z-index: 40 !important;} </style>

    e.g.CSS -Stick-at-Top-NavBar.xar

    "40" is an arbitrary positive number high enough to ensure it is always on top.

    Not the only way of doing this, but it does work. Acorn will have a better way.

    Gary
    Last edited by Initiostar; 01 November 2021 at 03:18 PM. Reason: Cross Post

  6. #6
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: MouseOver Object overlaps fixed Object

    Hi Acron, Gary,

    sorry not having used the correct terminology which created confusion.
    Thank you for your solution proposals.
    I will definitely follow up and test the next days.

    Regards,
    HK

  7. #7
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: MouseOver Object overlaps fixed Object

    Welcome to TalkGraphhics ich

  8. #8
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: MouseOver Object overlaps fixed Object

    Quote Originally Posted by gwpriester View Post
    Welcome to TalkGraphhics ich
    THX

 

 

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
  •