Strange problem with slide show

Hi,

I have a problem on my landing page : https://genealogiskforum.dk/

The problem is regarding the slideshow at the middle of the page.

This slideshow is working (but strangely) in Google Chrome on Mac and Windows, and it is not working at all in either Firefox, Safari or  IE (11)

The "strangely" working part in Chrome is that it seems that alle the images are shown behind each other when the page is loaded (you can see a tine bit of another image at the bottom of most of the images). At the same time when the image changes it returns to one specific image before it shows the next image in the stack. BUT - when the slide show has run one "round" = all 6 images has been shown, it seems to be working correctly. No returning to one specific slide when shifting image, and no images behind each other.

I must be doing something wrong here. but I can't figure out what it is.

The HTML for the slideshow is this:
<div id="slideshow" >
                   <div>
                     <img src="images/2012_converted.jpg" width="100%" height="auto">
                   </div>
                   <div>
                     <img src="images/2013_converted.jpg" width="100%" height="auto">
                   </div>
                   <div>
                     <img src="images/2014_converted.jpg" width="100%" height="auto">
                   </div>
                   <div>
                     <img src="images/2015_converted.jpg" width="100%" height="auto">
                   </div>
                   <div>
                     <img src="images/2016_converted.jpg" width="100%" height="auto">
                   </div>
                   <div>
                     <img src="images/2017_converted.jpg" width="100%" height="auto">
                   </div>
                </div>

Open in new window


And the script for the show is this (placed at the bottom of the file - that seems to be the only place it works ...):
var main = function() {

  var paused = false

  setInterval(function() {
    if (paused === false) { 
      $('#slideshow > div:first')
      .fadeOut(2000)
      .next()
      .fadeIn(2000)
      .end()
      .appendTo('#slideshow');
    };
  },  5000);
   
  
};

$(document).ready(main);

Open in new window


I hope that somebody can help me to get this working right :)
Peter KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You page has script errors for starters.

The images not lining up are caused by the fact that the images are not all the same size. I would resize them to be identical in size that will solve the issue of them being visible behind each other.
You can fudge it with CSS by adding this
index.style.css: line 80
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: hidden; /* <== ADD THIS */
    width: 100%;         /* <== ADD THIS */
    height: 413px;      /* <== ADD THIS */
}

Open in new window


Your slideshow is not running because of the script error which is saying that $ is not defined. Not sure why.

You have an issue on line 38 (of the view source) where you have a <script> tag inside a <script> tag.

Let's start with sorting those errors out first.
0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Julian,

I will work with it and get back. Probably tomorrow :)
0
Peter KromanSales ExecutiveAuthor Commented:
Hi Julian,

The double script tag is corrected.

The changes in CSS makes no difference. Except that overflow:hidden means that no images ar displayed at all.

I will work on making the images the exact size, so let's not use more time on that part.

But if you can help me with the other strange behaviour I would be most grateful.

I am testing om this page: https://kroweb.dk/gfdev/
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Except that overflow:hidden means that no images ar displayed at all.
That will happen if you don't set a height on the container as shown in my previous post.
0
Peter KromanSales ExecutiveAuthor Commented:
Yes - like this:

#slideshow {
            overflow: hidden; 
            max-width: 100%;
            height: 413px;
        }

#slideshow > div { 
            position: absolute; 
            top: 10px; 
            left: 10px; 
            right: 10px; 
            bottom: 10px;
            
        }

Open in new window


It shows the images but it still makes no other difference
0
Julian HansenCommented:
Sorry, Peter, I am not seeing any change on your site. Images are still different sizes and I see two JavaScript errors reported in the console concerning the $ not defined.
0
Peter KromanSales ExecutiveAuthor Commented:
Ont the test page: https://kroweb.dk/gfdev/ I have got the java script errors fixed now, but I have still not got the problem solved .....
0
Peter KromanSales ExecutiveAuthor Commented:
Just to clarify a little.

The problem is that the slideshow is not working  - in any browser. Don't care about the different sizes of images - that I'll fix another way.
0
Peter KromanSales ExecutiveAuthor Commented:
I have got it working - partly :)

I had the jquery script loading async and changing that made a difference.

But at the same time it "eated up" a lot of my load performance on the page (from 88% in Google Insights to 71%).  

It here any way I can load this faster: <script src="scripts/jquery-3.2.1.min.js"></script>

If i go: <script async src="scripts/jquery-3.2.1.min.js"></script> I get the problems described earlier but the better load performance.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Works for me. Need to wait awhile for it to start. Checked in FF, Chrome, Edge (Back to IE 8) and IE (Back to IE 8) - 8 sec delay to start but then it works.

My advice - move your jQuery load to the bottom of the page (Without the async)
Then put your jQuery code either in a script tag after this
OR
Create a function called jQueryInit and put your jQuery (document load) code in this function.
Then add this AFTER your jQuery library load (without async).
<script>
window.addEventListener('load', jQueryInit);
</script>

Open in new window

0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Julian,

I will try these things and get back :)
0
Peter KromanSales ExecutiveAuthor Commented:
Could you give me an example on haw to syntax the function.

Javascript is one of the things I need to learn much more about :)
0
Peter KromanSales ExecutiveAuthor Commented:
I mean the jQueryInit function ...
0
Julian HansenCommented:
function jQueryInit()
{
 $(".message").fadeOut(8000);
        $(".message2").fadeOut(8000);
        $(".message3").fadeOut(8000);
        $(".message4").fadeOut(8000);        
        $(".success").fadeOut(8000);
        $(".error").fadeOut(8000);

        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(3500)
            .next()
            .fadeIn(3500)
            .end()
            .appendTo('#slideshow');
        },  10000);
}

Open in new window

I am not a fan of this solution, I am suggesting it to see if it gives you better load times. However, I don't believe that compromising good design practices to meet an almost arbitray requirement such as Google's appraisal of your page load. I would look at other factors.

jQuery is a common library and should be cached if you use a common CDN to download it - it will have been downloaded on other sites. To go and change your whole coding paradigm just to meet the page load is the wrong call in my estimation.

Check to see if the above makes a difference.

There are other methods that we can use for instance we can do this

<script>
function waitForjQuery()
{ 
  var jqint = setInterval(checkjQuery, 50);
	
  function checkjQuery()
  {
    if (typeof $ !== 'undefined') {
      clearInterval(jqint);
		
      var async = jQAsync || [];
      while(async.length) {
        var item = async.shift();
        if (item.type == 'ready') item.fn();
        else $(window).on('load', item.fn);
      }
    }
  }
}
waitForjQuery();
</script>

Open in new window

Then to load your jQuery you can do this
Add this to the top <head> section of your script
<script>
var jQAsync = [];
</script>

Open in new window

This can go anywhere and you can repeat it as much as you want for each jQuery code (or any other code) you want to run after jQuery has loaded
<script>
jQAsync.push({type: 'ready', fn: function() {
  $(".message").fadeOut(8000);
  $(".message2").fadeOut(8000);
  $(".message3").fadeOut(8000);
  $(".message4").fadeOut(8000);        
  $(".success").fadeOut(8000);
  $(".error").fadeOut(8000);

  $("#slideshow > div:gt(0)").hide();

  setInterval(function() { 
    $('#slideshow > div:first')
	  .fadeOut(3500)
	  .next()
	  .fadeIn(3500)
	  .end()
	  .appendTo('#slideshow');
  }, 10000);
}});
</script>

Open in new window

0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Julian,

Working .... :)
0
Peter KromanSales ExecutiveAuthor Commented:
Hi Julian,

I have tried your suggestions. None of them make any visible difference on load time. So I believe that I have the best reachable load-time as is :) :)

Thanks for your input.
0
Peter KromanSales ExecutiveAuthor Commented:
Thanks yo Julian for good sparring on this
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.