One more: Online Designer?

[jmarcv]

... besides, wouldn't inclayout493_des.html
make more sense later than inclayout1_des.html???

[rlhanson]

Oh I see said the blind man as he picked up his hammer and saw...

Been sitting here making everything complicated again. Thanks John-Marc! It's nice to have gh to post stuff on as sometimes I don't even finish my post as the lights come on as I'm posting the question!

[rlhanson]

Works AWESOME!!

[rlhanson]

New idea/question:

In the designer, I have the text input field which updates the card preview text with onChange. I would like to have a <div> in the card preview that triggers an onClick event that shows the font selection (radio buttons) which also updates the card preview.

The text input code:

<input name="optn53" type="text" id="company_name" tabindex="1" onchange="document.getElementById('companyName').innerHTML=this.value;document.getElementById('jobName').value=this.value;"  size="25" maxlength="50" />

The function I have to display "Company Name" on initial page view or the company name text if it has been changed, and apply the styles selected:

 <?php
function companyname(){
//text
$optn53 = $_POST['optn53'];
//font
$optn54 = $_POST['optn54'];
//color
$optn2 = $_POST['optn2'];
 
if (isSet($_POST['optn53'])){
 $optn53 = $_POST['optn53'];
 } else {
 $optn53 = 'The Company Name';
}
 
if (isSet($_POST['optn54'])){
 $optn54 = $_POST['optn54'];
} else {
 $optn54 = 'Verdana';
}
if (isSet($_POST['optn2']) || ($_POST['SIZEcompanyName'])){
 $fontsize = $_POST['SIZEcompanyName'];
 $optn2 = $_POST['optn2'];
} else {
 $optn2 = '#FF0000';
 $fontsize = '14pt';
}
print "<font face=\"'$optn54'\" size=\"'$fontsize'\" color=\"'$optn2'\">$optn53</font>";
}
?>  

The div code that works if the text has not been changed (on initial page view with "the Company Name" default):

...<td align="right" valign="bottom" class="companyname" id="companyName"><div onclick="return toggleMe('para1')"><?php companyname(); ?></div></td>

Once the text has been changed in the card preview the onClick no longer works in the <div>. I suspect it has to do with changing the innerHtml to the value that is typed in but I'm not sure. Can you tell me why it doesn't work and a method which would work?

Thanks!

[rlhanson]

I figured out what I was doing in the last post, but have a new question.

How would I create an array for all id's (companyName, slogan) and apply 1 style (no-border) to all? For example:

 <?php
print "<span class=\"companyname\" id=\"companyName\" onclick=\"this.className='companyname_border'; document.getElementById('arrayID').className='noborder';\"</span>";
?>  

If this is possible, is it also possible to keep the border style of the id that is clicked and yet have the other id's have a different border? I know I could stack the js and use the document.getElementById('slogan').className='nobor der' for each id... I was just thinking there had to be an easier way! lol

[jmarcv]

instead of this:

document.getElementById('arrayID').className='noborder';

Do this:

applyClass('slogan,companyName','noborder');

Put as many elements in a comma delimited string as needed
Now we need to create our function - this goes in your javascript section

function applyClass(csvIDs,classtoApply){
 // convert the string to an array
 arr=csvIDs.split(',');
 // loop through each id in the array and apply the specified class
 for (i = 0; i < arr.length; i++){
  document.getElementById(arr[i]).className=classtoApply;
 }
}
 

[rlhanson]

That works perfectly! Thanks so much!!!

Is it possible to have default classes assigned to the id's in the array?

something like this:

applyClass('slogan,companyName','slogan,companyname');

[jmarcv]

That works perfectly! Thanks so much!!!

Is it possible to have default classes assigned to the id's in the array?

something like this:

applyClass('slogan,companyName','slogan,companyname');

You lost me. More words please. Of course its possible. Dont have to know what you are saying to answer, but you have to explain in english what you have going. I can already interpret it 3 different ways.

[rlhanson]

Sorry John-Marc!

I have 2 classes for each id. One with a border and one without. Each id has different styles assigned. When I used the code I originally asked for, the class removes the border on the id's but I lose the default styles.

