Page 8 of 15 FirstFirst ... 456789101112 ... LastLast
Results 71 to 80 of 141

Thread: One more: Online Designer?

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

    Default

    From the past - the colorpicker.

    Here is your revised color picker. Note the new third variable.
    Variable 1 is as it was, the text or hidden field to contain the value of the color.
    Variable 2 is still the thing you want to color, but it defaulted to coloring the background color.
    The new var 3 is either B (for background color) or C (for color, or font color)
    Code:
              <img src="http://www.rlhanson-online.com/desig...gner/color.jpg" align="absmiddle" style="cursor:pointer" onclick="showColorGrid3('COLOR','cardTemplate','C');" />
    Here is the revised 301a.js code
    Code:
    //*******************************************************************************
    //Title:      FCP Combo-Chromatic Color Picker
    //URL:        Color Picker : HTML, Java Script, RGB, Popup, DHTML, Selector
    //Product No. FCP201a
    //Version:    1.2
    //Date:       10/01/2006
    //NOTE:       Permission given to use this script in ANY kind of applications IF
    //            script code remains UNCHANGED and the anchor tag "powered by FCP"
    //            remains valid and visible to the user.
    //
    //  Call:     showColorGrid3("input_field_id","span_id")
    //  Add:      <DIV ID="COLORPICKER301" CLASS="COLORPICKER301"></DIV> anywhere in body
    /*
    JMVWare.com mod - Feb 2008
    add 3rd Parameter which can be B or C
    eg: showColorGrid3("input_field_id","mySampleElementId","C")
    existing code changed bacground style of span_id.
    This is maintained with the B option.  Added a C option to change the font color of mySampleElementId
    */
    //*******************************************************************************
    function getScrollY(){var scrOfX = 0,scrOfY=0;if(typeof(window.pageYOffset)=='number'){scrOfY=window.pageYOffset;scrOfX=window.pageXOffset;}else if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){scrOfY=document.body.scrollTop;scrOfX=document.body.scrollLeft;}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){scrOfY=document.documentElement.scrollTop;scrOfX=document.documentElement.scrollLeft;}return scrOfY;}document.write("<style>.colorpicker301{text-align:center;visibility:hidden;display:none;position:absolute;background-color:#FFF;border:solid 1px #CCC;padding:4px;z-index:999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#D0D0D0,direction=135);}.o5582brd{border-bott6om:solid 1px #DFDFDF;border-right:solid 1px #DFDFDF;padding:0;width:12px;height:14px;}a.o5582n66,.o5582n66,.o5582n66a{font-family:arial,tahoma,sans-serif;text-decoration:underline;font-size:9px;color:#666;border:none;}.o5582n66,.o5582n66a{text-align:center;text-decoration:none;}a:hover.o5582n66{text-decoration:none;color:#FFA500;cursor:pointer;}.a01p3{padding:1px 4px 1px 2px;background:whitesmoke;border:solid 1px #DFDFDF;}</style>");
    function gett6op6(){csBrHt=0;if(typeof(window.innerWidth)=='number'){csBrHt=window.innerHeight;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrHt=document.documentElement.clientHeight;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrHt=document.body.clientHeight;}ctop=((csBrHt/2)-132)+getScrollY();return ctop;}
    function getLeft6(){var csBrWt=0;if(typeof(window.innerWidth)=='number'){csBrWt=window.innerWidth;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrWt=document.documentElement.clientWidth;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrWt=document.body.clientWidth;}cleft=(csBrWt/2)-125;return cleft;}var nocol1="&#78;&#79; &#67;&#79;&#76;&#79;&#82;",clos1="&#67;&#76;&#79;&#83;&#69;",tt6="&#70;&#82;&#69;&#69;&#45;&#67;&#79;&#76;&#79;&#82;&#45;&#80;&#73;&#67;&#75;&#69;&#82;&#46;&#67;&#79;&#77;",hm6="&#104;&#116;&#116;&#112;&#58;&#47;&#47;&#119;&#119;&#119;&#46;";hm6+=tt6;tt6="&#80;&#79;&#87;&#69;&#82;&#69;&#68; &#98;&#121; &#70;&#67;&#80;";
    function setCCbldID6(objID,val){document.getElementById(objID).value=val;}
    function setCCbldSty6(objID,prop,val){switch(prop){case "bc":if(objID!='none'){
     e=document.getElementById(objID).style;
     if (styletype=='C') e.color=val;
     if (styletype=='B') e.backgroundColor=val;
    }
    break;case "vs":document.getElementById(objID).style.visibility=val;break;case "ds":document.getElementById(objID).style.display=val;break;case "tp":document.getElementById(objID).style.top=val;break;case "lf":document.getElementById(objID).style.left=val;break;}}
    function putOBJxColor6(OBjElem,Samp,pigMent){if(pigMent!='x'){ setCCbldID6(OBjElem,pigMent);setCCbldSty6(Samp,'bc',pigMent);}setCCbldSty6('colorpicker301','vs','hidden');setCCbldSty6('colorpicker301','ds','none');}
    function showColorGrid3(OBjElem,Sam,styletyperef){var objX=new Array('00','33','66','99','CC','FF');
    styletype=styletyperef;
    if (!styletype) styletype='B';
    var c=0;
    var z='"'+OBjElem+'","'+Sam+'",""';
    var xl='"'+OBjElem+'","'+Sam+'","x"';
    var mid='';
    mid+='<center><table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #F0F0F0;padding:2px;"><tr>';
    mid+="<td colspan='18' align='left' style='font-size:10px;background:#6666CC;color:#FFF;font-family:arial;'>&nbsp;Combo-Chromatic Selection Palette</td></tr><tr><td colspan='18' align='center' style='margin:0;padding:2px;height:14px;' ><input class='o5582n66' type='text' size='10' id='o5582n66' value='#FFFFFF'><input class='o5582n66a' type='text' size='2' style='width:14px;' id='o5582n66a' onclick='javascript:alert(\"click on selected swatch below...\");' value='' style='border:solid 1px #666;'>&nbsp;|&nbsp;<a class='o5582n66' href='javascript:onclick=putOBJxColor6("+z+")'><span class='a01p3'>"+nocol1+"</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a class='o5582n66' href='javascript:onclick=putOBJxColor6("+xl+")'><span class='a01p3'>"+clos1+"</span></a></td></tr><tr>";
    var br=1;
    for(o=0;o<6;o++){
     mid+='</tr><tr>';
     for(y=0;y<6;y++){
      if(y==3){
       mid+='</tr><tr>';
      }
      for(x=0;x<6;x++){
       var grid='';
       grid=objX[o]+objX[y]+objX[x];
       var b="'"+OBjElem+"', '"+Sam+"','#"+grid+"'";
       mid+='<td class="o5582brd" style="background-color:#'+grid+'"><a class="o5582n66"  href="javascript:onclick=putOBJxColor6('+b+');" onmouseover=javascript:document.getElementById("o5582n66").value="#'+grid+'";javascript:document.getElementById("o5582n66a").style.backgroundColor="#'+grid+'";  title="#'+grid+'"><div style="width:12px;height:14px;"></div></a></td>';
       c++;
      }
     }
    }
     mid+='</tr></table>';
     var objX=new Array('0','3','6','9','C','F');
     var c=0;
     var z='"'+OBjElem+'","'+Sam+'",""';
     var xl='"'+OBjElem+'","'+Sam+'","x"';
     mid+='<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #F0F0F0;padding:1px;"><tr>';
     var br=0;
     for(y=0;y<6;y++){
      for(x=0;x<6;x++){
       if(br==18){
        br=0;
        mid+='</tr><tr>';
       }
       br++;
       var grid='';
       grid=objX[y]+objX[x]+objX[y]+objX[x]+objX[y]+objX[x];
       var b="'"+OBjElem+"', '"+Sam+"','#"+grid+"'";
       mid+='<td class="o5582brd" style="background-color:#'+grid+'"><a class="o5582n66"  href="javascript:onclick=putOBJxColor6('+b+');" onmouseover=javascript:document.getElementById("o5582n66").value="#'+grid+'";javascript:document.getElementById("o5582n66a").style.backgroundColor="#'+grid+'";  title="#'+grid+'"><div style="width:12px;height:14px;"></div></a></td>';
       c++;
      }
     }
     mid+="</tr><tr><td colspan='18' align='right' style='padding:2px;border:solid 1px #FFF;background:#FFF;'><a href='"+hm6+"' style='color:#666;font-size:8px;font-family:arial;text-decoration:none;lett6er-spacing:1px;'>"+tt6+"</a></td>";
     mid+='</tr></table></center>';
     setCCbldSty6('colorpicker301','tp','100px');
     document.getElementById('colorpicker301').style.top=gett6op6();
     document.getElementById('colorpicker301').style.left=getLeft6();
     setCCbldSty6('colorpicker301','vs','visible');
     setCCbldSty6('colorpicker301','ds','block');
     document.getElementById('colorpicker301').innerHTML=mid;
    }

  2. #72
    Websync is offline What's a Guru? I want to be a GlowRu!
    Join Date
    Oct 2005
    Location
    California
    Posts
    55

    Default

    This is such a cool thread! Thank you for keeping it public. When I have a few hours to spare I will read through it!

    John-Marc - are you one of the programmers for the GlowHost website?

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

    Default

    From the past - the colorpicker.
    Thank you, thank you, thank you! I've decided to use it for background right now, but may change my mind later on - VERY thankful you made it capable for both text or background.

    I have been working on the design elements now, along with the programming, and have a glitch perhaps one of you could make a suggestion on...

    I will have a page with different layout selections, once a user selects a layout, they will arrive at a page similiar to this one:

    RL Hanson-Online Business Card Designer

    If they attempt to choose a background color after selecting a background image, it will not work unless they select the "No image" button which has a value of: transparent.

    Is there any way to program the color selector button to change the background property to original state if clicked?

    This is getting EXCITING!!!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default

    Quote Originally Posted by Websync View Post
    John-Marc - are you one of the programmers for the GlowHost website?
    Yes, most of my work is in the backend admin when you log in to your account, service monitoring, etc.

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

    Default

    Quote Originally Posted by rlhanson View Post
    Is there any way to program the color selector button to change the background property to original state if clicked?
    OK, I am going to try to let you figure this one out. If you look back, you will see 2-3 times I mentioned (and stressed) that Javascript commands are stackable, so that you can execute more than one.
    For example: Here, you are putting in the word bold or normal in your hidden var, then you (see the semi-colon?) change the element in your template to show bold.
    Code:
    onclick="document.getElementById('BOLDname').value=(document.getElementById('BOLDname').value=='bold' ? 'normal' : 'bold'); document.getElementById('nameS').style.fontWeight=document.getElementById('BOLDname').value;"/>
    So you need to do the same thing that would happen when a user clicks that when they click the color picker. The first thing you need to do is add an id to that radio button
    id="noart"
    Then, here is one of the 2 commands you will need to add to the existing colorgrid command
    document.getElementById('noart').checked=true;

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

    Default

    Quote Originally Posted by rlhanson View Post
    I've decided to use it for background right now,

    It? In case its not obvious, you can use it any number of times on the page, in each case have it control something different. One for the background, hell, one for each font line if you want to go nuts!

  7. #77
    Matt's Avatar
    Matt is offline GlowHost Administrator
    Join Date
    Jan 2005
    Location
    Behind your monitor
    Posts
    5,932

    Default

    John-Marc = Glow-Pimp
    Send your friends and site visitors to GlowHost and get $125 plus bonus!
    GlowHost Affiliate Program | Read our Blog | Follow us on X |

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

    Default

    It? In case its not obvious, you can use it any number of times on the page, in each case have it control something different.
    Yeh, I guess I haven't mastered speaking (writing) eloquently enough while trying to learn what exactly each "it" does, let alone how to reference to "them".

    John-Marc = Glow-Pimp
    I agree!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default

    Quote Originally Posted by rlhanson View Post
    Yeah, I guess I haven't mastered speaking (writing) eloquently enough while trying to learn what exactly each "it" does, let alone how to reference to "them".
    Not a grammar lesson here, just want to make sure you weren't thinking you could ONLY use one. Limitations are do boring...

    I agree!
    Matt = my bizzle

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

    Default

    John-Marc -
    I successfully got the code figured out!

    Code:
    <input type="hidden" name="COLORBkgrd" id="noart" />
                  <img src="../images/designer/color.jpg" align="absmiddle" title="Choose Color" style="cursor:pointer" onclick="document.getElementById('noart').checked=true;document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';showColorGrid3('COLOR','cardTemplate','B')"/>&nbsp;
                  <input type="text" id="COLORcompanyName" name="COLOR" size="9" />
    Are you proud?! The only problem is the colorpicker doesn't work in firefox. What am I doing wrong?
    RL Hanson-Online Business Card Designer
    Last edited by rlhanson; 02-23-2008 at 10:05 AM. Reason: forgot link ;)
    Thank you,
    Lynne Hanson
    RL Hanson-Online

Page 8 of 15 FirstFirst ... 456789101112 ... LastLast

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