jQuery Voting (rating) Slider - Works but has bugs_问答_开发者

jQuery Voting (rating) Slider - Works but has bugs

开发者 https://www.devze.com 2023-01-14 05:23 出处：网络

My problem is I can\'t get this jQuery slider to start from .1 to 10 in .1 increments and end (stop) at 10. Would like to pull this off without jQuery UI or jQuery tools.

My problem is I can't get this jQuery slider to start from .1 to 10 in .1 increments and end (stop) at 10. Would like to pull this off without jQuery UI or jQuery tools.

I plan to have the hidden input value updated using the slider position then a button that says "VOTE".

I appreciate any help with this project. Thanks, Brandon.

I'm trying to limit the slider to only move inside the "slider_container" div.I can't get the box to stop at the left and right?

<HTML>
<HEAD>
<script type="text/javascript">
<!--
$(function() {
    var sliderMouseDown = false;
    var count = 0;
    $("#slider").mousedown(function() {
        sliderMouseDown = true;
    });
    $(document).mousemove(function(evnt) {
        if (sliderMouseDown) {
            count = count + .1;
            $("#vote").html(count);
        }
    });
    $(document).mouseup(function() {
        if (sliderMouseDown)
        {
            $("#slider").focus();
            count = 0;
            sliderMouseDown = false;
        }
    });
});

var x1 = 0;
var drag = false;
$(document).ready(function(e){
$('#slider').mousedown(function(e){
e.preventDefault ();
x1 = e.pageX - parseInt($('#slider').css('left'));
drag = true;
})
$(document).mouseup(function(e){ drag = false; })
$(document).mousemove(function(e){ 
if(!drag) return
$('#slider').css('left',eval(e.pageX - x1)+'px')
})
});

//-->
</script>
<style type="text/css">
#slider_container { background: url(images/rating-slider-bg.jpg) repeat-x; width: 200px; height: 22px; background-color: #ffffff; display:block; position: relative; z-index: 1; }
#slider { background: url(images/rating-slider.jpg) no-repeat; width: 10px; height: 35px; top: -4px; position: absolute; left:0; cursor: pointer; cursor: hand; z-index: 99; }
</style>
</HEAD>
<BODY>
<br><br><br><br>开发者_如何学运维;<br><br>

<center>
<div id="slider_container"><div id="slider"></div></div>
<div id="vote" class="vote"></div>
</center>

</BODY>
</HTML>

See What is the best method to reduce the size of my Javascript and CSS files? for some information about compressing your JavaScript files.