Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 29, 2022 at 2:41 pm #1374286
    qhsedirectory

    Dear Mike,
    Good day.

    Refer to the previous ticket https://kriesi.at/support/topic/hide-top-menu-and-logo-when-the-scroll-reach-on-particular-section/#post-1357884 the suggested script was working fine for long. Hence, I believe from the last theme update the script was not working could you check what is the issue.

    waypoint-trigger
    e.g. link https://www.qhsedirectory.com/portfolio-item/hse-career-directory/
    The logo, main menu, header has to be hidden when the waypoint-trigger executes.

    Kindly check and let us know.

    Thank you & BR
    Anish Appukuttan
    Dubai.

    November 30, 2022 at 1:55 am #1374388
    Mike

    Hey qhsedirectory,
    It looks like the ending bit of code is missing from the script, but I can’t tell for sure without logging in, and I think your caching plugin is delaying the loading of jQuery so the script won’t work. Please disable any javascript cache settings and include a admin login so I can check the script.

    Best regards,
    Mike

    November 30, 2022 at 11:59 am #1374429
    Guenni007

    maybe you try it this way:

    function hide_header_main() {
?>
<script>
(function($) {
    var element_to_animate = $('.waypoint-trigger');  
    var $header = $('#header_main');

  element_to_animate.waypoint(function(direction) {
    if (direction === 'down') {
      $header.addClass('waypoint-hide');
    }
   },{offset: '10%'}
  ); 

  element_to_animate.waypoint(function(direction) {
    if (direction === 'up') {
      $header.toggleClass('waypoint-hide');
    }
   },{offset: '10%'}
  );
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'hide_header_main', 9999);
    November 30, 2022 at 12:05 pm #1374430
    Guenni007

    or – if it necessary to wait till DOM is loaded:

    function hide_header_main() {
?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($) {
      var element_to_animate = $('.waypoint-trigger');  
      var $header = $('#header_main');

    element_to_animate.waypoint(function(direction) {
      if (direction === 'down') {
        $header.addClass('waypoint-hide');
      }
     },{offset: '10%'}
    ); 

    element_to_animate.waypoint(function(direction) {
      if (direction === 'up') {
        $header.toggleClass('waypoint-hide');
      }
     },{offset: '10%'}
    );
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'hide_header_main', 9999);

    or try your script and look if the semicolons are needed

    November 30, 2022 at 9:12 pm #1374518
    qhsedirectory
    This reply has been marked as private.
    December 1, 2022 at 3:02 pm #1374643
    Mike

    Hi,
    Thanks for the login, I see that if I inject jQuery.js and waypoint.js the script works, but both of these should be loaded automatically.
    I see that all of your js is loaded by “rocket-loader” but I don’t see this plugin, I see that your LScache can not be controlled from WordPress and you have to do so from your server:
    2022-12-01_005.jpeg
    Please try to disable the “rocket-loader” and check again.

    Best regards,
    Mike

    December 3, 2022 at 8:30 pm #1374941
    qhsedirectory

    Hello Mike,
    Good day.

    Thank you so much for the suggestion. I found that, the rocket-loader is actually running from CloudFlare, So I have disabled the option from the Cloudflare configuration settings. Now, it is working perfectly.

    Thank you so much once again.
    BR
    Anish Appukuttan
    Dubai.

    December 3, 2022 at 9:06 pm #1374944
    Mike

    Hi,
    Glad to hear that you have this sorted out, 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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘WayPoint Trigger’ is closed to new replies.