Question

How can i add css border-right after a specific position using javascript. As for example take this :

<div id="test"></div>

<style>
  #test {
    background-color : red;
    height : 30px;
    width : 200px;
  }
</style>

We can add css style using javascript but if i want to add css border-right after 100px in #test then how can i do that. As in the example http://jsfiddle.net/zUxmd/1/ i have added css border using javascript but if i want to add it after a specific px value how can i do it. Any help would be great.

Update :
I have the following div structure

<div id=test>
 <div id="1"></div>
 <div id="2"></div>
<div>

The width for #1 and #2 is calculated in javascript and the sum of the width is set to #test. Suppose now if the total width is 188px i want to visually distinguish where is 100px just like the demo http://jsfiddle.net/zUxmd/2/ prepared by tom. Is this possible in any way just like adding marker to that position. But i dont want to add any extra dummy div.

EDIT :
The demo http://jsfiddle.net/davidThomas/zUxmd/7/ put up by david is exactly what i want. Any better idea would be appreciated.

Answer 1

If I understood correctly, I would add an inner div: http://jsfiddle.net/zUxmd/1/

Html:

<div id="test">
    <div class="inner">
    </div>
</div>​​​​​​​​​

Css:

#test{
 background-color:red;
 height: 30px;
 width: 200px;    
}
#test .inner {
    height: 100%;
    width: 100px;
}

Js:

 $(document).ready(function(){
   $('#test .inner').css('border-right','2px solid blue');
 });

UPDATE

Here is another possibility using background image, the idea is to use a 1px x 1px blue dot, but I couldn’t find that image 😛

http://jsfiddle.net/zUxmd/5/

Html:

<div id="test"></div>​ 

Css:

#test{
  background-color:red;
  height: 30px;
  width: 200px;
}
#test.limit {
  background-image: url("http://www.scratchingpostgazette.com/forum/styles/Blue-Crush/theme/images/blue.gif");
  background-repeat: repeat-y;
  background-position: 100px 0;
}

​
Js:

$(document).ready(function(){
  $('#test').addClass('limit');
});

​