barcharts in Jquery problem

Question

jQueryLover -3 Newbie Poster

12 Years Ago

Hello guys i am facing a problem i dont know why. i am upto making barcharts in jQuery but it is displaying in IE not FF.Please Help to fix this problem for me.thanks

i have attacted the file below so you can test in your server.so for the all jQuery and css code in one page.As well i have pasted the code below.

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Dynamic Bar Chart with jQuery and CSS</title>
	<meta name="description" content="Dynamic Bar Chart with jQuery and CSS" />
	<meta name="keywords" content="Dynamic Bar Chart with jQuery and CSS" />
    
    <script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

[B]$(document).ready(function(){
		   
		   
	$('#charts li').each(function(){
								 
		var pc = $(this).attr('title');
		pc = pc > 100 ? 100 :pc;
		$(this).children('.percent').html(pc+ '%');
		
		var ww = $(this).width();
		var len = parseInt(ww, 10) * parseInt(pc, 10) / 100;
		$(this).children('.bar').animate({'width': len + 'px'},1500);						 
								 });
	
	

		   
		   });[/B]
</script>

<style type="text/css">
*{
	margin:0px;
	padding:0px;
	outline:none;
	border:none;
	color:#fff;
}

body{
	font-size:12px;
	line-height:20px;
	background:#111;
	padding:30px 0;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}

#wrapper
{
	width:600px;
	margin:0 auto;
	text-align:left;
}
#charts,#form_values
{
	width:559px;	
}

#charts
{
	list-style:none;
	border-left: solid 1px #666;
	border-bottom:solid 1px #666;
	margin-bottom:20px;
}

#charts li,#chart li span{
	height:20px;
}

#charts li .percent{
	width:30px;
	position:absolute;
	top:0;
	right:-40px;
	text-align:right;
}

#charts li{
	position:relative;
	display:block;
	width:554px;
	margin:0 0 5px 5px;
	text-align:left;
}

#charts li .bar{
	width:0;
}

.red .bar{
	background:red;
}

.blue .bar
{
	background:blue;
}

.yellow .bar{
	background:yellow;
}

.orange .bar{
	background:orange;
}
.purple .bar{
	background:purple;
}

.field{
	padding:3px;
	width:50px;
	border:solid 1px #000;
	float:left;
	margin-right:5px;
	color:#333;
}

</style>

	
</head>


<body>


<section id="wrapper">


<ul id="charts">
		<li title="25" class="red">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="80" class="blue">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="65" class="yellow">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="50" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="100" class="purple">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
	</ul>

<form id="form_values" action="" method="post">

<input type="text" id="li_1" value="25" class="field" />
<input type="text" id="li_2" value="80" class="field" />
<input type="text" id="li_3" value="65" class="field" />
<input type="text" id="li_4" value="50" class="field" />
<input type="text" id="li_5" value="100" class="field" />
</form>

</section>



</body>
</html>

javascript jquery

barchart.html (2.9 KB)

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Dynamic Bar Chart with jQuery and CSS</title>
	<meta name="description" content="Dynamic Bar Chart with jQuery and CSS" />
	<meta name="keywords" content="Dynamic Bar Chart with jQuery and CSS" />
    
    <script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
		   
		   
	$('#charts li').each(function(){
								 
		var pc = $(this).attr('title');
		pc = pc > 100 ? 100 :pc;
		$(this).children('.percent').html(pc+ '%');
		
		var ww = $(this).width();
		var len = parseInt(ww, 10) * parseInt(pc, 10) / 100;
		$(this).children('.bar').animate({'width': len + 'px'},1500);						 
								 });
	
	

		   
		   });
</script>

<style type="text/css">
*{
	margin:0px;
	padding:0px;
	outline:none;
	border:none;
	color:#fff;
}

body{
	font-size:12px;
	line-height:20px;
	background:#111;
	padding:30px 0;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}

#wrapper
{
	width:600px;
	margin:0 auto;
	text-align:left;
}
#charts,#form_values
{
	width:559px;	
}

#charts
{
	list-style:none;
	border-left: solid 1px #666;
	border-bottom:solid 1px #666;
	margin-bottom:20px;
}

#charts li,#chart li span{
	height:20px;
}

#charts li .percent{
	width:30px;
	position:absolute;
	top:0;
	right:-40px;
	text-align:right;
}

#charts li{
	position:relative;
	display:block;
	width:554px;
	margin:0 0 5px 5px;
	text-align:left;
}

#charts li .bar{
	width:0;
}

.red .bar{
	background:red;
}

.blue .bar
{
	background:blue;
}

.yellow .bar{
	background:yellow;
}

.orange .bar{
	background:orange;
}
.purple .bar{
	background:purple;
}

.field{
	padding:3px;
	width:50px;
	border:solid 1px #000;
	float:left;
	margin-right:5px;
	color:#333;
}

</style>

	
</head>


<body>


<section id="wrapper">


<ul id="charts">
		<li title="25" class="red">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="80" class="blue">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="65" class="yellow">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="50" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<li title="100" class="purple">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
	</ul>

<form id="form_values" action="" method="post">

<input type="text" id="li_1" value="25" class="field" />
<input type="text" id="li_2" value="80" class="field" />
<input type="text" id="li_3" value="65" class="field" />
<input type="text" id="li_4" value="50" class="field" />
<input type="text" id="li_5" value="100" class="field" />
</form>

</section>



</body>
</html>

Edited 12 Years Ago by jQueryLover because: n/a

2 Contributors
2 Replies
141 Views
3 Days Discussion Span
Latest Post 12 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

12 Years Ago

Could be the line feed in the ...googleapis/jquery... url.

If that doesn't fix it, try this:

$(document).ready(function(){
	$('#charts li').each(function(){
		var $this = $(this);
		var pc = Math.max(0, Math.min(100, parseInt($this.attr('title'), 10)));
		var len = $this.width() * pc / 100;
		$this.find('.percent').html(pc + '%').end().find('.bar').animate({width:len}, 1500);
	});
});

I haven't really changed much, just tidied up.

If that doesn't fix it then tidy the CSS so each directive is of the form:

#xxxxx {
    .......
}

Note the space between selector and opening curly-brace. This can be an issue with some directives in some browsers. Probably a thing of the past now but this is still the safe way to write CSS.

Airshow

Edited 12 Years Ago by Airshow because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-12-22T09:06:49+00:00

Aha, I think you will find that spans won't take a width in anything other than IE.

Therefore set width of an embedded img instead.

$(document).ready(function(){
	$('#charts li').each(function(){
		var $this = $(this);
		var pc = Math.max(0, Math.min(100, parseInt($this.attr('title'), 10)));
		var len = $this.width() * pc / 100;
		$this.find('.percent').html(pc).end().find('img').animate({width:len}, 1500);
	});
});

.bar img {
	width: 1px;
	height: 1px;
}

For each bar:

<li title="25" class="red">
	<span class="bar"><img src="1.gif"></span>
	<span class="percent"></span>
</li>

Works a treat in Opera.

Airshow