0

I would like to use a simple display cursor as defined in my HTML code below. It displays perfectly but I would like to be able to set the cursor position through a variable.

I have tried several options without success.

Any help would be very appreciated....

CSS:

var-rudpos:-60px;

.trPic {
   width:400px;
   height:15px;
   no-repeat;
}
.trPic .port{
   position:relative;
   top:-0px;
   left: 0px;
   width:200px;
   height:15px;
   background:#ff0000;
   opacity:1;
}
.trPic .starboard{
   position:relative;
   top:-0px;
   left: 201px;
   width:200px;
   height:15px;
   background:#41c921;
   opacity:1;
}
.trPic .zero{
   position:relative;
   top:-2px;
   left: -2px;
   width:4px;
   height:19px;
   background:#0000ff;
   opacity:1;
}
.trPic .cursor{
   position:relative;
   top:-2px
   //left: var(rudpos);
   left: -60px;
   width:4px;
   height:23px;
   background:#000000;
   opacity:1;
 }

HTML:

<div class="trPic">
  <div class="port">
    <div class="starboard">
      <div class="zero">
        <div class="cursor"> </div>
      </div>
    </div>
  </div>
</div>
Rob
  • 14,746
  • 28
  • 47
  • 65
Jf Bogaerts
  • 1
  • 1
    What do you mean by "through a variable?" What are you hoping to achieve? – Brian Jan 04 '15 at 12:28
  • The code does not really illustrate the question, but the question as such is understandable. It is also frequently asked. The problem with closing this as a duplicate is that there are several questions with the same essential content but with variations and with varying and partly outdated answers. Perhaps the best one is http://stackoverflow.com/questions/1875852/define-colors-as-variables-in-css (although it is nominally about naming colors only). – Jukka K. Korpela Jan 04 '15 at 12:48
  • I like to be able to change the "pointer" position (defined as "cursor" in the code) from javascript – Jf Bogaerts Jan 04 '15 at 12:58

4 Answers4

0

You can not define variables in css, instead, you can write LESS and define your variables and use them everywhere and then compile it to css.

Super Hornet
  • 2,839
  • 5
  • 27
  • 55
0
        .trPic .cursor{
          position:relative;
          top:-2px

you forget ; in (top:-2px)

Hasan alattar
  • 347
  • 3
  • 19
0

The only option is to use variables using css preprocessor

3 most popular CSS preprocessor:

Mardzis
  • 760
  • 1
  • 8
  • 21
0

The solution is to refer to the css object from javascript

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
    .trPic{ 
        width:400px; 
        height:15px; 
        no-repeat;
        position:relative; 
        } 
    .trPic .port{
        position:relative;
        top:0px;
        left: 0px;
        width:200px;
        height:15px;
        background:#ff0000;
        opacity:1;
        }
    .trPic .starboard{
        position:relative;
        top:0px;
        left: 201px;
        width:200px;
        height:15px;
        background:#41c921;
        opacity:1;
        }
    .trPic .zero{
        position:relative;
        top:-4px;
        left: -2px;
        width:4px;
        height:23px;
        background:#0000ff;
        opacity:1;
        }
    .trPic .cursor{ 
        position:relative; 
        top:-2px; 
        left: 0px;
        width:8px; 
        height:27px; 
        background:#000000; 
        opacity:1; 
        }

</style>

<body>
<html>
<div id="rudderbox", class="trPic">
<div id ="portbar", class="port">
<div id="starboardbar", class="starboard">
<div id="zerobar", class="zero">
<div id="cursor", class="cursor">
</div>
</div>
</div>
</div>
</div>

</body>
</html>

<script type="text/javascript">

rudcur = -170

var ruddercursor = document.getElementById("cursor");
ruddercursor.style.left = rudcur;


</script>
Jf Bogaerts
  • 1