Page 14 of 15 FirstFirst ... 4101112131415 LastLast
Results 131 to 140 of 141

Thread: One more: Online Designer?

  1. #131
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

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

  2. #132
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  3. #133
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    Works AWESOME!!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  4. #134
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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:
    HTML 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 Code:
    <?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):
    HTML Code:
    ...<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!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  5. #135
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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 Code:
    <?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
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  6. #136
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    instead of this:
    HTML Code:
    document.getElementById('arrayID').className='noborder';
    Do this:
    HTML Code:
    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
    HTML Code:
    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;
     }
    }
     

  7. #137
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    That works perfectly! Thanks so much!!!

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

    something like this:
    HTML Code:
    applyClass('slogan,companyName','slogan,companyname');
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  8. #138
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    Quote Originally Posted by rlhanson View Post
    That works perfectly! Thanks so much!!!

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

    something like this:
    HTML Code:
    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.

  9. #139
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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:
    HTML Code:
    .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 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?
    Last edited by rlhanson; 01-04-2010 at 08:55 AM.
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  10. #140
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    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.

    Code:
     
    // 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'
    Code:
    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.
    Code:
    .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:
    Code:
    .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;
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16