2

I am currently creating a Custom ProgressBar using several Divs. The width of the "fill" div is handled by javascript in the backend.

The problem is that when the fill div has a width of 0px, the border is still visible.

<div id="SHyxPcLY" style="opacity: 1; visibility: visible;" class="progressbar JLUI_ProgressBar">
<div class="fill" style="width: 80px;">&nbsp;</div>
<div class="track" style="width: 135px;">&nbsp;</div>
</div>
<br/>
<br/>
<div id="SHyxPcLa" style="opacity: 1; visibility: visible;" class="progressbar JLUI_ProgressBar">
<div class="fill" style="width: 0px;">&nbsp;</div>
<div class="track" style="width: 135px;">&nbsp;</div>
</div>

http://jsfiddle.net/woz85cu7/

I am looking for a CSS only solution. I do not have access to the javascript backend as it is handled by Xojo WebApps.

JeremK
  • 36
  • 1
  • 4
  • Pretty sure this is not possible via CSS. – Ruddy Feb 05 '15 at 10:31
  • you'd only be able to do this with css if there was some state change on a parent element to show that the bar was empty/had no width. – atmd Feb 05 '15 at 10:32
  • If you are already using javascript to handle the "fill" `width` just had a condition to set `display: none` when the `width` is `0px`. – Rui Carneiro Feb 05 '15 at 10:37
  • @Ruddy it is possible with CSS: [codepen here](http://codepen.io/defo550/pen/PwOwJK); however I do agree with Rui Carneiro, if you are already using javascript, just use javascript to add a class to remove the border when there is no width. – defo550 Feb 05 '15 at 12:46
  • Unfortunately using Xojo to develop a WebApp, the javascript is handled internally by the App. I do not have any event when the Value of the Progressbar is changed. – JeremK Feb 05 '15 at 14:32

0 Answers0