In my css:

.companyname {
font-size: 14px;
font-weight: bold;
font-style:normal;
height:18px;
vertical-align:bottom;
 
}
.companyname_border {
font-size: 14px;
font-weight: bold;
font-style:normal;
height:18px;
vertical-align:bottom;
border:2px dotted #0CF;
}
.sloganS {
font-size: 11px;
font-style: italic;
font-weight: bold; 
}
.sloganS_border {
font-size: 11px;
font-style: italic;
font-weight: bold;
border:2px dotted #0CF;
}

In my php code:

 <?php
...
else {
  $optn2 = '#FF0000';
  $fontsize = '14px';
  $optn53 = 'The Company Name';
  $optn54 = 'Verdana';
 print "<span class=\"companyname\" id=\"companyName\" onMouseup=\"this.className='companyname_border'; applyClass('sloganS,cell','sloganS'); \" style=\"font-family:$optn54; font-size:$fontsize; color:$optn2;\">$optn53</span>";
}
...
?>  

When the span is clicked on the designer preview for companyName, I need the .companyname_border class applied and the classes without borders applied to the remaining 9 ids on the designer preview (sloganS, cellS, etc.).
If the span for sloganS is clicked, I need the sloganS_border applied, and the classes with no borders applied to the remaining ids...like for the companyName id, the class .companyname.

Better?

[jmarcv]

Well the code I gave you should work, but you should look closer at the example.
Paramenter 1 is the list of elements you want to affect, the second parameter is the STYLE you want.
Now that I see its a 'toggle' you want, there is an easier way.
However, you need to pay attention to what I have said many times. CONSISTANT NAMING conventions!
rename your styles to match the corresponding ID and life becomes a LOT easier!! You did that for slogan, but not for company name
.companyNameS, .companyNameS_border
Doing that, this will work in ONE shot.

 
// here we define all the ids that we want to deal with into an array
var ID_arr=['companyName','slogan','cell','etc'];
// and this is our function to call on mouseup (Remember - a function is super-stacking commands
function applyClass(currid){
// convert the string to an array
// loop through each id in the array and apply the appropriate class
for (i = 0; i < ID_arr.length; i++){
// we loop through each element of ID_arr and add an S to the id to get the associated class.
//
classtoApply=ID_arr[i] + 'S';
if (ID_arr[i]==currid){
// in the case where the id in ID_arr is the one that made the call, we make it a border class
classtoApply += '_border';
}
// now we apply whichever class the function decided was appropriate
document.getElementById(ID_arr[i]).className=classtoApply;
}
}

revised PHP example code on how to call it this.id is passed to the function so it knows who is calling and needs to be 'bordered'

print "<span class=\"companyNameS\" id=\"companyName\" onMouseup=\"applyClass(this.id); \" style=\"font-family:$optn54; font-size:$fontsize; color:$optn2;\">$optn53</span>";
print "<span class=\"sloganS\" id=\"sloganS\" onMouseup=\"applyClass(this.id); \" style=\"font-family:$optn54; font-size:$fontsize; color:$optn2;\">$optn53</span>";

Mastering Javascript Arrays
FYI:
CSS stands for "Cascading" Style Sheets
Here is how to take advantage of the 'cascading' part.

.companyname, .companyname_border{
font-size: 14px;
font-weight: bold;
font-style:normal;
height:18px;
 
}
.sloganS,.sloganS_border {
font-size: 11px;
font-style: italic;
font-weight: bold; 
}
.companyname_border, .sloganS_border{
border:2px dotted #0CF;
}

This way if you change font-size you only need to edit it in ONE place
You can take it a step forward also if you want:

.companyname, .companyname_border{
font-size: 14px;
font-style:normal;
height:18px;
 
}
.sloganS,.sloganS_border {
font-size: 11px;
font-style: italic;
}
.companyname, .companyname_border, .sloganS, .sloganS_border{
font-weight: bold; 
}
.companyname_border, .sloganS_border{
border:2px dotted #0CF;
}