Jquery malsup progressbar for cycle plugin?

JavaScript
1

malsup has kindly created this progressbar but hasn’t explained how to implement it into his cycle plugin.
http://jquery.malsup.com/test/progress.html
http://jquery.malsup.com/cycle/

I am trying to get the progressbar to reset if the user clicks next/previous slide. Can anyone please explain on how to do this? This is what I am using:


$(function() {
//cycle
    $('#pause').click(function() { 
        $('#articles').cycle('pause'); 
    });
//cycle    
        $('#articles').cycle({
            sync: false, 
            fx:      'fade',
            speed:    500,
            timeout: 6000,
            prev:    '#previous',
            next:    '#next',
            pager:   '#nav'
        });
//progressbar
        var v = 0;
        setInterval(function() {
            if (v > 99)
                v = 0;
            $('#progressbar').progressbar('option', 'value', ++v);
        }, 58);
//progressbar
    $("#progressbar").progressbar({
        change: function(e, ui) {
            var $this = $(this), val = $this.progressbar('option', 'value');
            $this.find('#progressvalue').html(val+'%');
        }
    });
    
});
2

Might help if I provide the full code of what I am working with:


<!DOCTYPE HTML>
<html dir="ltr" lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js?ver=1.4.2"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<style>
#progressbar { position: relative; width: 300px }
#progressvalue { position: absolute; width: 100&#37;; height: 100%; color: #333; text-align: center; }
li{display:inline;margin-right:5px;}
</style>
<script>
$(function() {
//buttons	
	$('#btns').after('<ul id="nav"></ul>');
    $('#pause').click(function() { 
        $('#articles').cycle('pause'); 
    });
//resume
    $('#next, #previous').click(function (event) {
        event.preventDefault();
        $('#articles').cycle('resume');
    });
//cycle
    $('#articles').cycle({
    	sync: false, 
    	fx:      'fade',
        speed:	500,
        timeout: 6000,
        prev:    '#previous',
        next:    '#next',
        pager:   '#nav',
        pagerAnchorBuilder: pagerFactory
    });
    function pagerFactory(idx, slide) {
        var s = idx > 5 ? ' style="display:none"' : '';
        return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
    };	
//progressbar
    var v = 0;
    setInterval(function() {
    	if (v > 99)
    		v = 0;
    	$('#progressbar').progressbar('option', 'value', ++v);
    }, 58);
 	$("#progressbar").progressbar({
		change: function(e, ui) {
			var $this = $(this), val = $this.progressbar('option', 'value');
			$this.find('#progressvalue').html(val+'%');
		}
	});
});	
</script>

</head>
<body>

<ul id="btns">
	<li><a href="#" id="previous" title="previous">previous</a></li>
	<li><a href="#" id="pause" title="pause">pause</a></li>
	<li><a href="#" id="next" title="next">next</a></li>
</ul>
<ul id="nav"></ul>

<div id="articles">
	<div class="article" id="article1"> 
		<h2>first heading</h2>
		<p>text</p>
	</div>
	<div class="article" id="article2">
		<h2>second heading</h2>
		<p>text</p>
		</div>
	<div class="article" id="article3">
		<h2>third heading</h2>
		<p>text</p>
	</div>

</div>

<div id="progressbar">
	<div id="progressvalue"></div>
</div> 

</body>
</html>

In laymans terms;
if next is clicked > reset progress bar
if previous is clicked > reset progress bar
if pause is clicked > pause progressbar

  • if next/previous clicked after pause > resume progress bar

I found other articles on something similar but their methods are way to complicated. I don’t think its that complicated even though I can’t do it :confused:

3

OK this is now fixed please close.