Okay
  Public Ticket #2384788
Ajax links
Closed

Comments

  • Sub started the conversation

    Hi, 

    thank you for maintaining and supporting this great theme! 

    Here is my issue: 

    I am loading pages using Ajax and I am using the classic menu that stays fixed to the top of the page. 

    When I click on a link in that menu, the new page is loaded from the very top of the page. Instead, I would like to load every new page from a specific div after it is loaded using Ajax.

    I have built a code that should do this but I can not get it to work: 

    $( document ).ajaxComplete(function( event, request, settings ) {
      $('html, body').animate({
            scrollTop: $('#intro').offset().top
        }, 'slow');
    });
    

    I have added the above code in a custom JS file that is loaded after all other JS files. 

    It works for a split second but then the page jumps back to the top anyway. 
    Any ideas what I am doing wrong? 

    Thanks!

  • Sub replied

    Inside /js/scripts.js I have changed the line 261 from

    $("html,body").animate({scrollTop: 0}, 1);

    to

    $("html,body").animate({ scrollTop: $('#intro').offset().top }, 0);

    This works pretty well but it does not work immediately. The page first loads at the very top and then jumps to the div that I specified. 

    I have two questions about this: 

    1. Is there a way to execute this function so quickly that it seems the page is loading from the specified div and not from the top? 
    2. Can I achieve this with my child theme without changing the scripts.js inside the parent theme?

    Thank you so much

  •  1,823
    Support replied

    Hi there, do you have smooth scrolling enabled in customizer -> general settings?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied

    Hi, thank you for the suggestion.
    I have tried it both with smooth scrolling enabled and disabled but it does not make a difference. 

    The problem is not that I want the site to smoothly scroll to a specific position. Actually, I don't want the scrolling to that position to be visible at all. Instead, I want the site to load from a specified position instead of from the top of the page. Any more ideas?

    Thanks for your help and keep up the good work.

  • Sub replied

    Hi, 

    I think I found the solution. I removed 

    $("html, body").scrollTop(0);

    from line 2517 in scripts.js. 

    Now I would just like to know, how I could make these changes without editing the scripts.js inside the parent theme. Is there a way how I can override the whole "function n(t, n)" that was responsible for the unwanted behaviour?

  • Sub replied

    Okay, here is what I need to do: 

    I need to deregister and dequeue the scripts.js from the parent theme and instead enqueue my own scripts.js file with the modifications that I made. 

    Please tell me how to do this.

  •  1,823
    Support replied

    Hi,

    I think you need to use both wp_dequeue_script('bauman-scripts') and wp_deregister_scripty('bauman-scripts') to deregister the parent's scripts.js and then use get_stylesheet_directory_uri to retrieve the path to child theme js directory.

    https://stackoverflow.com/questions/23507179/wp-dequeue-script-for-child-theme-to-replace-script

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied

    Hi, thank you. 
    I have done that: 

    function clean_scripts(){ 
    wp_dequeue_script( 'bauman-scripts' ); 
    wp_deregister_script( 'bauman-scripts' ); 
    wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ),'', true );
    }
    add_action( 'wp_enqueue_scripts', 'clean_scripts', 100 );

    It should work but it somehow breaks some theme functionalities, even though I have copied the entire code from the scripts.js to my myscript.js. These two script files are identical but for some reason when I swap the files like this, I can not open any portfolio pages from the portfolio overview page. Any ideas?

  •  1,823
    Support replied

    Try using the same name for the scripts handle:

    wp_enqueue_script( 'bauman-scripts', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ),'', true );

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied

    Thanks for the tip. I tried that but the problem persists. I have figured out that it is only the ajax functionality that stops working when I swap your scripts.js with mine.. I hope that helps for finding ta solution.

  •  1,823
    Support replied

    Ok, not a problem, do you get any errors if you check the browser's error console (right click -> inspect -> console)  when ajax is enabled? This can give you some extra information about what's not working.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied

    No, I don't get any errors in the console. But I have noticed that the following pieces misses from the source code when I swap the .js files:

    <script type="text/javascript">
    /* <![CDATA[ */
    var ClapatBaumanThemeOptions = {"enable_ajax":"1","enable_preloader":"1"};
    var ClapatMapOptions = {"map_marker_image":"https:\/\/mywebsite.com\/wp-content\/themes\/bauman\/images\/marker.png","map_address":"775 New York Ave, Brooklyn, Kings, New York 11203","map_zoom":"16","marker_title":"Bauman","marker_text":"Here we are. Come to drink a coffee!","map_type":"satellite","map_api_key":""};
    /* ]]> */
    </script>
    

    Should I try to add it manually to the footer?

  • Sub replied

    I have added it manually to the footer and it solved the issues. Is this a safe solution or more like a hotfix?

  •  1,823
    Support replied

    No, those are parameters which we pass to the bauman-scripts handle so you should add this code immediately after you enqueue your script

    wp_localize_script( 'bauman-scripts',
                        'ClapatBaumanThemeOptions',
                        array( "enable_ajax" => bauman_get_theme_options('clapat_bauman_enable_ajax'),
    "enable_preloader" => bauman_get_theme_options('clapat_bauman_enable_preloader') )
    );

    wp_localize_script( 'bauman-scripts',
    'ClapatMapOptions',
    array(  "map_marker_image"  => esc_js( esc_url ( bauman_get_theme_options("clapat_bauman_map_marker") ) ),
    "map_address"       => bauman_get_theme_options('clapat_bauman_map_address'),
    "map_zoom"    => bauman_get_theme_options('clapat_bauman_map_zoom'),
    "marker_title"  => bauman_get_theme_options('clapat_bauman_map_company_name'),
    "marker_text"  => bauman_get_theme_options('clapat_bauman_map_company_info'),
    "map_type" => bauman_get_theme_options('clapat_bauman_map_type'),
    "map_api_key" => bauman_get_theme_options('clapat_bauman_map_api_key') ) );


    see /include/scripts-config.php 


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied

    Thanks, that solved it! Great support experience :) 

    I think it would be great if you could use the code-format for the piece of code you gave me in your answer so that it will be easy for others to understand and copy if they also want to replace the parent-theme scripts.js.

    Thanks again, I will recommend!

  •  1,823
    Support replied

    Yes, definitely! We will keep this ticket as reference.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy