0

I want to modify the height of a div whose title contains (0%)

Here is my HTML Code

<div>

<div class='chartsbar' style="height: 0%; background-color: rgb(7, 134, 205); color: rgb(255, 255, 255); width: 0.9730252100840335%; text-align: left;" title="11-09-2012 - 0 (0%)"></div>

<div class='chartsbar' style="height: 0%; background-color: rgb(7, 134, 205); color: rgb(255, 255, 255); width: 0.9730252100840335%; text-align: left;" title="12-09-2012 - 0 (18%)"></div>


<div class='chartsbar' style="height: 0%; background-color: rgb(7, 134, 205); color: rgb(255, 255, 255); width: 0.9730252100840335%; text-align: left;" title="13-09-2012 - 0 (10%)"></div>

</div>

I've tried like 

$('div.chartsbar[title*="(0%)"]').height('1%');

but no luck

Rakesh Sawant
  • 281
  • 1
  • 6
  • 16
  • I don't think `title` is a valid div attribute. Maybe try using the new `data-` attributes in HTML: http://www.javascriptkit.com/dhtmltutors/customattributes.shtml – mtsvetkov Sep 26 '12 at 10:19
  • 2
    Your JS code is correct. See this [JSFiddle](http://jsfiddle.net/7RJP8/), but problem is in css. For instance, I've added height to wrapper div to make it work. Not sure how percentage height works, so I do not post this as an answer. – Viktor S. Sep 26 '12 at 10:20
  • Check out this jsFiddle I've just created may help get you where you need ot be http://jsfiddle.net/w8adp/4/ – Luke Baughan Sep 26 '12 at 10:41

3 Answers3

0
$('.chartsbar[title="0%"]').css('height','1%');
chokrijobs
  • 761
  • 1
  • 6
  • 10
0
$("div.chartsbar[title*='(0%)']").css('height','100px');

jsFiddle​

JoeFletch
  • 3,820
  • 1
  • 27
  • 36
0

JS code is correct, but you must set some explicit height on your wrapper div. Right now height of wrapper div is 0 and 1% of 0 is still 0. For more extended explanation take a look at this answer

Community
  • 1
  • 1
Viktor S.
  • 12,736
  • 1
  • 27
  • 52