Javascript doesn't work on website but runs on codepen

[Wolly9102]

Hello,

I am breaking my head over this. I've got an simple HTML website running live and I want to put an moving slideshow on it. Now I want to accomplish this with an external javascript and insert it into my HTML. (see code)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript">
  $(document).ready(function () {
        
   $("#slideshow > div:gt(0)").hide();

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

 

 

 

 

div id="slideshow">
  <img src="---">
  </div>
  <div>
  <div id="slideshow">
    <img src="---">
  </div>
  
  <div>
  <div id="slideshow">
    <img src="---">
  </div>
  
  <div>
  <div id="slideshow">
    <img src="--->
  </div>
  
  <div>
  <div id="slideshow">

    <img src="---">
  </div>

Now when I upload this to the website the slideshow shows but it doesn't do anything. However when I use the exact same code on codepen https://codepen.io/Wolly9102/pen/zYLBodb it works fine.

 

What am I missing here? I am a noob at html so forgive me if it's something stupid.

[HanZie82]

Without knowing your webserver im guessing its not Java compatible?

[Wolly9102]

3 minutes ago, HanZie82 said:

Without knowing your webserver im guessing its not Java compatible?

I don't know myself. it's hosted externally and I got the site from someone who quitted with it. I could ask there support it's java supported.

[Ominous]

You need to create a dedicated script tag for your JQuery include and your own custom script as such:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script>
  // added the above script tag and ended the include script tag on the line above.
  $(document).ready(function () {
        
   $("#slideshow > div:gt(0)").hide();

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

Behaviour of a script tag with both a src="" attribute and content seems to be inconsistent. Some browsers may run this but its much better to separate them. Your Codepen works because its effectively being compiled into the above.

[Wolly9102]

15 hours ago, Ominous said:

You need to create a dedicated script tag for your JQuery include and your own custom script as such:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script>
  // added the above script tag and ended the include script tag on the line above.
  $(document).ready(function () {
        
   $("#slideshow > div:gt(0)").hide();

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

Behaviour of a script tag with both a src="" attribute and content seems to be inconsistent. Some browsers may run this but its much better to separate them. Your Codepen works because its effectively being compiled into the above.

Thanks, That did it ^^