watch this video kzbin.info/www/bejne/mHzGg2ChfrSGn6M

It should work whether you are logged in or out. Ensure the page with these effects is not restricted to logged-in users only

@@crocomentor I understood why: there were "custom messages" turned on within Elementor form.

I was wrong, the bug persists event with "custom messages" turned off. 😕

try creating a brand new page and use my template see if it will work filenewcreate.com/form-2-message-demo/

I can't upload ("Invalid template type" message)

try this: filenewcreate.com/scroll-con-top/

Thank you for pointing that out. I understand the issue you're experiencing. It's a bit tricky to address, but you can try using the code below. This approach might still cause a minor jump; however, it will initially display a minimized version before transitioning to the closed state. Give it a try while I work on finding a more seamless solution. Here’s the code: <style> /* Initially hide the text editor */ .your-text-editor-selector { display: none; } </style> <script src="code.jquery.com/jquery-3.6.0.min.js"></script> <script> jQuery(document).ready(function($) { // Initial state var isExpanded = false; var $textEditor = $('.your-text-editor-selector'); // Ensure this is your actual selector var $button = $('.your-button-selector a'); // Ensure this is your actual button selector // Apply initial height restriction $textEditor.css({ 'max-height': '100px', 'overflow': 'hidden', 'position': 'relative' // Add relative positioning }); // Add gradient overlay pseudo-element $textEditor.prepend('<div class="gradient-overlay"></div>'); // Apply gradient overlay style $('.gradient-overlay').css({ 'position': 'absolute', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%', 'background': 'linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%)', 'pointer-events': 'none' // Allow clicks to pass through the overlay }); // Reveal the text editor after applying initial styles $textEditor.show(); // Button hover effect $button.hover( function() { $(this).css('cursor', 'pointer'); // Set cursor to pointer on hover }, function() { $(this).css('cursor', 'auto'); // Reset cursor to default when not hovering } ); // Button click action $button.click(function() { if (isExpanded) { // Collapse $('.gradient-overlay').show(); // Show the gradient overlay $textEditor.animate({maxHeight: '100px'}, 500); // Animate height change isExpanded = false; $button.text('read More'); // Optionally change button text } else { // Expand $('.gradient-overlay').hide(); // Hide the gradient overlay var fullHeight = $textEditor.prop('scrollHeight') + 'px'; $textEditor.animate({maxHeight: fullHeight}, 500); // Animate height change isExpanded = true; $button.text('read Less'); // Optionally change button text } }); }); </script>

try this: filenewcreate.com/scroll-con-top/

JetEngine is a plugin from Crocoblock. Just make sure it's installed on your computer crocoblock.com/plugins/jetengine/

yes its a taxonomy, check this video out: kzbin.info/www/bejne/h6esgpt8ideSl7M

it does work on my end, but here is the code: .scrollcon { max-height: 40vh; /* Set the maximum height of the container to 60% of the viewport height */ overflow-x: hidden;/* Prevent horizontal scrolling */ overflow-y: scroll;/* Enable vertical scrolling within the container when content exceeds its height */ border: 1px solid #ccc; /* Border style for the container */ border-radius: 10px; /* Applies a border-radius to the scrollbar track */ } .scrollcon::-webkit-scrollbar { width: 14px;/* Sets the width of the scrollbar */ } .scrollcon::-webkit-scrollbar-track { background: BLACK; /* Sets the background color of the scrollbar track */ border-radius: 10px; /* Applies a border-radius to the scrollbar track */ } .scrollcon::-webkit-scrollbar-thumb { background: blue; /* Sets the background color of the scrollbar thumb */ border-radius: 10px; /* Applies a border-radius to the scrollbar thumb */ }

Yeah, I see what you're saying. I'll make sure to fix that up in the future. In the meantime, here's another option you might like even better. Check out the KZbin video here:kzbin.info/www/bejne/ooDKma2CnrdqabM. Thanks for letting me know!

To fix the jump, delete the hashtag in the button link field. prnt.sc/nuyjSP2tdR7R

@@crocomentor It worked, thank you so much!

You're welcome!

@@crocomentor Hey another one - I use this to create a loop item, and then apply the taxonomy filter (example of options in the filter: All, A, B, C) When is on all that is default and the first one it works perfectly but when I select the option A at the filter does not work anymore (I make the hover version). The url changes when the filter it's applied. Dont know if that could be a problem.

Unfortunately, the unfold effect doesn't work well inside loops, but this is what you can try doing:elementor taxanomy filter doesnt have a reload option only ajax so You need to create a taxonomy filter with JetSmartFilters and set the apply type to 'reload'. Don't forget to toggle on the 'show apply button, it should work prnt.sc/AQbZxDHtwgBg

filenewcreate.com/elementor-21164/

@@crocomentor Very helpful. Thanks so much.

Thank you for your feedback on the video! the issue is not an error in the process but rather a setting in the meta field. To resolve this, please follow these steps: Go to the checkbox meta field you created for your cpt in the backend of your site. Ensure that the "Save as array" option is enabled. This should resolve the issue and ensure that the data is correctly recorded.

prnt.sc/xh3Sx1tqOQu4

For horizontal scroll, make sure to set the direction of your child container to row and then use the following code, which includes comments explaining each parameter: .scrollcon { max-width: 40%; /* Set the maximum width of the container to 40% of its parent element */ overflow-x: auto; /* Enable horizontal scrolling */ overflow-y: hidden; /* Disable vertical scrolling */ border: 1px solid #ccc; /* Border style for the container */ border-radius: 10px; /* Applies a border-radius to the container */ display: flex; /* Use flexbox to manage the items inside the container */ flex-direction: row; /* Ensure items are arranged in a row */ flex-wrap: nowrap; /* Prevent items from wrapping to the next line */ } .scrollcon > * { flex-shrink: 0; /* Prevent child elements from shrinking */ margin-right: 10px; /* Add some space between items for better visibility */ } .scrollcon::-webkit-scrollbar { height: 14px; /* Sets the height of the horizontal scrollbar */ } .scrollcon::-webkit-scrollbar-track { background: black; /* Sets the background color of the scrollbar track */ border-radius: 10px; /* Applies a border-radius to the scrollbar track */ } .scrollcon::-webkit-scrollbar-thumb { background: orange; /* Sets the background color of the scrollbar thumb */ border-radius: 10px; /* Applies a border-radius to the scrollbar thumb */ } /* Mobile adjustments */ @media (max-width: 768px) { .scrollcon { max-width: 100%; /* Allow full width on mobile */ flex-direction: row; /* Ensure items are still arranged in a row on mobile */ } }

you can use the Pulse Animation(sporadically) version filenewcreate.com/css-for-elementor/

watch this video filenewcreate.com/form-style-selector/

@@crocomentor This is great!!! But I'm using the image one... Thanks anyway!

watch this video filenewcreate.com/form-style-selector/

Thanks! Im not understanding the code... Just want to restyle the checkbox on the end of my multistep form@@crocomentor

Simply paste the new code into the 'Custom CSS' tab. Next, select the checkbox field you want to style, navigate to the 'Advanced' tab, and name the ID as 'stylex'. That's it!

prnt.sc/BfAfJX6Yaqn0 prnt.sc/OzwjHzEzgD9s

its in the description but here you go, look for vertical scrollbar: filenewcreate.com/elemento-code/