Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Mixing Css with Javascript

Status
Not open for further replies.
pegazaus

pegazaus

Instructor
Aug 16, 2005
22
SE
Hello

I'm creating a home page that allow users to change it layout. My layout is defined in CSS form i the <head> tag
Code: 
.
.
<head>
<style type="text/css">
        td.mintd {font-family:Verdana;
                  font-weight:normal;
                  font-size: 12px;
                  color:rgb( 255 ,255 ,255);
                  text-align:left;
                  border-style:solid;
                  border-width:2px 2px 1px 2px;
                  border-color:black;
                  background-color:rgb( 30, 90, 140 );
                  text-decoration: none;
                  width:45%
            }
    </style>
</head>
then I have a table with forms in it that are supposed to let the user change the font color, style wieght exec.
Code: 
<body>
  .
  .
 <table>
  </tr>
  <td id="mintd">
   .
   .
   .  (here lies things that are supposed to be changed)
   .
  </td>
  <td>
   ..
Enter a en new Color and press button (ex: while or rgb( 255, 255, 255 ) )
<form > 
<input type="button" onclick="somefunction()" value="Change bgcolor"><input type="text" name="bgc">
</form>
Enter a en new Font and press button (ex: Ariel)
<form>
<input type="button" onclick="somefunction()" value="Change fontface"><input type="text" name="bfface">
</form>
  ..
  ..
  </td>
  </tr>
 <table>
</body>
for exemple:
The user is supposed to choose a font-face and type it in the "bfface" input then press the "Change fontface" button. The changes are supposed to happen in the cell <td class="mintd"> ..</td>

I'm actually very new to javascript and I dunno how to do this.I know it has something to do with some DOM-tree but I have no idea about it.
Can anyone help me, like provide me with a function so I use it a prototype or maybe redirecte me to some good URLs where I can find similar stuff.

The most important thing it that the script has to work on "Firefox browser" ("document.all" does not work with Firefox)

I 'm greatfull in advanced to all people who are willing to help
 
Sort by date Sort by votes
This should work:

Code: 
<input type="button" onclick="document.getElementById('mintd').style.fontFamily = this.form.bfface.value;" value="Change fontface">

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Incndentally, your table cell has an ID of "mintd", not a class... so this in your original CSS:

Code: 
td.mintd

is incorrect, and should read:

Code: 
td#mintd

Also, you might want to correct the spelling of "Ariel" (it should be "Arial").

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hello again

I have tried the code with firiefox
Code: 
<input type="button" onclick="document.getElementById('mintd').style.font-family = this.form.bfface.value;" value="Change fontface">

But I got the following error:

erro: invalid assignment left-hand side
code:
document.getElementById('mintd').style.font-family=this.form.bfface.value;
-----------------------------------------------------------^

It did not work on IE either.

(btw I changed "fontFamily" to "font-family" because i was receiving the following error: document.getElementById("mintd") has no properties)

Any suggestions

 
Upvote 0 Downvote
"font-family" is wrong, which is why I specifically gave you "fontFamily".

The error must be due to something else on your page. Maybe you have more than one element with the id "mintd" (not allowed - IDs MUST be unique).

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
No I don't have any other Id it's the only id I have actually.
I made the changes you talked about. Now I don't see any error :).
But I see no changes either when I fill in a new font and press the button. Is there supposed to be some kind of refresh os so?
 
Upvote 0 Downvote
with that last suggestion, nothing happened, No error no reaction

Here is the full code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>
   <head>
    <title>HTML file / Elie </title>
              <!--      script Delen    -->
    <script src="min_script.js"> </script>
           <!--      script end    -->
           <!--      CSS Delen    -->
    <style type="text/css">
        td#mintd {font-family:Verdana;
                  font-weight:normal;
                  font-size: 12px;
                  color:rgb( 255 ,255 ,255);
                  text-align:left;
                  border-style:solid;
                  border-width:2px 2px 1px 2px;
                  border-color:black;
                  background-color:rgb( 30, 90, 140 );
                  text-decoration: none;
                  width:45%
            }
</style>

          <!--      CSS END  -->
  </head>
  
<body onload="browser_detect()" bgcolor="#aac3dc">
<center>
<h1 id="sotti" style="font-face:Verdana; color:rgb( 30, 90, 140 )" > Welcom to my home page</h1>
</center>
<table width="100%" cellSapcing="0" border="0">
<tr>
<td id="mintd">
<form action="myPhp.php" method="POST">
<pre>
Enter your name    : <input type="text" name="name">
Enter your age     : <input type="text" name="age">

