One more: Online Designer?

[rlhanson]

I'm telling your wife! LOL

[jmarcv]

Design Controls. Just like we did for the color.

CSS Properties to JavaScript Reference

Heres a handy chart to use javascript to change style refs like we did here:
onChange="document.getElementById('cardTemplate'). style.backgroundColor

I assume you have or know how to google for a CSS chart?

Lets move on:
With Checkboxes, we have a little more complicated code

BOLD: <input type="Checkbox" name="BOLDcompanyName" value="yes" onMouseup="document.getElementById('companyName').style.fontWeight=(this.checked ? 'bold' : 'normal');">

Note the onChange is funky in some browsers so we let the user click and when they let go of the mouse button we read.

This is an if/else in JS.
(this.checked ? 'bold' : 'normal')
fontVariant is italic or normal


fontSize .....
This is where a select works better.
... and again, the syntax is not as straightforward as we would like.

FONT: <select name="SIZEcompanyName" onChange="document.getElementById('companyName').style.fontSize=this.options[this.selectedIndex].value;">
  <option value="8pt">8 point</option>
  <option value="10pt">10 point</option>
  <option value="12pt" selected>12 point</option>
</select>

Note the 'selected' option to preselect 12 points. However, you need to put
style="font-size=12pt;"
in your TD to have your initial text show it properly.
Optionally, you can do this as your 1st select option

  <option value="8pt"> -- Choose --</option>

Notice how
this.value
becomes
this.options[this.selectedIndex].value

this.value works in IE, but not in Firefox, because they are Javascript, where IE is JScript.

[rlhanson]

John-Marc,

I have added the option for bold and tried to add the fontVariant for italic but am unable to get this working.

<td width="250"><input name="slogan" id="slogan" type="text" tabindex="6" size="25" maxlength="100" onChange="document.getElementById('sloganS').innerHTML=this.value;" />
      <br />
    Italic: 
      <input type="Checkbox" name="ItalicsloganS" value="yes" onMouseup="document.getElementById('sloganS').style.fontVariant=(this.checked ? 'italic' : 'normal');"></td>

I also changed the background and Bold to onClick properties. Added a little formatting so it wasn't driving me quite as crazy - and also added fontFamily selection list.

Form

A couple of questions:

How do the other designers allow for non-browser type fonts to be displayed in the preview? Do they have to somehow have these fonts called from an external programming file?

Example

I eventually want to make the background colors to background images, (from the CSS Properties to Javascript Reference you posted) - I believe that would be backgroundImage - but I am unable to find the syntax for the code to select an image verses the hex code for the color... can you direct me to a resource.

I am so stoked about learning this coding! You are a phenomenal teacher also. I've read many a post where the programmers are not as patient.

Thank you for the invaluable knowledge - I won't forget your kindness. I'm sure all of us that are learning these "foreign languages" are very thankful for the help!

[rlhanson]

<input name="radiobutton" type="radio" tabindex="4" onClick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/art/art.jpg)'" />  No Image

[jmarcv]

onClick it is then. Guess I got the wrong one. Theres one that needs mouseup.... forgot now,

oops...
fontVariant - Google Search
its fontStyle, not fontVariant.

How do the other designers allow for non-browser type fonts to be displayed in the preview? Do they have to somehow have these fonts called from an external programming file?

Who are the 'other' designers? I didn't see any unusual fonts in the url you provided.

But..... One way is 'flash', which is something I never got very good at.
The other way is to upload fonts to the server and use imagemagick to create graphics out of the text.

Congrats on the back image!

[Matt]

Yes, the fonts are installed on the server and called like you would call a css file I do believe.

[Matt]

Here is an article: Web Design Guides: Font Embedding, SSI-Developer.net

[jmarcv]

Matt, dude!

I was pretty damn excited until I got to the end of the article where is says 'no' on mozzilla.

Oh well..... I really could have used that....

But, for Lynne it could be an excellent solution! ... depending on how many Mac clients you want to want to aggravate, but then they are used to being aggravated.

[Matt]

You can do Mozilla, you just have to have extra codez

Embedding Fonts Tutorial

[Matt]

Eh, maybe i am wrong on the mozilla thing. I was thinking if it was netscrap, then.....

I am going back to my hole now...