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
3
Replies
4
Views
5 Years
Discussion Span
Last Post by kamyarn
0

You set it only for webkit engine browsers :)
To make it working in Firefox edit your code.

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

and attention Firefox doesn't have range input type, you should implement it with jQuery.
Google it bro.

0

I don't use firefox, i use google chrome and for some odd reason it still doesnt work. idk what seems to be the problem

Edited by cpat258

0

What are your Chrome version and update channel?

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.