One more: Online Designer?

hey...who said I like to aggravate Mac users?! LOL I try to design so everyone can see/use my sites!

Thanks for all the help guys! Looking into the embedding thing now - my co-conspirator, my sister - a mac user, hasn't complained that she couldn't see the fonts used on the Vista site - which I thought was js by the source code?

Just an FYI - I've been trying to hire a coder, purchase a software solution, for this exact result that John-Marc supplied for over a year now. Software ran $6k, coders wouldn't bid for under $1k.... thanks so much!

So can we see it in action when its all done?

This may be the ticket on fonts....

sIFR Documentation & FAQ

Absolutely! I will definately be showing this off as well as posting the code when I get the functionality down to where I want it. :)

FYI
The Totally Rad Software Company
I use this companies uploader, and when going to see if they have an update, I noticed thay have an online card designer. probably more suited for advanced clients, but thought you might want to take a peek.

Thought you might want to see a way to shorten your PHP posting code and have less typing copy pasting every time you add a new form field, which you are obviously going to be doing big time, I would say..
This offers the flexibility of being able to expand the vars you want to email in one place.

PHP Code:

---

 
// Receiving variables
$PostVars=array('radiobutton','company_name','slogan','name','title','address_1'
    ,'address_2','address_3','phone','cell','fax','vis_email','website','add_info','approval');
//Sending Email to form owner
$pfw_header = "From: $vis_email\n"
  . "Reply-To: $vis_email\n";
$pfw_subject = "designer";
$pfw_email_to = "support@rlhanson-online.com";
$pfw_message = "Visitor's IP: {$_SERVER['REMOTE_ADDR']}\n";
while (list($key,$val) = each($PostVars)) {
 $pfw_message .= "$key: $val\n";
 // use this to create the vars for echoing below
 ${$key}=addslashes($val);
}
$pfw_message .= "RL Hanson-Online";
@mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ; 


---

If you want it to automaticaaly send any form var you create, then it is even easier:

PHP Code:

---

 
//Sending Email to form owner
$pfw_header = "From: $vis_email\n"
  . "Reply-To: $vis_email\n";
$pfw_subject = "designer";
$pfw_email_to = "support@rlhanson-online.com";
$pfw_message = "Visitor's IP: {$_SERVER['REMOTE_ADDR']}\n";
while (list($key,$val) = each($_POST)) {
 $pfw_message .= "$key: $val\n";
 // use this to create the vars for echoing below
 ${$key}=addslashes($val);
}
$pfw_message .= "RL Hanson-Online";
@mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ; 


---

Using the above, you just add the input field to your form and it will automatically get added to the email message.

Quote:

---

FYI
The Totally Rad Software Company
I use this companies uploader, and when going to see if they have an update, I noticed thay have an online card designer. probably more suited for advanced clients, but thought you might want to take a peek.

---

LOL - That's precious John-Marc - thank you! Just finally getting something to work and there's a free one at Totally Rad! :)

Thank you for the form processor - I had just run the form through a php form wizard to get one on there. I definately appreciate the code. I don't like using processors that require me to update them everytime I add a field. I have too many clients with feedback forms to mess with that scenario! :)

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?

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

Talk me through this please...as far as what options I would have to implement this type of functionality.

Also, thank you for the font advice...still am looking at this.

Quote:

---

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.

Quote:

---

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

Code:

---

if(condition){true} else {false}

---

or

Code:

---

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 ;

Code:

---

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.

Quote:

---

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

Code:

---

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.

Code:

---

<INPUT type=hidden name=backgroundImage>

---

Currently, you update with this:

Code:

---

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:

Code:

---

<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:

PHP Code:

---

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:

Code:

---

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

---

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

Code:

---

<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.

John-Marc -
Thank you so much for all the information - and no, haven't started smoking - though I did consider drinking! LOL

Actually just trying to process this a little at a time. I added a color picker code to the form but can't figure out the onChange syntax to make it change the companyName text. Here's the code for the color picker -

HTML Code:

---

<div id="colorpicker301" class="colorpicker301"></div>
      Color: <input type="button" onclick="showColorGrid3('color_1','none');" value="...">&nbsp;<input type="text" ID="color_1" size="9">

