Jquery Marquee Slider Help

I found this marquee slider on stack overflow and I’ve been playing around with it. The problem is that it does something funny with content. I want to add floated divs in there or a floated list so that it will slide through “events”. But it just keeps stacking them no matter how I float them. I was also trying to add a hover over pause - unhover resume but was coming up with a bunch of errors I was wondering if somebody could help me. I set it up in a jsfiddle here: http://jsfiddle.net/r3QkE/

Here’s the actual code:

<!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" xml:lang="en" lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {

(function($) {
        $.fn.textWidth = function(){
             var calc = '<span style="display:none">' + $(this).text() + '</span>';
             var width = $('body').find('span:last').width();
            return width;

        $.fn.marquee = function(args) {
            var that = $(this);
            var textWidth = that.textWidth(),
                offset = that.width(),
                width = offset,
                css = {
                    'text-indent' : that.css('text-indent'),
                    'overflow' : that.css('overflow'),
                    'white-space' : that.css('white-space')
                marqueeCss = {
                    'text-indent' : width,
                    'overflow' : 'hidden',
                    'white-space' : 'nowrap'
                args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
                i = 0,
                stop = textWidth*-1,
                dfd = $.Deferred();

			function go() {
                if(!that.length) return dfd.reject();
                if(width == stop) {
                    if(i == args.count) {
                        return dfd.resolve();
                    if(args.leftToRight) {
                        width = textWidth*-1;
                    } else {
                        width = offset;
                that.css('text-indent', width + 'px');
                if(args.leftToRight) {
                } else {
                setTimeout(go, 10);
            if(args.leftToRight) {
                width = textWidth*-1;
                stop = offset;
            } else {
            return dfd.promise();
                $('#ticker .event').marquee();
<style type="text/css">
	<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1>
	<div id="ticker">
		<div class="event">test1</div>
		<div class="event">test2</div>
		<div class="event">test3</div>
		<div class="event">test4</div>

Okay, I think I got it to work, by adding a width property to each event.

Still investigating a hover/unhover option

I have the hover/unhover stopping/starting working now too.

This works great, but the slider is resetting funny, it doesn’t scroll through all the list items but instead just the first two? Do I need to set the marquee width the same as the unordered list?

No, that is a bug with how the original marquee code determined the text width. I’ve updated the code http://jsfiddle.net/cpradio/NYQEL/

<3 Thank you cpardio!