Page 5 of 15 FirstFirst 123456789 ... LastLast
Results 41 to 50 of 141

Thread: One more: Online Designer?

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

    Default Stacking commands to do many things at once.

    Quote Originally Posted by rlhanson View Post

    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.

    Take note of what I have said about stacking JS commands.

    Give this an id so you can access it
    HTML Code:
    <input id=noImageRadio name="radiobutton" type="radio" tabindex="7" value="transparent" onClick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)'" />
            No Image <br />
    and stack up some javascript
    eg:
    HTML Code:
    <input name="radiobutton" type="radio" id="purple" value="#9900FF" tabindex="3"
     onClick="document.getElementById('cardTemplate').style.backgroundColor=this.value; 
    document.getElementById('noImageRadio').checked=true; 
    document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';" />
    Untested, but that is the general concept.

    I put the JS commands on separate lines for reading purposes, but in code they need to be on the same line.

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

    Default

    John_marc,
    Thank you. I know you are breaking this down to the simplest of terms - to be completely honest - I'm totally lost. Maybe I'm over thinking this or maybe it's because it's like chinese to me right now.

    At this point the color picker pops ups and allows a user to pick a color. Which is fine for now. I give.

    Question that I do have, which I hope is something I grasp...If I wanted to change the
    HTML Code:
     <input type="Checkbox" name="BOLDcompanyName" value="yes" onClick="document.getElementById('companyName').style.fontWeight=(this.checked ? 'bold' : 'normal');">
    to have an image, so far I have this:
    HTML Code:
    <input type="image" name="BOLDcompanyName" src="../images/designer/bold.jpg"/>
    Why, when I add the onChange or onMouseup or onClick - does it submit the form?
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default Using an image as a checkbox

    HTML Code:
    <input type="image">
    This is a submit image in HTML. What you want is:

    HTML Code:
    <input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" >
    <IMG src="../images/designer/bold.jpg" style="cursor:pointer"
      onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? normal' : ''bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
    Did you follow that?

    More complicated but pertier? Try this:
    HTML Code:
     <IMG src="/images/designer/normal.jpg" style="cursor:pointer"
      onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold');
    this.src=(document.getElementById('BOLDcompanyName').value==bold ? '/images/designer/bold.jpg') : '/images/designer/normal.jpg');
      document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
    Again, I added linefeeds to make it more visible here. NEVER use linefeeds in an onClick, onMouse or anything but a function (which we have not gone into, but may need to soon depending on how you catch up).
    Now your bold button can change its image to show if it is pressed in or not, providing you provide the 2 images.

    So, what we are doing is, we script a hidden text area to store our result.
    input type="hidden"
    and we use an image with an onClick. That will not submit the form.
    And since an image does not pass a POST value, that is why we need the hidden one, sort of like a scratch pad.

    NOW, The onClick in detail.
    First command,
    HTML Code:
     document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold');
    This is our hidden object
    document.getElementById('BOLDcompanyName')
    This is what it contains.
    document.getElementById('BOLDcompanyName').value

    So what do we assign to it? This.
    HTML Code:
     document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold')
    If the value is bold, change it to normal. Otherwise make it bold. A simple toggle.
    BOLDcompanyName = (condition ? value if true : value if false)

    OK, so BOLDcompanyName now contains the value we want, so lets change the image to show that.

    Second command,
    Is it bold? Then change our image src to the bold image, otherwise show the normal image again
    HTML Code:
     this.src=(document.getElementById('BOLDcompanyName').value==bold ? '/images/designer/bold.jpg' : '/images/designer/normal.jpg');)
    Third Command: Change the style of companyName in the preview to whatever the value is in BOLDcompanyName
    HTML Code:
    document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;
    Voila!
    Now I have kept the long form of everything so you can see it better. As an example, this is how I myself would do it, but while it is more readable to me, its not good for beginners. So, for the curious:

    HTML Code:
     <IMG src="/images/designer/normal.jpg" style="cursor:pointer"
      onClick="boldObj=document.getElementById('BOLDcompanyName');
      boldvar=(boldObj.value==bold ? 'normal' : 'bold');
      this.src='/images/designer/'+boldvar+'.jpg';
      document.getElementById('companyName').style.fontWeight=boldvar;"/>
    ... or maybe it looks less chinese?

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

    Default hmmm...

    Okay - I got the last part for the bold and italic images, and I even used the same concept for the color picker button - so everything looks pretty now.

    I finally (kind of) got the color picker to change the companyName after reading back a little on the name and id thing, and trying different combinations. The really funny thing is the only way the color changes is to click on the colorpicker image, select the color, click on the colorpicker image again - and this is when the color changes in the cardTemplate.

    SO...I know I have the change function screwy, it's not updating from the text field that the colrpicker is updating...anyway - I'm still thinking through this.

    I originally couldn't get any of the examples to work, then managed to get the 1st one working after looking very closely at the syntax - and woohoo actually recognized a typing error! Are you proud yet? No, well, I'm still hanging in there!

    Here's the code I have with the screwy color picker thing and the successful bold/italic code:
    HTML Code:
    <input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" >
    <IMG src="../images/designer/bold.jpg" style="cursor:pointer" onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? 'normal' : 'bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
    <input type="hidden" name="ITALcompanyName" id="ITALcompanyName" >
    <IMG src="../images/designer/italic.jpg" style="cursor:pointer" onClick="document.getElementById('ITALcompanyName').value=(document.getElementById('ITALcompanyName').value=='italic' ? 'normal' : 'italic'); document.getElementById('companyName').style.fontStyle=document.getElementById('ITALcompanyName').value;"/>
     
    <div id="colorpicker301" class="colorpicker301"></div>
    <input type="hidden" name="COLORcompanyName" id="COLORcompanyName" /> <IMG src="../images/designer/color.jpg" style="cursor:pointer" onClick="showColorGrid3('COLOR','none');document.getElementById('companyName').style.color=document.getElementById('COLOR').value; ">&nbsp;<input type="text" ID="COLORcompanyName" name="COLOR" size="9" />
    Just thought you'd like to see it working a bit.
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default

    Yes I am proud!

    As for the color picker, see the last post on page 4 that ends with ... to be continued.

    Here is the key:
    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.
    To understand this. Pick red. No change. Now pick green. It changes to red.
    Now pick yellow. It changes to green.

    The obvious way to fix this is to modify the color picker function, but:
    //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.
    so it is still to be continued. I just need more time to come up with an inventive solution that is educational, instead of just a 'fix'

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

    Default

    I did remember the "to be continued" but thought I would try anyway.

    Is it the particular colorpicker that I am using or the way that I am using it which causes the issue with code?
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default

    hunny! The script is fine, but the license says you can't modify it. The script hasn't a clue that you want to change TWO things. So, 3 options.

    Respect the programmer, find a workaround
    Respect the programmer, ask for permission to modify the script.
    Screw the programmer and modify.

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

    Default

    ROFL!

    I'll try to contact the programmer and see if we can get permission, how's that sound?
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default Guess what?!

    Subject: Re: customizing
    Tue 10/30/2007 10:56 PM

    Lynne,

    Yes, you do have permission to modify the code as long as you keep the credit and link code of the Free-Color-Picker script.

    As a courtesy, if you can, allow me the pleasure of seeing the finished work. I am compiling a list of apps that have utilized the FCP and will publish them on the next web site re-dev.

    Thank you for your request!

    David Baker
    support@free-color-picker.com
    Yeah!!!!!!!!!!!!!!!!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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

    Default

    John-Marc,

    Quick question...
    on the hidden input that changes the image background on the cardTemplate design view:

    If I have multiple images to choose from for the background, how do I pass a value of which one was selected with my form?

    here's the code I have:

    HTML Code:
    <input name="eagle" type="hidden" id="eagle">
          <img src="images/pics/eagle_th.jpg" alt="eagle" style="cursor:pointer" onclick="document.getElementById ('cardTemplate').style.backgroundImage='url(images/pics/eagle.jpg)'">
     
          <input name="pond" type="hidden" id="hidden2">
          <img src="images/pics/pond_th.jpg" alt="pond" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/pond.jpg)'">
     
          <input name="sunset" type="hidden" id="hidden3" />
          <img src="images/pics/sunset_th.jpg" alt="sunset" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/sunset.jpg)'" /><br />
     
          <input name="orangeflower" type="hidden" id="hidden4">
          <img src="images/pics/orange_flower_sm.jpg" alt="orange flower" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/orange_flower.jpg)'">
     
          <input name="purpleflower" type="hidden" id="hidden5" />
          <img src="images/pics/purpleflower_sm.jpg" alt="purple flowers" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/purpleflower.jpg)'" />
    and the results in my email:

    On Sunday 25th of November 2007 19:12:11
    Here are the details of the form submission:
    company_name: RL Hanson-Online
    SIZEcompanyName: 14pt
    BOLDcompanyName: bold
    ITALcompanyName:
    slogan: Testing form again
    SIZEslogan: 10pt
    BOLDslogan:
    ITALcslogan:
    name: test
    SIZEname: 10pt
    BOLDname:
    ITALname:
    title: test
    address_1: test address
    address_2: test city
    phone: test telephone
    cell: test cell
    vis_email: test support@rlhanson-online.com
    website: Test.com Web Based Testing Software
    add_info: test
    eagle:
    pond:
    sunset:
    orangeflower:
    purpleflower:
    cardTemplate: arial
    COLORtext:
    COLOR: #FFFFFF
    approval: approve
    Submit: Submit Design!
    here's the page: Untitled Document

    Thanks,
    Lynne
    Thank you,
    Lynne Hanson
    RL Hanson-Online

Page 5 of 15 FirstFirst 123456789 ... 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