---

I actually had it changing the color code to bold at one point, which I know was wrong, but eventful to say the least.

I tried changing 'color_1' to 'companyName', and adding a few different onChange to the input field, but none of them worked. I think it's similiar to the select box, but that didn't work either :

HTML Code:

---

Color: <input type="button" onclick="showColorGrid3('color_1','none');" value="...">&nbsp;<input type="text" ID="color_1" name="COLORcompanyName" size="9" onChange="document.getElementById('companyName').style.color=this.options[this.selectedIndex].value;">

---

I'm lost... please help.

As far as the image uploader, I have one that I use for my site already and think I at least get the idea of what you are sayng. I just figured out how to have the form post to itself when we first started this so I think I can at least grasp this idea now. :)

Not sure, if I am just going to offer the ability to upload an image and then have the email just let me know that the user has uploaded an image.
I'm very pleased with what we have accomplished thus far. I know you are probably ready to strangle me about now. Unfortunately I have absolutely NO experience with js so I don't even have a clue until you post it!

I did run into a couple of glitches as I was changing things.
When I added the images to select as a background, I lost the ability to go back and select a color.
So, what I did was make the color selection a drop down menu list, and then added "no image" to the buttons for the background images with a value of a clear pixel gif.
For some reason, if I just left the value as "transparent" it still would not allow the color change.
Anyway, it works this way to be able to go back and forth.

The fontStyle worked perfectly verses fontVariant - Thank you!

Well, that's it for the rambling mind... I must work tomorrow for real so will probably be at this after hours again. :) Thanks again!

What browser are you using?

You should use firefox and download the 'firebug' addon so you aren't in the dark:
These errors appear when you click a color.

relateColor is not defined
[IMG]chrome://firebug/content/blank.gif[/IMG] Color: <input type="button" onclick="showColorGrid3('COLORcompanyName','no...
form.html (line 85)


document.getElementById(objID) has no properties
[IMG]chrome://firebug/content/blank.gif[/IMG]function getScrollY(){var scrOfX = 0,scrOfY=0;if(typeof(window.pageYOffset)=='nu...
301a.js (line 14)

You are calling relateColor() - why? There IS no relateColor function that I see.
2. The second error seems to indicate that objID is not defined with a proper object.
I will assume also that objID is the id we pass it.

Now, we can assume that it refers to COLORcompanyName in the form.
and according to the script instructions:
// Call: showColorGrid3("input_field_id","span_id")

... and if we do a search on id=COLORcompanyName in your code, we see nothing.... and neither does the browser.

So here is a fundamental 'gotcha' in this.
name= is for form elements.
id= is for anything.
Any object can contain both. a name can be the same as an id.

So problem is, your code asks for an object ID and you gave it a name.
Try this:

HTML Code:

---

Color: <input type="button" onclick="showColorGrid3('COLORcompanyName','none');" value="...">&nbsp;<input type="text" ID="COLORcompanyName" name="COLORcompanyName" size="9">

---

and get rid of this:

HTML Code:

---

<script language="javascript">relateColor('companyName', getObj('color1').value);</script>

---

Now, I can tell you ahead of time, all you are doing is filling in the Color object. There can be great biblical gnashing of teeth trying to get the preview to change.

The obvious should be to do this:

HTML Code:

---

onclick="showColorGrid3('COLORcompanyName','none');document.getElementById("companyName").style.color=document.getElementById(o"COLORcompanyName").value;"

---

Remember that I said you can do multiple JS commands by separating them with a semi-colon.
Simple! We call the color picker, and then we get the color the picker put in the field and apply it to the preview!

Let me save you the agony. Javascript is not modal. Which means, it won't wait for you to choose a color. It will execute the color picker and then do the second part quicker than you can even focus on the colors, no matter what strength your coffee is.


So we put the second part in an 'onChange' on COLORcompanyName and when the color picker changes it it changes the preview!
Nice try. onChange should be renamed to onHumanChange. It doesn't get triggered by JS itself.

What to do.... to be continued.