Sticky Layer solution needed

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
entger
Posts: 17
Joined: Wed Jul 17, 2013 3:06 pm

Sticky Layer solution needed

Post by entger » Sat Feb 13, 2016 10:33 am

Dear community,

I would like to know whether it is possible to create a layer which always sticks to the top of the page but not to a certain side (left or right). A transparent header containing a shape is not an option. I think the Sticky Layer would just work perfectly if there was an option like "Top" in combination with an absolute horizontal position.
Here is an example of what I would like to do: http://www.sncf.com/ (sticky menu panel and scrollable website content).

Thanks a lot in advance!

Best regards,
entger

User avatar
Pablo
Site Admin
Posts: 2792
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Sticky Layer solution needed

Post by Pablo » Sat Feb 13, 2016 11:03 am

You can use custom code to fix the left position like this:

Code: Select all

<style>
#Layer1
{
   left: 30% !important;
}
</style>

entger
Posts: 17
Joined: Wed Jul 17, 2013 3:06 pm

Re: Sticky Layer solution needed

Post by entger » Sat Feb 13, 2016 2:54 pm

Thank you.

Unfortunately, it seems like I am doing it the wrong way.
What I tried:
1. Add custom code to "custom style" section of the Layer:
objhtml.jpg
2. Set the layer properties to:
Mode: Sticky Layer, Keep Original Position: True, Orientation: Top-Left


It looks like the custom code has no effect on the "stickylayer" JS code so that it still sticks to the left side of the page.
It would be great if you could inform me about the correct use of the code. Otherwise I will change the page layout. ;-)

Best regards,
entger

User avatar
Pablo
Site Admin
Posts: 2792
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Sticky Layer solution needed

Post by Pablo » Sat Feb 13, 2016 10:43 pm

The code I gave you, is just an example. I was trying to give you something to start with. It needs to be modified by you to make it work for your situation.
It needs to be added in Page HTML->Between heads tags.

mexman
Posts: 508
Joined: Mon Feb 11, 2013 11:33 am
Location: Puebla/Mexico

Re: Sticky Layer solution needed

Post by mexman » Sat Feb 13, 2016 11:32 pm

entger wrote: I would like to do: http://www.sncf.com/ (sticky menu panel and scrollable website content).
Hi ENtger,

why dont you do it the other way around?
Build your page static with the "fixed" part on top, and put the scrollable content into an inline frame!

Regards
Michael

entger
Posts: 17
Joined: Wed Jul 17, 2013 3:06 pm

Re: Sticky Layer solution needed

Post by entger » Sun Feb 14, 2016 12:05 pm

Dear Pablo, dear mexman,

Thank you for your support!

@Pablo: Okay, now I have found out which setting is needed (these are the settings of the Layer element):
layersetting.png
When changing this in the source code of the page with Firefox, everything works fine.
Nevertheless, it is not very comfortable to modify every page after having published it.
This is why I would like to suggest integrating a possibility to set it directly in Q'nEWB.

With the Dock Top setting (Mode: Docking Layer) it is already possible to set the position to fixed.
Unfortunately, this setting goes hand in hand with a relative horizontal sizing of the layer – this cannot be changed in Q'nEWB.
It would be great if there was a Docking Layer which docks to the top but does not cover the whole page horizontally. Is it possible to add such a layer to Q'nEWB?

Your code inspired me to try this setting:

Code: Select all

<style>
      #Layer2 { 
        position: fixed !important;  
      }
    </style>
By adding this code to the head area of the page, a layer in Default mode sticks to its position but also to the left side of the page (due to the setting "left: 0").
When I remove the "left: 0px" setting manually (see picture), the layer moves to its absolute horizontal position set in Q'nEWB – this is actually what I need.
It seems like it is impossible to "delete" this "left: 0px" setting with custom code in the head area of the page (like the position with the help of an "!important;" command) – what a pity!

@mexman: I have already thought about doing that but I think that frames are an outdated approach, aren't they? To be more concrete, I am concerned about visitors landing on inline frames and scrollbars appearing in some browsers. Instead of using frames I rather change the page layout. ;-)

Best regards,
entger

Postscript:
I decided to change the page layout in order to avoid further issues. My "problem" is a very special one and I think it is not realistic to expect such capabilities from a WYSIWYG editor like Q'nEWB – this would be a bit too much. Do not get me wrong: Q'nEWB's flexibility and freedom are unique and perfect for my needs! I was just a bit overambitious. ;-) Nevertheless, it would be nice if you keep my proposal concerning the Docking Layer setting in mind – with regard to future versions.

Best regards,
entger

MOHAMMADI
Posts: 2
Joined: Sun Jan 14, 2018 12:17 am

Re: Sticky Layer solution needed

Post by MOHAMMADI » Wed Jan 17, 2018 2:46 am

Hello All,

I also need some help with sticky menu bar, HTML code to make a sticky menu bar after the page header, I would like the menu bar to be in a position after header and while scrolling the page the menu bar should stop at the top,

here is an example of what I would like to have if possible with Quick'n https://codepen.io/renduh/pen/oBBGbK

thank you,

User avatar
Pablo
Site Admin
Posts: 2792
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Sticky Layer solution needed

Post by Pablo » Wed Jan 17, 2018 6:54 am


michling
Posts: 42
Joined: Tue May 14, 2013 5:16 pm

Re: Sticky Layer solution needed

Post by michling » Mon Jan 29, 2018 9:51 pm

Is there a way to set a Sticky Offset X or Y to a negative number? Such as -100...

I also notice that a Title is coming from a Sticky Layer, but there does not seem to be a Title in the property inspector??
Here is a sample of the html:
<div id="mystickylayer1" style="position:fixed;text-align:left;" title="This title in here">
</div>

User avatar
Pablo
Site Admin
Posts: 2792
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Sticky Layer solution needed

Post by Pablo » Tue Jan 30, 2018 7:14 am

Is there a way to set a Sticky Offset X or Y to a negative number? Such as -100...
I'm sorry this is not possible.
I also notice that a Title is coming from a Sticky Layer, but there does not seem to be a Title in the property inspector??
I will add this in the next update.

michling
Posts: 42
Joined: Tue May 14, 2013 5:16 pm

Re: Sticky Layer solution needed

Post by michling » Tue Jan 30, 2018 4:12 pm

Pablo,

Thanks for adding the Title in the property inspector for Layers in the next update.
---------
As to the subject of the negative number in the Sticky Offset X, here is a template called New York with has a number of social media images on a Sticky Layer in which the Layer has a Sticky Offset X of -130.
This allows the layer to be partly off page, and then when hoving, allows see it completly.

You can see the template here on my server:
https://www.mespn.com/newYorkTEM/qwb5_newyork.html#

This is some of the CSS created by Qwb 5.2.4 for that Layer:
(Notice the -130px)

{
position: fixed;
text-align: left;
left: auto;
right: -130px;
top: 200px;
width: 175px;
height: 424px;
z-index: 62;
}

Just wondering how that was put in?
Here is a screen grab image:
Image
Is this a future feature?

Also while discussing this, what object are the Social media images on this template, I do not recongnize it in the objects list?

Thank you as always for the quick response...
Sorry for the long post...

User avatar
Pablo
Site Admin
Posts: 2792
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Sticky Layer solution needed

Post by Pablo » Tue Jan 30, 2018 7:21 pm

The template was imported from WYSIWYG Web Builder which does support this functionality.
I will see if this can be added to QWB as well.

michling
Posts: 42
Joined: Tue May 14, 2013 5:16 pm

Re: Sticky Layer solution needed

Post by michling » Wed Jan 31, 2018 1:35 am

Pablo,

I did find a workaround:
If I change the Position Children to floating instead of absolute, and make the width of the layer smaller to where I want to start to move it off page, while setting Sticky Offset X to 0, it works.

Take a look at the two bottom social media images in this changed template:
https://www.mespn.com/newYorkTEM/qwb5_newyork.html
Image

Thanks for the positive response though...

MOHAMMADI
Posts: 2
Joined: Sun Jan 14, 2018 12:17 am

Re: Sticky Layer solution needed

Post by MOHAMMADI » Fri Feb 09, 2018 4:27 am

Dear Pablo,

Thank you for your reply to my question about sticky Layer, on Jan 17

the problem I have is with one of the option

if "Keep Original Position" is set to "True" the layer is jumping while scrolling the page

but if the option is set of "False" the layer is not jumping while scrolling the page, but the layer is positioned on top of the page.

is there a solution for this?

thank you,

User avatar
Pablo
Site Admin
Posts: 2792
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Sticky Layer solution needed

Post by Pablo » Fri Feb 09, 2018 7:03 am

If "Keep Original Position" is set to "True" the layer is jumping while scrolling the page
This is because the position is controlled by JavaScript.
So depending on how much other code you have on the page and the speed of the browser it may take some time to recalculate the position.

Post Reply

Who is online

Users browsing this forum: No registered users and 16 guests