Print Page | Close Window

Sticky element

Printed From: openElement Website
Category:

openElement


Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1635
Printed Date: Mar 29 2024 at 12:17pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: Sticky element
Posted By: b-rent$
Subject: Sticky element
Date 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.




Replies:
Posted By: Hobby001
Date 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?




-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: b-rent$
Date Posted: Mar 19 2020 at 2:18am
Yes



Posted By: Hobby001
Date 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?

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: b-rent$
Date 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.


Posted By: Hobby001
Date 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

https://zupimages.net/viewer.php?id=20/13/092o.png" rel="nofollow">

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




-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Hobby001
Date 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'});});




-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Prometheus
Date 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:
http://diablo.dzomlija.com/firebird.htm" rel="nofollow - http://diablo.dzomlija.com/firebird.htm

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"?


-------------
Do you hear, huh? The Alpha and the Omega? Death and Rebirth? And as you die, so shall I be reborn...


Posted By: Hobby001
Date 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'});});




-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Hobby001
Date 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;



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: b-rent$
Date Posted: Jul 06 2020 at 9:38pm
Adding the Z index code to my element didn't seem to work for me.  The template I am using had an extra menu layer, so I placed the element on that layer and that seemed to work for me.  Not sure if this is the best way, but has done the trick for me

www.workhorsebar.com

I basically wanted an ORDER ONLINE link that appeared on the side of the screen as you scrolled through the entire website.  It works for desktop and mobile as far as I can tell, so I am pleased.  Just thought I would post this just in case it helped.


Posted By: Hobby001
Date Posted: Jul 06 2020 at 11:15pm
This site takes for ever to load,  you should stard decreasing picture size. 10 of them are near to or way over 1Mb  


Take a look at this subject   https://forum.openelement.com/en/forum_posts.asp?TID=1700&PID=7991&title=sensode-picture-cover-images-recommended-size#7991" rel="nofollow - https://forum.openelement.com/en/forum_posts.asp?TID=1700&PID=7991&title=sensode-picture-cover-images-recommended-size#7991



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: b-rent$
Date Posted: Jul 08 2020 at 6:20pm
Thanks for the feed back.  I spend so much time creating the content that I forget to make image size a priority.  It always seems to load quickly on my computer because I have loaded it so many times that my computer has stored info to make it load faster.  It is hard for me to know how bad the experience for a different user, so thanks again.


Posted By: Hobby001
Date Posted: Jul 08 2020 at 7:31pm
Open Chrome, clear the cashe Ctrl F5

press F12 

Click on Network tab

Open your site, you will be able to feel it


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: digizar
Date Posted: Jul 08 2020 at 10:07pm
You probably might think about to divide your huge single page
into several sub-pages.
That speeds up the initial loading process (index.htm).
You could also optimize the images.
Optimization is not recommended though if you need high quality images.

Project * Maintenance * Optimize all website images



-------------
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net