I have a web page that has been working well for years. In the last few days I've had complaints from users that the "Cycle" option of googleapi's stopped working on Macbook Air. The following code continues to work well for PC's using Firefox, Chrome, IE and Edge. Strangely enough, the "cycle" also works well on my iPhone's Safari broswer. It just fails with the Macbook. Here's a code snippet from the site's index.shtml page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Page_Specific_Title" -->
<title>My Home Page SHTML</title>
<!-- InstanceEndEditable -->
<link href="CSS/MySite.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #EEE8AA;
p {margin:0; padding:0}
}
-->
</style>
<!-- InstanceBeginEditable name="Page_Specific_Head" -->
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, // speed at which the transition occurs (in miliseconds)
delay: 1000, // time spent on the first slide before starting the slideshow
continuous: 0, // true (1) to start next transition immediately after current one completes
timeout: 9000 // time spent on each slide
});
});
</script>
<meta name="description" content="My text."/>
<meta name="keywords" content="Keywords"/>
<!-- InstanceEndEditable -->
</head>
<body>
<div class="outer_width_1000" >
<div class="index_page_column_1" >
<div class="slideshow" >
<img src="home_page_cycle/image1.jpg" alt="image1"/>
<img src="home_page_cycle/image2.jpg" alt="image2"/>
<img src="home_page_cycle/image3.jpg" alt="image3"/>
<img src="home_page_cycle/image4.jpg" alt="image4"/>
</div>
The problem for Macbook users is that the images show up one after the other, in four rows, overlaying web site text that should appear below the cycled images. It's like the "Cycle" references are ignored. Do you have any idea why this is happening all of a sudden for MacBook Air with Safari? Thanks for looking at this.
I solved the problem. I realized that I hadn't looked at the JQuery version hosted on Google in years. I had the mindset of "If it ain't broke, don't fix it". When I looked into the versions, I noticed that google was offering JQuery 3.4.1. So I changed the original line of:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
to:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
That fixed the problem, and things now work fine on a MacBook. Again, things always worked fine on an iPhone, iPad, and all the windows / browser combinations stated above.