SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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">
    <head>
    <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>';
                 $('body').append(calc);
                 var width = $('body').find('span:last').width();
                 $('body').find('span:last').remove();
                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) {
                        i++;
                        if(i == args.count) {
                            that.css(css);
                            return dfd.resolve();
                        }
                        if(args.leftToRight) {
                            width = textWidth*-1;
                        } else {
                            width = offset;
                        }
                    }
                    that.css('text-indent', width + 'px');
                    if(args.leftToRight) {
                        width++;
                    } else {
                        width--;
                    }
                    setTimeout(go, 10);
                };
                if(args.leftToRight) {
                    width = textWidth*-1;
                    width++;
                    stop = offset;
                } else {
                    width--;            
                }
                that.css(marqueeCss);
                go();
                return dfd.promise();
            };		
    		$('h1').marquee();
                    $('#ticker .event').marquee();
        })(jQuery);
    });
    </script>
    <style type="text/css">
    .event{float:left}?
    </style>
    </head>
    <body>
    	<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>
    	</div>
    </body>
    </html>

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,813
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Okay, I think I got it to work, by adding a width property to each event.
    http://jsfiddle.net/cbKHD/3/

    Still investigating a hover/unhover option

  3. #3
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,813
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    I have the hover/unhover stopping/starting working now too.
    http://jsfiddle.net/cbKHD/20/

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,813
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    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/

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <3 Thank you cpardio!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •