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 Reverse Sort Order
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Topic: Sticky element
    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



Edited by digizar - Jul 08 2020 at 10:11pm
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
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: 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


Edited by Hobby001 - Jul 08 2020 at 8:20pm
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: 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.
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: 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  



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: 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.
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
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
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: 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
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
 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.047 seconds.