2

I have a slideshow plugin called flexslider which is only displayed after the page has fully loaded and all images have been downloaded.

I also have an anchor tag on this page which is being invoked before the page has fully loaded.

This is causing the anchor tag to be in the wrong place as the page height has changed to accommodate the slideshow.

You can see what I mean here: http://ypc.org.au/ministries/form#transform2015

I've duplicated the page and removed the slideshow and it seems to work but I need it working with the slideshow: http://ypc.org.au/ministries/form2#transform2015

Can someone suggest how I could make the anchor tag load only after the page has fully loaded? Or is there something simple I am missing?

Thanks!

Edit:

I think this might be how flexslider is loading the page:

      <script type="text/javascript">
        $(function(){
          SyntaxHighlighter.all();
        });
        $(window).load(function(){
          $('.flexslider').flexslider({
            animation: "slide",
            start: function(slider){
              $('body').removeClass('loading');
            }

          });
        });
      </script>
masterg174
  • 143
  • 9

2 Answers2

1

I had the same problem, because i was using a slideshow, and because of other responsive elements so i can't determine the height of the images for example. You can use a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also (if you have a sticky menu bar you can make this space bigger).

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});
zod
  • 407
  • 4
  • 4
0

This is probably your solution. Use this jQuery code.

<script type="text/javascript">
$(window).load(function() {
    $(".your-anchor-tag").fadeOut();
});
</script>
S_I_M_O_N
  • 63
  • 8
  • Thanks for your suggestion but couldn't get it working. I think it might be a problem with Flexslider and the way it's deferring it's loading. I also tried adding $(".transform2015").fadeOut(); straight into FlexSliders load function but still couldn't get it to jump to the correct place. – masterg174 Aug 29 '15 at 11:11
  • Maybe it is problem of FlexSlider. I use this code at my site. There is loading image on white canvas while page isn't loaded and it works for me well. I recommended code your own slider. It is too simple. – S_I_M_O_N Aug 29 '15 at 15:30
  • Thanks, I will look into doing that. I never though of making my own slider but I suppose there's really not too much going on with a slider and jquery makes it a lot easier. I've seen another site do what you suggested with the white canvas; I could look to that site to get an idea. – masterg174 Aug 29 '15 at 22:32