Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Masonry custom size
This topic contains 22 replies, has 2 voices, and was last updated by Ernest Marcinko 1 year, 5 months ago.
- AuthorPosts
- March 22, 2023 at 11:43 am #41924
See a screenshot: it creates a weird stacking result: https://gyazo.com/1f5f6ae5dea792f3b8c6dda20c8228ea
The good news is that the masonry WORKED!
March 22, 2023 at 4:57 pm #41928Hey! – So I disabled the animation https://gyazo.com/21b017fc098d881985dc1a3637e12cf4
And this seems to work for a longer duration but then eventually does bug out if you scroll quite far.
Search doesn’t work, they just stack.
https://posterspy.com/ajax-pro-demo/ –
Hopefully this is something we can fix!
My only other question now would be the overall visualisation:
Currently, we have a non-hover state
https://gyazo.com/102f950b01c41ecb46771aba3c28f5e6and a hover state:
https://gyazo.com/7f63c5ed94b27409d8992c68e9287c96The only difference is the title, a small user avatar and a URL that links to the user’s profile.
Please try it here: https://posterspy.com/posters/
I understand this is probably not within your usual support so if this costs any money for development let me know.
March 23, 2023 at 3:37 pm #41931The stacking I think can be resolved by triggering a window resize event with a delay, something like this:
add_action('wp_footer', 'asp_add_footer_script', 99999); function asp_add_footer_script() { ?> <script> document.querySelectorAll(".asp_main_container").forEach(function(el){ el.addEventListener("asp_search_start", function(event) { setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 500); }); }); </script> <?php }
The hover state is a bit more problematic, that will have to be custom coded within the template fie that I sent you earlier. Unfortunately I am not available for custom jobs, I have years and years of work stacked, I am sorry. It should not be too difficult though, the plugin automatically adds a “hovered” subclass to each item whenever they are hovered, so a simple custom positioned DIV with the details should do the trick.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 23, 2023 at 6:42 pm #41941hi. where do i add this code and ill give it a try. Totally understandable re the coding thank you
March 24, 2023 at 1:20 pm #41947Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 24, 2023 at 1:57 pm #41948Ah I tried that but it didn’t seem to make a difference. I’ll add it to the functions.php and then you can take a look. Can probably add it back within the next hour – 1hr 30
March 24, 2023 at 3:19 pm #41950Ok so yes added, but as you can see no fix https://posterspy.com/ajax-pro-demo/
Maybe this plugin, unfortunately, isn’t going to work for this purpose – don’t worry I won’t request a refund as it’s still a great plugin for our search 🫡
March 24, 2023 at 4:13 pm #41954Maybe the timeout trigger is not the best, can you try maybe this:
Best,add_action('wp_footer', 'asp_add_footer_script', 99999); function asp_add_footer_script() { ?> <script> document.querySelectorAll(".asp_main_container").forEach(function(el){ el.addEventListener("asp_search_end", function(event) { window.dispatchEvent(new Event("resize")); setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 100); setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 500); }); }); </script> <?php }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.