Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jul 2006
    Location
    Aligarh,India
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default i'm new here and i need help!

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 07-20-2006 at 06:24 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    Aligarh,India
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Jul 2006
    Location
    Aligarh,India
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>');
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •