FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Gradient Creator creation problems

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


morfeusman
I am having some trouble with a javascript gradient creator i made.

I doesn't seem to be triggering the function but i don't know why.
It would be really great if anyone could hep me.

Code:
<html>
<head>
<script type="text/javascript">

function createit(w,h,color)
{
var g1 = "<div style='position:relative; color:";

var g2 = "'>";

var g3 = "<div style='position:absolute;width:";

var g4 = "px;";

var g5 = "height:";

var g6 = "px;background-color:";

var g7 = ";z-index:-1;'></div>";

var g8 = "<div style='position:absolute;width:";

var g9 = "px;height:";

var g10 = "px;Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=200);background-color:";

var g11 = ";z-index:-1;'></div></div>";

var gradient = " + g1 + " + color + " + g2 + " + g3 + " + w + " + g4 + " + g5 + " + h + " + g6 + " + color + " + g7 + " + g8 + " + w + " + g9 + " + h + " + g10 + " + color + " + g11 + ";

document.write("<h1> Gradient Creator</h1>
<form name="gform">
<p>Height:<input type="text" name="gh" />
width:<input type="text" name="gw" />
color:<input type="text" name="gc" /></p>
<input type="button" value="submit" onclick="createit(document.gform.gw.value,document.gform.gh.value,document.gform.gc.value)" />" + gradient + ");

}

</script>
</head>
   <body>
<center>
<h1> Gradient Creator</h1>
<br />
<form name="gform">
<p>Height:<input type="text" name="gh" />
<br />
Width:<input type="text" name="gw" />
<br />
Color:<input type="text" name="gc" /></p>
<br />
<input type="button" value="submit" onclick="createit(document.gform.gw.value,document.gform.gh.value,document.gform.gc.value)" /></center>

   </body>
</html>


Please help me
Thanks
blueray
For my testing.
You have three place to correct.

1.) the two element at the place and with same color. It will overlap each other.
2.) you do not write the grdiant variable
3.) you should not place html element inside script element.
morfeusman
A couple of questions/comments.

What is "the two element"?

I did right the gradient variable,

Code:
document.write("<h1> Gradient Creator</h1>
<form name="gform">
<p>Height:<input type="text" name="gh" />
width:<input type="text" name="gw" />
color:<input type="text" name="gc" /></p>
<input type="button" value="submit" onclick="createit(document.gform.gw.value,document.gform.gh.value,document.gform.gc.value)" />" + gradient + ");


and i put the html elemements into the script so i can actualy make the script work.

I am not trying to create a gradient, i am trying to create a gradient creator.

Do you have any other suggestions? or could you expound upon what you have already said?(i am not sure what you were actually trying to say)
blueray
I'am sorry that I missed something about the code above. (multiple-line output)
And yes I saw you are actually printed out the data on the screen.

But here are some questions.
Why you enclosed the js vars inside a double-quote ? like this,

Code:

var gradient = " + g1 + " + color + " + g2 + " + g3 + " + w + " + g4 + " + g5 + " + h + " + g6 + " + color + " + g7 + " + g8 + " + w + " + g9 + " + h + " + g10 + " + color + " + g11 + ";


This seems to be something like this,
Code:

var gradient = g1  + color + g2 ... etc.



Also, You have two div element that it is overlapped each other and with both the same background-color and absolute position from input.

If you try to remove the first one. You should be able to see the gradient on the screen.
(the g3 - g7)
morfeusman
Thanks!
(the only reason the gradient shows is because of the double div.)
Related topics
How did the universe come to be, if there is no God?
Webpage Design Programs
science vs. religion
The Oldest Religion
I have seen the GOD!
Does God exist?
Religion: The Root of All Evil?
WILL universe ever end?		Philosophy.
Intelligent Design - Science or Religion?
Temporary suspension for Account Creation
Proof god exists
Software for Music scores and player
The Big Bang Theory: Flauds..it didn't happen!
Creation Vs Evolution + Islam
Frequent problems with mysql		Site not found
Facing Many Problems
New forum area (computer problems)
[TUTOR] A Short Intro to GD
Windows Tips&tricks!
Problems With Index Page
Tieskevo's HOW TO MAKE AN REAL NICE LAYOUT TUTORIAL
How the GS Emblem was born?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.