Choose a Nickname  : <input type="text" name="nickname">

Choose your gender : <input type="radio" name="sex"  value="male"> male
                     <input type="radio" name="sex" value="female">female

Sign my guest book:
<textarea rows="10" cols="50" wrap="physical">
                     \\|//
                     (@ @)
 ---------------oOO---(_)---OOo---------------
 :               Hello my friend             :
 : Write your text here ...                  :
 :                                           :
 ---------------------------------------------
                    |__|__|
                     || ||
                    ooO Ooo
</textarea>

<input type="submit" name="button"  value="send it">
</pre>
</form></td>
<td>
Enter a en new Color and press button (ex: while or rgb( 255, 255, 255 ) )
<form >
<input type="button" onclick="document.getElementById('mintd').style.backgroundc=this.form.bgc.value;" value="Change bgcolor"><input type="text" name="bgc">
</form>
Enter a en new Font and press button (ex: Arial)
<form>
<input type="button" onclick="document.getElementById('mintd').style.fontFamily =this.form.bfface.value;" value="Change fontface" value="Change fontface"><input type="text" name="bfface">
</form>
Enter a en new Font-Size and press button (ex: 18px)
<form>
<input type="button" onclick="" value="Change fontsize"><input type="text" name="bfsize">
</form>
Enter a en new Font-style and press button (ex: bold)
<form>
<input type="button" onclick="" value="Change fontstyle"><input type="text" name="bfstyle">
</form>
Enter a en new Font-decoration and press button (ex: underline)
<form>
<input type="button" onclick="" value="Change fontdecore"><input type="text" name="bfdecore">
</form>
Enter a en new Border-style and press button (ex: solide)
<form>
<input type="button" onclick="" value="Change borderstyle"><input type="text" name="bbrstyle">
</form>
Enter a en new Border-width and press button (ex:2px 2px 2px 2px )
<form>
<input type="button" onclick="" value="Change borderwidth"><input type="text" name="bbrwidth">
</form>
Enter a en new Border-color and press button (ex: while or rgb( 255, 255, 255 ) )
<form>
<input type="button" onclick="" value="Change bordercolor"><input type="text" name="bbrcolor">
</form>
</td>
</tr>
</table>
</body>
</html>

It's just a simple guest-book site where info will be handled with Php. The Php file is not created yet.
"min_script.js" has only one function and there is no problem with it . It detectes the browser, I think you can easely guess what its made off.

My browser is: Firefox 1.0.4 and is based on Netscape in the background. My OS is winXP.
Hope I provided all info that you might be usefull.
Thx for the help you are providing :)
 
Upvote 0 Downvote
Aaah - the wrong element was being targetted. If you change your body tag to be:

Code: 
<body onload="browser_detect(); canvas=document.getElementById('mintd').getElementsByTagName('textarea')[0];" bgcolor="#aac3dc">

Then remove all the form tags inbetween the input boxes (otherwise the values would not be submitted with the text, so you would not be able to pick up on them), and replace then with DIV elements for styling.

After that, move your existing form tag to right after the body (and the end one to right before the close body)... this will encompass all form elements.

Use this for your inputs:

Code: 
<td>
	<div>
		Enter a en new Color and press button (ex: while or rgb( 255, 255, 255 ) )
		<input type="button" onclick="document.getElementById('mintd').style.backgroundc=this.form.bgc.value;" value="Change bgcolor"><input type="text" name="bgc">
	</div>
	<div>
		Enter a en new Font and press button (ex: Arial)
		<input type="button" onclick="canvas.style.fontFamily = this.form.bfface.value;" value="Change fontface" value="Change fontface"><input type="text" name="bfface">
	</div>
	<div>
		Enter a en new Font-Size and press button (ex: 18px)
		<input type="button" onclick="canvas.style.fontSize = this.form.bfsize.value;" value="Change fontsize"><input type="text" name="bfsize">
	</div>
	<div>
		Enter a en new Font-style and press button (ex: bold)
		<input type="button" onclick="" value="Change fontstyle"><input type="text" name="bfstyle">
	</div>
	<div>
		Enter a en new Font-decoration and press button (ex: underline)
		<input type="button" onclick="" value="Change fontdecore"><input type="text" name="bfdecore">
	</div>
	<div>
		Enter a en new Border-style and press button (ex: solide)
		<input type="button" onclick="" value="Change borderstyle"><input type="text" name="bbrstyle">
	</div>
	<div>
		Enter a en new Border-width and press button (ex:2px 2px 2px 2px )
		<input type="button" onclick="" value="Change borderwidth"><input type="text" name="bbrwidth">
	</div>
	<div>
		Enter a en new Border-color and press button (ex: while or rgb( 255, 255, 255 ) )
		<input type="button" onclick="" value="Change bordercolor"><input type="text" name="bbrcolor">
	</div>
