BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Sticky element
  FAQ FAQ  Forum Search   Register Register  Login Login

Sticky element

 Post Reply Post Reply Page  12>
Author
Message
b-rent$ View Drop Down
Groupie
Groupie
Avatar

Joined: Jun 02 2015
Location: Austin
Status: Offline
Points: 60
Post Options Post Options   Thanks (0) Thanks(0)   Quote b-rent$ Quote  Post ReplyReply Direct Link To This Post Topic: Sticky element
    Posted: Mar 16 2020 at 8:02pm
I was hoping to make two link elements that are stuck to the bottom of the page while scrolling.  Kind of like the opposite of a menu bar at the top.  I have tried duplicating the menu bar, but couldn't figure how to get it to stick to the bottom.  I have tried adding a sticky element, but it just appeared after the footer.  Sorry I am not better at this.  Certainly feel like I am wasting peoples time a little, but I coudn't find anything in other discussions that helped.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 18 2020 at 12:19am
Hello, 

There is a way to use a group of elements and to force it to stay on top of everything and to stick at the bottom of the screen, is it what you are asking for?


Back to Top
b-rent$ View Drop Down
Groupie
Groupie
Avatar

Joined: Jun 02 2015
Location: Austin
Status: Offline
Points: 60
Post Options Post Options   Thanks (0) Thanks(0)   Quote b-rent$ Quote  Post ReplyReply Direct Link To This Post Posted: Mar 19 2020 at 2:18am
Yes

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 19 2020 at 9:50am
Do you understand that if your page is longer than the screen used to view it, your content will be overlapped by this group of elements?

Edited by Hobby001 - Mar 19 2020 at 1:23pm
Back to Top
b-rent$ View Drop Down
Groupie
Groupie
Avatar

Joined: Jun 02 2015
Location: Austin
Status: Offline
Points: 60
Post Options Post Options   Thanks (0) Thanks(0)   Quote b-rent$ Quote  Post ReplyReply Direct Link To This Post Posted: Mar 23 2020 at 1:41am
yes, I want it to be on top of everything like the menu bar at the top of the page, but at the bottom of the page instead.  I want it to stay right there at the bottom as you scroll through every page.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 26 2020 at 12:29pm
Sorry for the delay, COVID-19 required my attention elsewhere

Ok, here is the trick:

Make sure that your page footer is configured for Position absolute


Add a group of elements in your page footer with all the required content

Create a new Endbody Javascript Source Code block in your page 

Add the following code in it

$(document).ready(function(){$('#WE93090a546c').css({'top':$(window).height()-$('#WE93090a546c').height(), 'position':'fixed'});});
$(window).resize(function(){$('#WE93090a546c').css({'top':$(window).height()-$('#WE93090a546c').height(), 'position':'fixed'});});

Last thing, replace WE93090a546c with your own group of elements ID




Edited by Hobby001 - Mar 26 2020 at 12:31pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 26 2020 at 12:33pm
P.S.  

To make sure that your group of elements sticks to the left side of your screen

$(document).ready(function(){$('#WE93090a546c').css({'left':0,'top':$(window).height()-$('#WE93090a546c').height(), 'position':'fixed'});});
$(window).resize(function(){$('#WE93090a546c').css({'left':0,'top':$(window).height()-$('#WE93090a546c').height(), 'position':'fixed'});});


Back to Top
Prometheus View Drop Down
Newbie
Newbie


Joined: Apr 14 2020
Status: Offline
Points: 1
Post Options Post Options   Thanks (0) Thanks(0)   Quote Prometheus Quote  Post ReplyReply Direct Link To This Post Posted: Apr 14 2020 at 12:05pm
I have a similar issue to the original poster (b-rent$), and was hoping you could perhaps clarify for me where I went wrong with my use of the "Sticky Float Panel" element.

I've place a Sticky Float Panel in the footer section of my pages, and set it's properties as follows:
  • Horizontal Position : Center
  • Vertical Position   : Bottom
  • Y In Motion         : 0
  • Y Initial           : 0
  • Width               : 100%
  • Height              : 40px
If the Sticky Float Panel is placed directly onto the Home Page, or some other page on my sight, it works as advertised and remains in place above all text, even when the page is scrolled. Smile

Notice that I say that I've placed a "Sticky Float Panel" on each page in my site, instead of using the Base layer. If I place a "Sticky Float Panel" onto the Base layer that is linked to my pages, then it stays at the bottom as it should, only now any elements placed onto pages will be visually above the "Sticky Float Panel". Cry

My question is this:
How to I place a "Sticky Float Panel" onto the Base layer, and have it remain above any elements placed onto pages that make use of the Base layer? This way I do not have to copy-paste the "Sticky Float Panel" from the Home Page onto any created pages.

View the desired result on my newly created, work in-progress, website:

EDIT:
I tried the method you described above a "Group Of Elements" on my Base layer, and it worked as it should, except any scrolling text is always above the Group, where it should be below.

How do I set the Z-Axis of the "Group of Elements" or "Sticky Float Panel"?


Edited by Prometheus - Apr 14 2020 at 12:25pm
Do you hear, huh? The Alpha and the Omega? Death and Rebirth? And as you die, so shall I be reborn...
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 14 2020 at 1:01pm
Try this one:

$(document).ready(function(){$('#WE93090a546c').css({'left':0,'top':$(window).height()-$('#WE93090a546c').height(), 'position':'fixed'',z-index':'9999999'});});
$(window).resize(function(){$('#WE93090a546c').css({'left':0,'top':$(window).height()-$('#WE93090a546c').height(), 'position':'fixed', 'z-index':'9999999'});});


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 14 2020 at 1:06pm
I think I missread your question.

You are using an element, so select it, under style, customize, Expert you will find Free Code field

Add 

z-index:9999999;

Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.