Help! Sticky element doesen't work for me...
-
Hello all,
Its imposible for me to place a functionally stick element.
Link:
https://www.secretsfilms.com/site/en/alexis_taule_home-copyAny idea??
Thanxs in advance!
-
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
-
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 modulei 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; }
-
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? -
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
-
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
-
<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 idi 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
-
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.
-
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
-
<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
I also code custom websites or custom Lay features.
šæ Email me here: šæ
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it