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
  • 3 Replies
  • 893 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kamyarn
Member Avatar for kamyarn

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.

Member Avatar for cpat258

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
Member Avatar for kamyarn

What are your Chrome version and update channel?

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.