Welcome to TalkGraphics.com
Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18
  1. #11
    Join Date
    Apr 2018
    Location
    London
    Posts
    653

    Default Re: Popup layer to appear behind a sticky Nav bar

    Acorn,

    Thanks, my mistake, should have removed all Siran code from the first example: https://initiostar.co.uk/demo/CSS-Reveal/

    Gary

  2. #12
    Join Date
    May 2021
    Posts
    4

    Default Re: Popup layer to appear behind a sticky Nav bar

    Hi Gary,

    Thank you very much for the help. I had a look at your method and everything seems to be working but the top main logo. I had a look at the example you sent and if you drag the logo down to make it larger it falls behind the bar cutting off the logo.

    I have attached the link below. Please could you advise me on how to get the main logo to appear in front of that white bar. I hope this makes sense after you have a look at the demo.

    https://swanplastics.co.za/demo/products

    Many thanks.

  3. #13
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Default Re: Popup layer to appear behind a sticky Nav bar

    Quote Originally Posted by Kirst View Post
    Hi Gary,
    Thank you very much for the help. I had a look at your method and everything seems to be working but the top main logo. I had a look at the example you sent and if you drag the logo down to make it larger it falls behind the bar cutting off the logo.
    I have attached the link below. Please could you advise me on how to get the main logo to appear in front of that white bar. I hope this makes sense after you have a look at the demo.
    https://swanplastics.co.za/demo/products
    Many thanks.
    Kirst, it is unfair on any TGer to expect them to delve into CODE that your XDA has produced and try and guess how your created your design.
    If you do want help, please provide a design example in XAR/WEB format because that it what someone else have to do for you otherwise.

    Do also note 3 other TGers have contributed already.
    It is courtesy to thank them too and describe why you have not followed these other suggestions.

    The point of Forum engagement should be to find a solution that others can benefit from so your feedback and ideas are really quite important.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #14
    Join Date
    Apr 2018
    Location
    London
    Posts
    653

    Default Re: Popup layer to appear behind a sticky Nav bar

    OK relatively easy to include the demo XAR:CSS Reveal Same Layer.xar || https://initiostar.co.uk/demo/CSS-Reveal/. This should help with your construction. Check the heights of the logos and bars - make sure everything is in the correct layer order too.

    Gary
    Last edited by Initiostar; 20 July 2021 at 01:37 PM.

  5. #15
    Join Date
    May 2021
    Posts
    4

    Default Re: Popup layer to appear behind a sticky Nav bar

    Hi Acorn,

    I am fairly new to this platform and still trying to work my way around it. It was not my intention to discredit anyone's efforts on purpose. Thanks to everyone that has contributed.

    Noted for next time.

    Thanks.

  6. #16
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Info Re: Popup layer to appear behind a sticky Nav bar

    To summarise Initiostar's approach:

    • Anything non-sticky that moves will appear under a Stick at Top (SaT) shape.
    • Anything Sticky appears above all other shapes.
    • Sticky and SaT shapes still follow a Layer order - highest is on top.
    • Initial shapes showing at the top of the page simply scroll off.
    • Shapes that that are SaT are in place or move to the top
    • The bottom-most SaT shape is a blocker that hides all moving shapes go under it, out of sight.
    • A MouseOver shape is always shown as the top-most shape (even over a SaT).

    The solution is not to have a MouseOver reveal but to code such that the reveal all occurs on the MouseOff Layer.

    @Initiostar, you have a spurious dot following the <script> Tag that is stopping the animation effect.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #17
    Join Date
    Apr 2018
    Location
    London
    Posts
    653

    Default Re: Popup layer to appear behind a sticky Nav bar

    Thank you Acorn,

    I have removed the "." in the script and thank you for the excellent explanation. All I've done is to demonstrate Siran's code/ approach for the OP with an example in post#4 and to the same using your reveal idea in my current example.

    Both great ideas.

    Gary

  8. #18
    Join Date
    May 2021
    Posts
    4

    Default Re: Popup layer to appear behind a sticky Nav bar

    Hi everyone,

    Thank you very much for the help. I have managed to get it working. I used Gary's concept but not the code. I did try the code, I couldn't get it right but got the just of what the code is meant to do.

    I added the code as shown below:

    <style>
    .product-image:hover { opacity:0;}
    </style>

    I then named each image htmlclass="product-image" and added the hover images behind the images I named.
    This allowed for the main image to fade to no opacity to reveal the image behind it (hover image).

    Thank again for all the help.

 

 

Tags for this Thread

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
  •