Member Avatar for cpat258

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
  • 214 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by fobos
Member Avatar for fobos

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.