We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18367
    • 834 Posts
    Got a weird problem in Revo.

    My same page anchors aren't working when I first click them, I just get a blank screen, but if I refresh the page the correct part of the page loads.

    IE The url in the nav bar stays the same complete with the same #anchorname attached, only it works when the page is refreshed.

    Anyone know why that would be? It's driving me nuts.

    I've looked at a lot of other posts on this and tried rewriting the anchors various ways but they all give the same result.

    Also if I copy and past the url with anchor to a new browser window it works fine also.

    I should also say that I have copied the source content from an another older Revo installation where the same anchors work just fine.

    Using Latest version of Revo 2.5.6.

    Here's the page http://www.hotly.com.au/
    The anchor is the "Learn More" button
    And try the anchor from here http://www.hotly.com.au/#main That's what it should do.
    But try it from the base page and you get the blank screen.

    PS It's the same for anchors everywhere on this site. And as they all worked on a previous Revo install I suspect there's something else going on other than how I've written the anchors.


    [ed. note: markg last edited this post 6 years, 11 months ago.]
      Content Creator and Copywriter
      • 42562
      • 1,145 Posts
      First, there is a huge JavaScript error on that page, fix that and then we go from there.

      WHY on earth is MODX ExtJS TinyMCE Extra loading on there?

       <script type="text/javascript" src="/assets/components/tinymcerte/js/vendor/tinymce/tinymce.min.js"></script>
      <script type="text/javascript" src="/assets/components/tinymcerte/js/vendor/autocomplete.js"></script>
      <script type="text/javascript" src="/assets/components/tinymcerte/js/mgr/tinymcerte.js"></script>
        TinymceWrapper: Complete back/frontend content solution.
        Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
        5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
        • 42562
        • 1,145 Posts
        http://www.hotly.com.au/#main
        This works because the user is not interacting with the page, ergo, no JS firing (I don't think)
        The anchor just works according to browser native doings.

        BUT when user interacts with the #main button, that's where chaos begins:
        The fancy fadein/out hangs because of, IMO, that tinymce jargon firing ExtJS outside MODX Manager.
        One huge JS error is likely to interfere with the rest of the page.

        That .inloading class is not removed because of aforesaid hanging. Hence the so-called "you get the blank screen"
        <div class="container-fluid inloading">
           
           <nav class="animated fadeInDown affix">
        
          TinymceWrapper: Complete back/frontend content solution.
          Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
          5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
          • 18367
          • 834 Posts
          Quote from: donshakespeare at Apr 06, 2017, 10:07 PM
          First, there is a huge JavaScript error on that page, fix that and then we go from there.

          WHY on earth is MODX ExtJS TinyMCE Extra loading on there?

           <script type="text/javascript" src="/assets/components/tinymcerte/js/vendor/tinymce/tinymce.min.js"></script>
          <script type="text/javascript" src="/assets/components/tinymcerte/js/vendor/autocomplete.js"></script>
          <script type="text/javascript" src="/assets/components/tinymcerte/js/mgr/tinymcerte.js"></script>

          That was going to be my next separate question. It's not in the template or anything, it just gets inserted by the system for some reason Anyway I uninstalled it. But it's unrelated side issue. The problem remains.

          Also, on other pages where the anchors are outside of the top section I still get the same behaviour. See http://www.hotly.com.au/library/conversion-rates/its-the-offer-stupid2 and all the anchors under the "In this article section" IE

          Why testing can be misleading
          Are you making an offer they can easily refuse?
          Why love is not enough
          8 tips on how to create an irresistible offer
          How to tell if you have a winning offer
          [ed. note: markg last edited this post 6 years, 11 months ago.]
            Content Creator and Copywriter
            • 42562
            • 1,145 Posts
            Good, the nasty error is out

            In your http://www.hotly.com.au/javascripts/functions.js
            Notice how, like I said earlier on, the .inloading class is not removed upon human interaction?
            Well, it is removed only on pageload.

              // Trigger it on pageload //
              $(window).load(function(){
                $('section').css('min-height', $(window).height()+'px');
                $('.bg').addClass('normal');
                $('#loader .bar').animate({
                    width : '100%'
                }, 500, function(){
                    $('#loader').addClass('remove');
                    $('#loader').fadeOut(500, function(){
                        $('.container-fluid').removeClass('inloading'); //<----- need this for href clicking as well


              $('a').click(function(e){
                var href = $(this).attr('href');
                if(!$(this).hasClass('anchor') && $(this).attr('href') != '#' ){
                  $('.container-fluid').addClass('inloading');  //<----- maybe remove this for better user experience
                  setTimeout(function(){
                     window.location = href;
                     $('.container-fluid').removeClass('inloading'); //<----- add this and you shall be golden
                  }, 500); <----- maybe remove this for better user experience
                  e.preventDefault();
                }
              });
              TinymceWrapper: Complete back/frontend content solution.
              Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
              5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
              • 18367
              • 834 Posts
              Don,

              OK I tried your edits and they seem to have worked.

              Not sure if I fully understood them, but here's what I wrote:

                $('a').click(function(e){
                  var href = $(this).attr('href');
                  if(!$(this).hasClass('anchor') && $(this).attr('href') != '#' ){
                   
                    setTimeout(function(){
                       window.location = href;
              $('.container-fluid').removeClass('inloading');
                    }, 500);
                    e.preventDefault();
                  }
                });


              I'm not a JS coder, I'm just a "If monkey can see, monkey can do" guy.
                Content Creator and Copywriter