asked on

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 :)

Julian Hansen

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.

Peter Kroman

ASKER

Thanks Julian,

I will work with it and get back. Probably tomorrow :)

Peter Kroman

ASKER

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/

Julian Hansen

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.

Peter Kroman

ASKER

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

Julian Hansen

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.

Peter Kroman

ASKER

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 .....

Peter Kroman

ASKER

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.

ASKER CERTIFIED SOLUTION

Peter Kroman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

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

Peter Kroman

ASKER

Thanks Julian,

I will try these things and get back :)

Peter Kroman

ASKER

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 :)

Peter Kroman

ASKER

I mean the jQueryInit function ...

Julian Hansen

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

Peter Kroman

ASKER

Thanks Julian,

Working .... :)

Peter Kroman

ASKER

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.

Peter Kroman

ASKER

Thanks yo Julian for good sparring on this