SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Quote function

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quote function

    I have made a small function with javascript/jquery.
    My objective was to have a set of quotes that are being showed one at a time.

    When all quotes have been shown it starts all over again in the same order. To my surprise it actually worked quite fine :-)

    I would like to get some feedback from all your scripts wizards. Im not a javascript/jquery gury.

    So any feedback on regarding things i could do to improve my script are appreciated

    My funktion looks like this

    Code:
    jQuery(document).ready(function($) {
    
    if (("#quotes").length > 0) {
    
    $('#quotes li').hide();
    var array = $("#quotes li").toArray(); 
    var count = array.length;
    var c = 0;
    var n = '';
    
    function countdown() {
      setTimeout(countdown, 5000);
      if(c == count) c = 1;
      if(c !== 0) n = c - 1;
      $('#quotes li.random-' + c).show();
      $('#quotes li.random-' + n).hide();
    
    c++;
    
    }
       countdown();
    
    }

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I came to the conclussion that my own script stank so i found a proper one written by Marco Kuiper

    Code:
    (function($) {
    		  
      $.quote_rotator = {
        defaults: {
          rotation_speed: 5000,
          pause_on_hover: true,
          randomize_first_quote: false
        }
      }		  
    		  
    $.fn.extend({
            quote_rotator: function(config) {
    
                var config = $.extend({}, $.quote_rotator.defaults, config);
    
                return this.each(function() {
                    
                    // cache for selector performance
                    var quote_list = $(this);
                    var list_items = quote_list.find('li');
                    
                    // prevent dummies from setting the rotation speed too fast
                    var rotation_speed = config.rotation_speed < 2000 ? 2000 : config.rotation_speed;                   
    
                    // hide all the quotes
                    list_items.hide();
    
                    // apply active to random quote if specified
                    if (config.randomize_first_quote) {
                      var random = Math.floor( Math.random() * (list_items.length) );
                      $(list_items[random]).addClass('active');
    
                    // otherwise apply active to first quote unless already applied in the html
                    } else if (! (quote_list.find('li.active')).length ) {
                        $('li:first', quote_list).addClass('active');
                    };
                    
                    // show the active quote 
                    quote_list.find('li.active').show();
                    
                    // activate quote rotation
                    var rotation_active = true;
    
                    // stop quote rotation on hover
                    quote_list.hover(function() {
                        if (config.pause_on_hover) {rotation_active = false};
                    }, function() {
                        rotation_active = true
                    });
                    
                    // rotate quotes
                    setInterval(function(){
                        if (rotation_active) {
                            
                            var active_quote = quote_list.find('li.active');        
                            var next_quote =  active_quote.next().length ? active_quote.next() : quote_list.find('li:first');
    
                            // rotate quotes with fade effect
                            active_quote.animate({
                                opacity: 0 // fade out active quote
                            }, 1000, function() {
                                active_quote.hide().css('opacity', 1); // hide and reset opacity
                                next_quote.fadeIn(1000); // fade in next quote
                            });
                            
                            // swap the class to prepare for the next fade effect interal
                            active_quote.removeClass('active');
                            next_quote.addClass('active');
                        };
                        
                    }, rotation_speed);
                    
                })
            }
        })
    
    })(jQuery);
    HTML Code:
        <ul id="quotes">
            <li>
                <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</blockquote>
                <cite>&mdash; Alabama</cite>
            </li>
            <li>
                <blockquote>Excepteur sint occaecat cupidatat non proident!</blockquote>
                <cite>&mdash; Georgia</cite>
            </li>
            <li>
                <blockquote>Duis aute irure dolor in reprehenderit?</blockquote>
                <cite>&mdash; Illinois</cite>
            </li>
            <li>
                <blockquote>Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
                <cite>&mdash; West Virginia</cite>
            </li>
        </ul>  


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
  •