Help! Sticky element doesen't work for me...

[dnlbrv]

Hello all,

Its imposible for me to place a functionally stick element.

Link:
https://www.secretsfilms.com/site/en/alexis_taule_home-copy

Any idea??

Thanxs in advance!

[arminunruh]

hello did you read this?

the text where you make sth sticky

also on your page i cant scroll. to have an element be sticky, you need a scrollable page

and the elment will only be sticky inside it's row

[dnlbrv]

Hello
you can click on "Cosmetic" and scroll

[dnlbrv]

This post is deleted!

[dnlbrv]

I'm actually looking for a way to have "Cosmetic" displayed when you first load the page.

[arminunruh]

you are using the expand row functionality?
then simply right click the collapsed cosmetic row and click "expand row"

your text you want to have sticky is just a text inside a row.
sticky elements are only sticky within their own row as you can read in the text of the sticky module

i think you want the row to be sticky where you have your text inside.

Please right-click that row where do you have this text inside:

Then choose set HTML class and id.
For HTML class, enter:

sticky-row

now, Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

.sticky-row{
position: sticky!important;
top: 0px!important;
z-index: 90!important;
}

[dnlbrv]

ah! okey is in the row! Thanxs a lot!

[dnlbrv]

The expand row issue is more complicated for me. My client wants to display an "element grid" with different images depending on the category. I'm trying to replicate the functionality of the categories with the "expand row." With CSS, I disabled the closing of the row when it's already open. Now I'm looking for a way to have the first "cosmetics" category open when the page loads.

With CSS, I disabled the open row:
.expand-link-clicked {
cursor: not-allowed;
pointer-events: none;
}

I'm looking for a way to have "cosmetics" open:

#grid.id-801 .row-3 {
data-collapsed="false" !important;
}

But it doesn't work. I think I'll have to try using JS:
Any ideas?

[dnlbrv]

If I leave the row expanded as you said, the button state is not ".expand-link-clicked" and when I click it the row closes and the functionality logic of a category menu does not work.

[arminunruh]

So what you'd need to do is, you click the point using javascript.

i can't open the site anymore:
https://www.secretsfilms.com/site/en/alexis_taule_home-copy/

but basically what you do is

<script>
window.laytheme.on('newpageshown', function(){
jQuery('a[data-expand="39"]').click()
})
</script>

Enter this css in "lay options" -> "custom css & html" -> "custom head content"

obviously you can't use 'a[data-expand="39"]'

instead, you need to find out the correct data-expand id by using inspect element

[dnlbrv]

Hey,
if I put the script:

<script>
window.laytheme.on("newpageshown", function() {
jQuery('a[data-expand="13"]').click()
});
</script>

page don't load. Only the menu is visible and the error in console says:
[Error] TypeError: undefined is not an object (evaluating 'Gs.find')
(anonymous function) (frontend.app.min.js:1:238436)
dispatch (jquery.min.js:2:40041)
trigger (jquery.min.js:2:70130)
(anonymous function) (jquery.min.js:2:70734)
each (jquery.min.js:2:3134)
(anonymous function) (alexis_taule_home-copy:2773)
emit (events_channels.min.js:1:1741)
(anonymous function) (frontend.app.min.js:1:302722)

Any idea? Thanks in advance

[dnlbrv]

I tray activate the button but dont work:

<script>
window.laytheme.on("newpageshown", function() {
jQuery('body.type-project.id-801 .btn_accion').trigger('click');
});
</script>

[arminunruh]

<script>
window.laytheme.on('newpageshown', function(){
if(jQuery('a[data-expand="13"]').length > 0){
jQuery('a[data-expand="13"]').click();
}
})
</script>

the website seems to be online again.
the above should be the correct code. i included a check, and i inserted the correct id

i think this code is wrong:
<script>
window.laytheme.on("newpageshown", function() {
jQuery('body.type-project.id-801 .btn_accion').trigger('click');
});
</script>

can you use my code above and show a screenshot where you added it

[dnlbrv]

After put your code, console says:
[Error] TypeError: undefined is not an object (evaluating 'Gs.find')
(anonymous function) (frontend.app.min.js:1:238436)
dispatch (jquery.min.js:2:40041)
trigger (jquery.min.js:2:70130)
(anonymous function) (jquery.min.js:2:70734)
each (jquery.min.js:2:3134)
(anonymous function) (alexis_taule_home-copy:2797)
emit (events_channels.min.js:1:1741)
(anonymous function) (frontend.app.min.js:1:302722)

In the screenshot you see where I added the code.

[arminunruh]

can you update lay theme now and try if it works now?
i think now you shouldnt get the error anymore.

seems like there was an issue with the compatibility of lay theme's code and the code i gave you

[dnlbrv]

I send the email
Thanxs a lot

[arminunruh]

<script>
    window.laytheme.on('newpageshown', function(){
        if(jQuery('a[data-expand="13"]').length > 0){
            setTimeout(function(){
                console.log("hello!")
                jQuery('a[data-expand="13"]').click();
            }, 1000)
        }
    })
</script>

seems that with the new update and this timeout it works

[dnlbrv]

Yeah, now works perfect.

thanxs again! Lay theme are the f****g best!