</td>

I've made a start on the font family and font size for you.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hello again

I was actually thinking that the changes should affect everything between <td id=mindt> and <td> (I mean eveything in the first cell).
I'm glade you taught me how to target on "textarea", I'm learning great things from you.

I checked your page and it's awsome, I wonder how deep you are in to Javascript

Thx for your great help
 
Upvote 0 Downvote
I tried the last solution and I got the following error

error:this.form has no properties


If your're not tierd or bord, I appreciate all help
 
Upvote 0 Downvote
this is how the code looks like now:
Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>
   <head>
    <title>HTML file / Elie Assaf</title>
              <!--      script Delen    -->
    <script src="min_script.js"> </script>
           <!--      script end    -->
           <!--      CSS Delen    -->
    <style type="text/css">
        td#mintd {font-family:Verdana;
                  font-weight:normal;
                  font-size: 12px;
                  color:rgb( 255 ,255 ,255);
                  text-align:left;
                  border-style:solid;
                  border-width:2px 2px 1px 2px;
                  border-color:black;
                  background-color:rgb( 30, 90, 140 );
                  text-decoration: none;
                  width:45%
            }
</style>

          <!--      CSS END  -->
  </head>
  
<body onload="browser_detect(); canvas=document.getElementById('mintd').getElementsByTagName('textarea')[0];" bgcolor="#aac3dc">
<center>
<h1 style="font-face:Verdana; color:rgb( 30, 90, 140 )" > Welcom to my home page</h1>
</center>
<table width="100%" cellSapcing="0" border="0">
<tr>
<td id="mintd">
<form action="myPhp.php" method="POST">
<pre>
Enter your name    : <input type="text" name="name">
Enter your age     : <input type="text" name="age">

Choose a Nickname  : <input type="text" name="nickname">

Choose your gender : <input type="radio" name="sex"  value="male"> male
                     <input type="radio" name="sex" value="female">female

Sign my guest book:
<textarea rows="10" cols="50" wrap="physical">
                     \\|//
                     (@ @)
 ---------------oOO---(_)---OOo---------------
 :               Hello my friend             :
 : Write your text here ...                  :
 :                                           :
 ---------------------------------------------
                    |__|__|
                     || ||
                    ooO Ooo
</textarea>

<input type="submit" name="button"  value="send it">
</pre>
</form>
</td>
<td>
    <div>
        Enter a en new Color and press button (ex: while or rgb( 255, 255, 255 ) )
        <input type="button" onclick="document.getElementById('mintd').style.backgroundc=this.form.bgc.value;" value="Change bgcolor"><input type="text" name="bgc">
    </div>
    <div>
        Enter a en new Font and press button (ex: Arial)
        <input type="button" onclick="canvas.style.fontFamily = this.form.bfface.value;" value="Change fontface" value="Change fontface"><input type="text" name="bfface">
    </div>
    <div>
        Enter a en new Font-Size and press button (ex: 18px)
        <input type="button" onclick="canvas.style.fontSize = this.form.bfsize.value;" value="Change fontsize"><input type="text" name="bfsize">
    </div>
    <div>
        Enter a en new Font-style and press button (ex: bold)
        <input type="button" onclick="" value="Change fontstyle"><input type="text" name="bfstyle">
    </div>
    <div>
        Enter a en new Font-decoration and press button (ex: underline)
        <input type="button" onclick="" value="Change fontdecore"><input type="text" name="bfdecore">
    </div>
    <div>
        Enter a en new Border-style and press button (ex: solide)
        <input type="button" onclick="" value="Change borderstyle"><input type="text" name="bbrstyle">
    </div>
    <div>
        Enter a en new Border-width and press button (ex:2px 2px 2px 2px )
        <input type="button" onclick="" value="Change borderwidth"><input type="text" name="bbrwidth">
    </div>
    <div>
        Enter a en new Border-color and press button (ex: while or rgb( 255, 255, 255 ) )
        <input type="button" onclick="" value="Change bordercolor"><input type="text" name="bbrcolor">
    </div>
</td>
</tr>
</table>
</body>
</html>

The following error accur when trying yo change the bgcolor or the fontface:

Fel: this.form has no properties
[color]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
161
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
284
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
250
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top