wongadob Posted December 5, 2012 Share Posted December 5, 2012 (edited) Hi, I am trying to create a bar chart using background colours. I generate the HTML when entering the page based on values pulled via AJAX, but that is not the issue. The issue I am having is simply trying to get text on top of the bar. I can create a bar that is X% of the width of the div, but can't then get the text to sit ontop of the bar and the actual value to sit far right so I have. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX - Full width of divItem 1 ValueXXXXXXXXXXXXXXXXXXXXXXXX - this would be the background color bar that would sit under where it says item 1. Hope that is clear. I can get the background colour under item 1 but it sets the whole width so value is floatring right to the end of the bar not the end of the containing div. I have tried using Z-index and set it up as a seperate <span> with the text and value also as seperate spans. My code <div style = 'padding-10px'><span class = 'percentageBar' style='width:5%;'></span><span class ='desc'>My Description</span><span class ='value'>37</span></br></div> Where I have width 5% I actually calculate that width. which could be 0 to 100% of the outer div. Hence may or may not go under the Value at the end but always starts flush with the description. The css is as follows: .percentageBar{ float: left; display: inline-block; z-index: 10; background-color: #c0c0c0; opacity: 0.9; height: 20px;}.desc{ float: left; z-index: 30;}.value{ float: right; z-index: 30;} I would have through becuase they both have different z-index the float left should solve it. I have tried also withy position absolute but then I have to calculate the position of evey entry in the bar chart rather than using padding and breaks etc. Any ideas how to get around this? Thanks Edited December 5, 2012 by wongadob Link to comment Share on other sites More sharing options...
dsonesuk Posted December 5, 2012 Share Posted December 5, 2012 Like this you mean? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(function(){t = setTimeout("timethis()",(1))$(".percentageBar").animate({width: '100%'}, 1000, 'linear')});var timervalue =0;function timethis(){timervalue=((parseInt($(".percentageBar").css('width')))) ;$(".value").html((timervalue))if(timervalue>=100){clearTimeout(t);}else{t = setTimeout("timethis()",(1))}}/*--*//*]]>*/</script><style type="text/css">.percentageBar{ float: left; display: inline-block; /*z-index: 10; with no position, the z-index will not work */ background-color: #c0c0c0; opacity: 0.9; height: 20px;}.desc{position:absolute; z-index: 30; /* with no position, the z-index will not work */left:12px;}.value { float: right; position: absolute; right: 4px; z-index: 30;}.outer_bar {padding:10px 30px 10px 10px; position:relative;}</style></head><body><div class="outer_bar"><span class = 'percentageBar'></span><span class ='desc'>My Description</span><span class ='value'>37</span></br></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now