-
AuthorPosts
-
May 31, 2022 at 1:03 pm #1353580
Hi Enfold theme,
before the last enfold update, a random item in my ajax portfolio was automatically opened as soon as the page was loaded.
I took the code for this from another Enfold user’s thread and added it to functions.php.
Unfortunately, after the update, this no longer worked. So I removed this code (and unfortunately couldn’t find it again later).Now I added the code under the following link (Enfold Docs) into the functions.php of the child theme, but unfortunately nothing happened:
Please let me know what I could have done wrong or how I can reactivate the function.
Thank you very much in advance.
Best regards,
fkmJune 1, 2022 at 5:29 am #1353675Hey fkm,
Thank you for the inquiry.
Where did you place the links or buttons for the portfolio overview page? The URL or link of these buttons should contain the custom_ajax parameter and the value should be the ID of the portfolio item that you would like to open on page load.
Example:
http://kriesi.at/portfolio?custom_ajax=123
When the button containing this link is clicked, it will redirect to the portfolio overview page and open the portfolio item with the ID 123. Make sure to enable the AJAX portfolio option.
Best regards,
IsmaelJune 2, 2022 at 12:51 pm #1353909Hey Ismael,
thank you very much for your reply.
I just realized that I didn´t clearly explain what I was trying to say – my mistake, sorry about that. :)
What I mean is that I put some code in the child functions.php that I found in another enfold user’s thread (I think it was the following one) and since then one item of the portfolio grid that I´m using on this page opened the ajax portfolio preview automatically when loading the page (without manually clicking on it).
add_action(‘wp_footer’, ‘ava_auto_click’);
function ava_auto_click(){
?>
<script>
(function($){
$(window).load(function() {
$(‘.grid-links-ajax a:first’).trigger(‘click’);
});
})(jQuery);
</script>
<?php
}That’s all I had done. I didn’t create any IDs or anything else.
It worked just fine.Since the last Enfold update, it suddenly stopped working.
Please let me know what could be causing it or maybe what I might have unknowingly changed.
Thanks a lot in advance.
Best regards,
fkmJune 4, 2022 at 3:26 am #1354097Hi,
Thank you for the clarification.
It might not be working properly now because of the deprecated load function. Try to replace the whole script with the following code.
add_action('wp_footer', 'ava_custom_scripts', 999); function ava_custom_scripts() { ?> <script> (function($){ // automatically open first portfolio grid item $(document).ready(function() { setTimeout( function() { var grid = $('.grid-links-ajax'); if( grid ) { grid.find('a:first').trigger('click'); } }, 100); }); })(jQuery); </script> <?php }
Please make sure to purge the cache and remove the browser history before testing the page.
Best regards,
IsmaelJune 7, 2022 at 12:48 pm #1354379Hi Ismael,
thank you very much for another reply and for your patience.
I just replaced it and checked the page after clearing the cache/removing browser history but it seems like nothing changed.
Please let me know what I might have done wrong (please also see screenshot).Thanks in advance.
Best regards,
fkmJune 8, 2022 at 3:44 am #1354463Hi,
Thank you for the update.
The script is not working because of this error.
(index):270 Uncaught ReferenceError: jQuery is not defined at (index):270:8
Did you set jQuery to load in the footer? Please try to temporarily disable the option from the Enfold > Performance panel. We also adjusted the priority of the hook by changing this line.
add_action('wp_footer', 'ava_custom_scripts', 999);
We set the priority to 999 to make sure that it loads after the jQuery library.
Best regards,
IsmaelJune 9, 2022 at 5:11 pm #1354691Hi Ismael,
thank you very much for your reply.
You’re right, I just found out that I actually set jQuery to load in the footer and in addition I made a few other changes in Enfold > Performance that I can’t even remember (kind of misterious: I wouldn’t have known exactly what I was doing either).
Furthermore I just have reset all settings in Enfold > Performance the way they are set in other Enfold Backends that I have access to.And I replaced the corresponding line in the script (thanks for your attentive note). Please see screenshot.
Now the Ajax portfolio preview on iPhone displays as intended on page load automatically with no errors.
It also works on desktop (in Firefox and Chrome), but somehow only after refreshing the page several times.
When the page is loaded for the first time, the preview is not opened and the items cannot even be clicked manually.
I have already deleted browser data and cache several times, the problem persists.I don’t know what else to do, so please help.
Thank you very much in advance.
Best regards,
fkmJune 9, 2022 at 7:41 pm #1354718well one of your other mistake is the fact that the old function :
$(window).load(function() {
is deprecated – you had to use now:
$(window).on('load', function(){
June 10, 2022 at 10:22 am #1354778Hi Guenni007,
thank you very much for your hint.
Please let me know where to use/replace this line because I can’t find the old function line “$(window).load(function() {” in the script:add_action(‘wp_footer’, ‘ava_custom_scripts’, 999);
function ava_custom_scripts()
{
?>
<script>
(function($){
// automatically open first portfolio grid item
$(document).ready(function() {
setTimeout( function() {
var grid = $(‘.grid-links-ajax’);if( grid ) {
grid.find(‘a:first’).trigger(‘click’);
}
}, 100);
});
})(jQuery);
</script>
<?php
}Thanks a lot in advance.
Best regards,
fkmJune 11, 2022 at 3:19 pm #1354910Hi,
Please try changing the setTimeout from 100 to 800
add_action('wp_footer', 'ava_custom_scripts', 999); function ava_custom_scripts(){ ?> <script> (function($){ setTimeout( function() { var grid = $('.grid-links-ajax'); if( grid ) { grid.find('a:first').trigger('click'); } }, 800); })(jQuery); </script> <?php }
After applying please clear your browser cache and check.
Best regards,
MikeJune 13, 2022 at 10:03 am #1355019Hi Mike,
I just did as you said and it’s working fine now – thank you so much. :)
One more question about this topic:
Sometimes when the preview opens a lil lazy, the page is darkly overlaid and a loading icon appears (please see screenshot).
Is there a quick way to hide this effect?Thank you very much in advance for antother reply.
Best regards,
fkmJune 13, 2022 at 12:31 pm #1355028Hi,
Try disabling Enfold Theme Options ▸ Page Preloading
Or try this css:#top .avia_loading_icon .av-siteloader { display: none !important; visibility: hidden !important; } #top .avia_loading_icon { background: rgba(0,0,0,0) !important; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeJune 13, 2022 at 3:04 pm #1355048Hi Mike,
I think I had already disabled the page preloading in the Enfold theme options.
Anyway, the css you gave me works fine.Thank you very much for the quick reply/help and please feel free to close the topic as sucessfully completed.
Best regards,
fkmJune 13, 2022 at 5:32 pm #1355072Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Open up random ajax portfolio item when the page is loaded’ is closed to new replies.