One more: Online Designer?

[jmarcv]

Just finally getting something to work and there's a free one at Totally Rad!

You will probably find that your solution will work better in the end. Besides I said 'advanced' users. I think it may be too open and too much freedom can be a terrible thing.

A couple of things I was thinking about as I was trying to fall asleep last night...is js the same as php as far as the ability to code 'if this happens, show this.. else if this happens show this...' ? In other words, if background 1 is chosen, show the text in the design display in white, if background 2 is chosen, show the text in black?

Yes, it has an if else structure. Either

if(condition){true} else {false}

or

something = (condition ? true : false);

You will see that I used the latter format in the code to change bold code.

You can stack up multiple js commands separated by ;

if(condition){a=1;b=2;c=3;}

If it gets TOO crazy, then the best is to do a function.
We can address that if and when you ask.

And then, what about giving users the ability to upload an image from the computer and have it show in the design display?

You don't make it hard, do you! (g)
First you need to tell me what parts you don't know.

There are 2 ways. The easiest is
* put an upload form element in your form.
* put a second submit button next to it:
<input type=submit value="Upload Now" name=uploadImage>
* Then your php needs to look to see if that button was pressed

if ($_POST['uploadImage']){
    // get the uploaded file,
    // use image magick or GD library to resize it to fit the template and keep the original for submission (no I will not tell you how to attach it to the email (smile) - maybe next year.)
} else {
    // do the mail form routine
}

... and here, you need to redisplay the form with all the data the user entered and draw the template with the users modifications
OUCH! - No trivial task.

The hard way could actually be easier, depending on how well you grasp concepts. Its a bit like AJAX.
You would either have a link or button that would throw up a popup. The popup would have your 'upload.php' script (theres tons out there) and it could write to the main window.

Now you need to somehow be able to mail the name of the image too, right? So the form needs a tag for it.

<INPUT type=hidden name=backgroundImage>

Currently, you update with this:

onClick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/art/art.jpg)'"

... as part of your tag.

To do the same thing from the popup you would do this:

<SCRIPT>
window.opener.document.getElementById('cardTemplate').style.backgroundImage='url(../images/art/art.jpg)'
</SCRIPT>

In a PHP setting you would have something more like this of course:

 echo "<SCRIPT>
window.opener.document.getElementById('cardTemplate').style.backgroundImage='url($uploadedfilepath)';
// The following line updates the hidden form var so it will get posted to the email
window.opener.document.getElementById('backgroundImage').value='$uploadedfilepath';
</SCRIPT>
"; 
  

Auto-close the window with this:

<SCRIPT>self.close();</SCRIPT>

Now this second way can be used with an iframe instead, and is probably a better way

<IFRAME width=300 src=upload.php></IFRAME>

If you do this, then window.opener becomes window.top

PHEW!!!!!
This will be the one that drives you to drink, or makes you (DONT DO IT!) pick up a carton of cigarettes.




As for the font advice... I looked closer, and it wont work for you. It is not dynamic. You need to specify the font ahead of time.