i'm new here and i need help!

**Shahla** · 07-20-2006, 03:59 AM

1) Script Title: Gradient bar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/gradient.htm

3) Describe problem: i want to type som text 'on' the gradient bar, is it possible to do? if yes then please tell me how to do it

**jscheuer1** · 07-20-2006, 04:43 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Gradient w/overlay Text - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<br>
<script type="text/javascript">

/*
Gradient Bar Script (By Alex Szorkovszky alex@wmresources.com)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
Modified for overlay text in http://dynamicdrive.com/forums by jscheuer1
*/

if (document.all||document.getElementById){
one=new Array();
two=new Array();
var a=10;var b=11;var c=12;var d=13;var e=14;var f=15;


//configure gradient

//set display text (leave empty '' if no text is desired)
var text='<div align="center">Hi there</div>';

//width and height of gradient
var width = 350;
var height = 20;

//no of pixels between colours
var gap = 5;

//0 for horizontal, 1 for vertical
var direction = 0;

//colour number 1 - enter 1st, 3rd and 5th numbers/letters of colour code
one[0]=f;
one[1]=f;
one[2]=0;

//colour number 2 - enter 1st, 3rd and 5th numbers/letters of colour code
two[0]=0;
two[1]=c;
two[2]=0;


//end configuration


if(direction==0) var num = width / gap;
if(direction==1) var num = height / gap;
color2=new Array();
color1=new Array();
diff=new Array();
for(i=0;i<3;i++) {
diff[i] = two[i] - one[i];
diff[i] = diff[i] / num;
}
for(i=0;i<3;i++){
color1[i] = Math.round(diff[i] * Math.pow(10, 0));
if(color1[i] > diff[i])color1[i] = color1[i] - 1;
color2[i] = diff[i] - color1[i];
color2[i] = color2[i] * 15;
color2[i] = Math.round(color2[i] * Math.pow(10, 0));
}
x=new Array();
two[0]=0;
two[1]=0;
two[2]=0;
document.write('<div style="position:relative;width:'+width+';height:'+height+';"><table style="position:absolute;top:0;left:0;z-index:1;" border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'"><tr><td>'+text+'</td></tr></table><table style="position:absolute;top:0;left:0;" border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'">');
if(direction==0) document.write('<tr>');
for(i=0;i<=num;i++) {
if(direction==1) document.write('<tr>');
document.write('<td bgcolor="#');
for(j=0;j<3;j++) {
if(one[j]==a)document.write("a");
if(one[j]==b)document.write("b");
if(one[j]==c)document.write("c");
if(one[j]==d)document.write("d");
if(one[j]==e)document.write("e");
if(one[j]==f)document.write("f");
if(one[j]<10)document.write(one[j]);
if(two[j]==a)document.write("a");
if(two[j]==b)document.write("b");
if(two[j]==c)document.write("c");
if(two[j]==d)document.write("d");
if(two[j]==e)document.write("e");
if(two[j]==f)document.write("f");
if(two[j]<10)document.write(two[j]);
one[j] = one[j] + color1[j];
two[j] = two[j] + color2[j];
if(two[j]>15) {
two[j] = two[j] - 15;
one[j]++;
}
}
if(direction==0) document.write('" width="'+gap+'" height="'+height+'"> </td>');
if(direction==1) document.write('" width="'+width+'" height="'+gap+'"> </td></tr>');
}
document.write('</table></div>');
}

</script>
</body>
</html>

**Shahla** · 07-20-2006, 05:19 AM

Cool! but why is there a line of stars in the background of the text? can that be erased?

what i'm trying to do is using this gradient line as a banner of the webpage i'm trying to design right now....below is the code of what i did....the stars in the background are spoiling the look of the banner

*whines*

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Gradient w/overlay Text - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="1055" height="799">
	<!-- MSTableType="layout" -->
	<tr>
		<td valign="top" colspan="2" height="109">
		<!-- MSCellType="ContentHead" -->
		&nbsp;<script type="text/javascript">

/*
Gradient Bar Script (By Alex Szorkovszky alex@wmresources.com)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
Modified for overlay text in http://dynamicdrive.com/forums by jscheuer1
*/

if (document.all||document.getElementById){
one=new Array();
two=new Array();
var a=10;var b=11;var c=12;var d=13;var e=14;var f=15;


//configure gradient

//set display text (leave empty '' if no text is desired)
var text='<div align="center"><h1>This is cool!</h1></div>';


//width and height of gradient
var width = 400;
var height = 156;

//no of pixels between colours
var gap = 5;

//0 for horizontal, 1 for vertical
var direction = 0;

//colour number 1 - enter 1st, 3rd and 5th numbers/letters of colour code
one[0]=8;
one[1]=8;
one[2]=8;

//colour number 2 - enter 1st, 3rd and 5th numbers/letters of colour code
two[0]=f;
two[1]=f;
two[2]=f;


//end configuration


if(direction==0) var num = width / gap;
if(direction==1) var num = height / gap;
color2=new Array();
color1=new Array();
diff=new Array();
for(i=0;i<3;i++) {
diff[i] = two[i] - one[i];
diff[i] = diff[i] / num;
}
for(i=0;i<3;i++){
color1[i] = Math.round(diff[i] * Math.pow(10, 0));
if(color1[i] > diff[i])color1[i] = color1[i] - 1;
color2[i] = diff[i] - color1[i];
color2[i] = color2[i] * 15;
color2[i] = Math.round(color2[i] * Math.pow(10, 0));
}
x=new Array();
two[0]=0;
two[1]=0;
two[2]=0;
document.write('<div style="position:relative;width:'+width+';height:'+height+';"><table style="position:absolute;top:0;left:0;z-index:1;" border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'"><tr><td>'+text+'</td></tr></table><table style="position:absolute;top:0;left:0;" border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'">');
if(direction==0) document.write('<tr>');
for(i=0;i<=num;i++) {
if(direction==1) document.write('<tr>');
document.write('<td bgcolor="#');
for(j=0;j<3;j++) {
if(one[j]==a)document.write("a");
if(one[j]==b)document.write("b");
if(one[j]==c)document.write("c");
if(one[j]==d)document.write("d");
if(one[j]==e)document.write("e");
if(one[j]==f)document.write("f");
if(one[j]<10)document.write(one[j]);
if(two[j]==a)document.write("a");
if(two[j]==b)document.write("b");
if(two[j]==c)document.write("c");
if(two[j]==d)document.write("d");
if(two[j]==e)document.write("e");
if(two[j]==f)document.write("f");
if(two[j]<10)document.write(two[j]);
one[j] = one[j] + color1[j];
two[j] = two[j] + color2[j];
if(two[j]>15) {
two[j] = two[j] - 15;
one[j]++;
}
}
if(direction==0) document.write('" width="'+gap+'" height="'+height+'">*</td>');
if(direction==1) document.write('" width="'+width+'" height="'+gap+'">*</td></tr>');
}
document.write('</table></div>');
}
//-->
</script></td>
	</tr>
	<tr>
		<td valign="top" height="617">
		<!-- MSCellType="ContentBody" -->
		&nbsp;</td>
		<td valign="top" rowspan="2" width="182">
		<!-- MSCellType="NavBody" -->
		&nbsp;</td>
	</tr>
	<tr>
		<td valign="top" height="73" width="873">
		<!-- MSCellType="ContentFoot" -->
		&nbsp;</td>
	</tr>
</table>
</body>
</html>

**Shahla** · 07-20-2006, 05:33 AM

WOW!!! This Is Soooooooooooo Damn Coooooooooool!! THAX A ZILLION FOR THE HELP!!!

**jscheuer1** · 07-20-2006, 05:33 AM

As happens on very rare occasions, the forum editor put something into the code that wasn't there. I've corrected it in my previous post by using a little trick. But all you need do is remove the two (red highlighted below) *'s from your code and replace them with spaces:

Code:

if(direction==0) document.write('" width="'+gap+'" height="'+height+'">*</td>');
if(direction==1) document.write('" width="'+width+'" height="'+gap+'">*</td></tr>');

Thread: i'm new here and i need help!

Thread Tools

Search Thread

i'm new here and i need help!

Bookmarks

Bookmarks

Posting Permissions