Customize COLORS on "Form Field Progress Bar"...?

**JohnCC** · 03-04-2011, 05:14 AM

1) Script Title: Form field Progress Bar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...imitinput2.htm

3) Describe problem: How to customize the starting and ending colors for the progress bar?

Hello, I need some help to edit the code for this Form Field Progress Bar.

Apparently the JavaScript code is changing CSS values by R-G-B on the fly, as the progress bar goes from zero to 100%. You can see this on Google Chrome (and, presumably, Safari?) but other browsers (IE6, FireFox etc) only show the progress bar as the final, solid color the whole time it's increasing.

But the problem is... on Chrome, in my website layout, the starting color as it is now, does not really work well: It's too faint and does not go with the rest of the page design. The final RED color is OK, but starting out as it is with the faint blue-ish CCFFFF doesn't really work for me

What I'd like to be able to do is manually set the starting and ending colors myself, just with simple CSS values, hopefully. This fancy method of setting the color by CSS using Javascript on the fly in this kind of element.style override thing is too complex for my understanding of all of this stuff

Any suggestions for code changes anyone here can provide, much obliged...

-JC

P.S. Update: the line in the code that I think controls this seems to be:

Code:

function setcolor(obj,percentage,prop){
    obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}

...where the RGB values are being changed along with the percent variable as it increases. But as far as how to set this so that the actual colors I want to end up with are generated, I can't seem to grok that. I'm not used to doing this as RGB, so... kinda clueless.

P.P.S. Any idea why it's working different in Chrome vs Firefox/IE etc? Just curious...

**Nile** · 03-06-2011, 12:52 AM

Instead, try something along the lines of:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Untitled</title>
	<link href="styles/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
	<script type="text/javascript">
	$.fn.typer = function(){
		var progress = $("#"+$(this).attr('id')+"-progress");
		progress.append("<div id='"+$(this).attr('id')+"-progress-count' class='progress'></div><span id='"+$(this).attr('id')+"-progress-ussage'>Ussage: ... </span>");
		var limit = $(this).attr('maxlength');
		$(this).keydown(function(){
			$("#"+$(this).attr('id')+"-progress #"+$(this).attr('id')+'-progress-count').animate({
				'width': (($(this).val().length/limit) * parseInt(progress.css('width')))+"px",
				'opacity': $(this).val().length/(limit/1.3)
			}, 100);
			$("#"+$(this).attr('id')+"-progress #"+$(this).attr('id')+'-progress-ussage').html("Ussage: %"+Math.floor(($(this).val().length/limit)*100));
		});
	};
	</script>
</head>
<body>
	<div id="page-wrap">
		<div id="text-wrap">
			<textarea id="textarea" rows="5" cols="40" maxlength="20"></textarea>
			<div id="textarea-progress" class="typer"></div>
		</div>
	</div>
	<script type="text/javascript">
	$("#textarea").typer();
	</script>
</body>
</html>

style.css

Code:

#page-wrap {
	width: 90%;
	margin: 50px auto;
}
div.typer {
	width: 500px;
	height: 50px;
	position: relative;
	border: 1px solid #000;
}
div.typer div.progress {
	height: 50px;
	position: absolute;
	background: #00ffff;
	width: 20px;
}
div.typer span {
	color: #fff;
	line-height: 50px;
	position: absolute;
	z-index: 100;
}

**JohnCC** · 03-06-2011, 07:14 PM

Hi there: thanks for that, looks interesting too but unfortunately does not seem to work in older browsers, should it? I checked your code here (just quick test) and it only worked in Chrome for me...

Anyway, I decided to just simplify the original code like this:

Code:

function setcolor(obj,percentage,prop){
    obj.style[prop] = "rgb(80%,1%,1%)";
}

...hard coding the RGB calculation line to just stay RED everywhere (since it seemed to do that anyway in everything except Chrome). So at least it's consistent now and I can tweak the red color if necessary.

Good enough. Thanks again

-JC

**Nile** · 03-06-2011, 07:29 PM

No problem,

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"

Thread: Customize COLORS on "Form Field Progress Bar"...?

Thread Tools

Search Thread

Customize COLORS on "Form Field Progress Bar"...?

Bookmarks

Bookmarks

Posting Permissions