Recently I was working on a project where the need for rotating ad functionality was needed. The site used Ektron and one of the content blocks was required to rotate between three different pieces of content.
The first go at this resulted in an implementation that used the MooTools javascript framework. This implementation achieved the desired functionality, with the different pieces of content rotating between each other. However, this implementation also resulted in a feature (as we developers like to call them). The Ektron menu items were now generating javascript errors (such as "menu[thisM][0] is undefined" or "nextMenu is undefined"). These javascript errors were being from the WorkArea/java/pop_core.js file.
After some research I found that Ektron was using jQuery, not MooTools, for it's javascript. So I thought to myself, "Why not stay consistent?". I decided to implement the rotating ad functionality using jQuery to see if I could get rid of those javascript errors being generated by the Ektron menus.
Using one of the tutorials on jQuery's site (Tutorials: Scroll Up Headline Reader) as a starting point, I implemented the rotating ad functionality with the following source:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Rotating Ad</title>
<style type="text/css">
#slideshowoutershell
{
height: 200px;
position: relative;
width: 415px;
}
.slideshow-item
{
height: 200px;
overflow: hidden;
position: absolute;
top: 0;
width: 415px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
var interval_time = 4000; // 3 seconds between changes
var item_count;
var item_interval;
var old_item = 0;
var current_item = 0;
$(document).ready(function() {
item_count = $("div.slideshow-item").size();
$("div.slideshow-item").each(function(i) {
$(this).hide();
});
$("div.slideshow-item:eq(" + current_item + ")").fadeIn("slow");
item_interval = setInterval(item_rotate, interval_time); // time in milliseconds
$('#slideshow-container').hover(function() {
clearInterval(item_interval);
}, function() {
item_interval = setInterval(item_rotate, interval_time); //time in milliseconds
item_rotate();
});
});
function item_rotate() {
current_item = (old_item + 1) % item_count;
$("div.slideshow-item:eq(" + old_item + ")").fadeOut("slow", function() {
$("div.slideshow-item:eq(" + current_item + ")").fadeIn("slow");
});
old_item = current_item;
}
</script>
</head>
<body>
<h3>Testing of Rotating Ad with jQuery</h3>
<div id="slideshowoutershell">
<div id="slideshow-container">
<div id="item-0" class="slideshow-item" style="background-color: Red;"></div>
<div id="item-1" class="slideshow-item" style="background-color: Green;"></div>
<div id="item-2" class="slideshow-item" style="background-color: Blue;"></div>
</div>
</div>
</body>
</html>
After implementing the rotating ad functionality using jQuery, the javascript errors that were being generated by the Ektron menus were resolved and did not occur anymore. For some reason, MooTools was not playing 100% nicely with Ektron. I would be interested if anyone else was able to avoid such javascript errors using Ektron and MooTools together.
Thursday, April 02, 2009 12:50 PM