0

I made a box in css and what i want that box to do is basically spin. However, I need the slider to control the speed of the box. I dont know why it doesnt work. Can someone help me please?
This is my html code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="as4.css" />
<script type="text/javascript" src="as4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>


<body>
    <div id="box">
        <p id="text">Use the slider to control speed of me!</p>
    </div>
    <div id="control">
        <input id="controlo" type="range" min="10" max="50" step="5" value="25" />
    </div>
</body>
</html>

This is my Javascript

var cur = 0;

function doit() {
    var speed = +$("#controlo").val();
    cur = (cur + speed);
    $("#box").css("-webkit-transform", "rotate(" + cur + "deg)");
}

setInterval(doit, 100);

And this is my CSS

body{
    text-align:center;
}

#box{
    display:block;
    width:150px;
    margin:150px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:red;
    -webkit-transition: -webkit-transform 1.5s linear;
}

.eg {
 -webkit-transform: rotate(360deg);   
}
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by fobos
0

Im testing it in chrome and its working just fine, but firefox is a no go. what browser are you using?
Here is the link to Github html5slider for firefox. Just remember to have some sort of code to identify the browser so it can properly be displayed.

Click Here

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.