Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A challenge [Fixing a very nice color picker script]

    Hi, i've been working to get this script to work and it works in Firefox.
    In IE though the PNG background of the big square color picker (click button on the right) does not change to the color of the color slider, it's always grey instead
    The big square color picker area exists out of a transparent black and white gradient png and a white background png for the color (wich i think acts as a placeholder since that area has to change color).

    I figure that somewhere in the process of the script something is not working for IE but i find it hard to figure out what it is.

    Please help me figure this out.

    A demo of the script can be seen at the bottom of this page Demo and tutorial
    My working sample can be downloaded from here Download Sample

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    I have to admit, the script appears to work the same in Firefox and IE7...didn;t look in IE6...maybe a .jpg snapshot of the problem will illustrate your problem better...use Photoshop or Paint to circle what you;re talking about (as far as what isn;t working right)...

    interesting script though....how are you using it?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chump2877 View Post
    I have to admit, the script appears to work the same in Firefox and IE7...didn;t look in IE6...maybe a .jpg snapshot of the problem will illustrate your problem better...use Photoshop or Paint to circle what you;re talking about (as far as what isn;t working right)...

    interesting script though....how are you using it?
    I agree, the script is interesting. It's the best color picker i could find on the net.
    Yahoo has a similar picker but it's much heavier and dependent on a framework i believe. So I hope i get this one working.

    I'm using it to pick colors for a page it's layout colors, the site i'm working on will give users the ability to sign up and start building pages with a cms system.

    Here's a more detailed desciption of the problem area:

    When you go to the first link i posted and get the horizontal colorpicker below the input you can press on the image on the right. You then get a larger photoshop style color picker. The large square area on the right is what's not working right, it's gray no matter what you do.
    (i am testing it agains IE6 since the majority of users still use it)

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    Well I like the color picker too, and I like the application inside of a CMS (although have you tried other javascript WYSIWYG editors like FckEditor and Tiny MCE?)....

    The code only breaks in IE 6....

    So I poked around, and the problem seems like it has to be in the pngbehavior.htc file somewhere, since that is the file that is "fixing" the PNG image transparency for IE 5.5 - IE 6....

    I thought maybe you were just missing the path to the file here:

    Code:
    var blankSrc = 'colorpicker/blank.gif';
    But that didn;t solve anything...

    This is the IE-only filter property they're using here: http://msdn.microsoft.com/workshop/a...mageloader.asp

    And in case other people don;t want to download your .rar file, here is the code from the behavior file (that appears to be malfunctioning):

    Code:
    <public:component>
    <public:attach event="onpropertychange" onevent="propertyChanged()" />
    <public:attach event="onbeforeprint" for="window" onevent="beforePrint()" />
    <public:attach event="onafterprint" for="window" onevent="afterPrint()" />
    <script>
    
    /*
     * PNG Behavior
     *
     * img {
     *   behavior: url(pngbehavior.htc);
     * }
     *
     * This script was created by Erik Arvidsson (erik(at)eae.net)
     * for WebFX (http://webfx.eae.net)
     * Copyright 2002
     * 
     * For usage see license at http://webfx.eae.net/license.html    
     *
     * Version: 1.01a
     * Created: 2001-??-??    First working version
     * Updated: 2002-03-28    Fixed issue when starting with a non png image and
     *                      switching between non png images
     *          2003-01-06    Fixed RegExp to correctly work with IE 5.0x
     *          2004-04-25  Fixed PNG image printing, eliminated need for external
     *                      GIF file, fixed intermittent uninitialised variable
     *                      error [by AG, <http://www.scss.com.au/family/andrew/> ]
     *          2004-09-30  Reverted inline javascript image to transparent GIF. The
     *                      new XP SP2 'security' measures prevented the JS image
     *                      from working. [by AG]
     *          2004-10-22  Rewrote fixImage() to try and work around some reported
     *                      problems with PNGs vanishing! [by AG]
     *          2004-12-12  Fixed problem with PNGs not being restored after
     *                      printing. I have no idea how I missed this one! [by AG]
     *          2005-03-26  Fixed supported RE mis-identifying IE 5.0/Win98 as
     *                      'supported'.
     *          2006-03-12  Fixed problem where images with no width/height
     *                      specified would disappear (realWidth/realHeight) (thanks
     *                      to Julian).
     *          2006-04-05  Escaped realSrc in filter creation.
     *          2006-07-19  Changed escape() to encodeURI()
     *
     */
     
    var IS_PNG = /\-trans.png$/i; /* <-- NOTE: remove the "\-trans" to process *all* PNGs */
    var supported = /MSIE (5\.5|[6])/.test(navigator.userAgent) && navigator.platform == 'Win32';
    var realSrc, realHeight, realWidth;
    var blankSrc = 'colorpicker/blank.gif';
    if (supported) fixImage();
    function propertyChanged() {
      if (supported && event.propertyName == 'src') {
        var i = element.src.lastIndexOf(blankSrc);
        if (i == -1 || i != element.src.length - blankSrc.length) {
          fixImage();
        }
      }
    }
    function fixImage() {
      if (realSrc && element.src == realSrc) {
        // this is an attempt to set the image to itself!
        // pointless - leave the filter as-is, restore the blank image
        element.src = blankSrc;
      } else {
        // set the image to something different
        if (IS_PNG.test(element.src)) {
          // fixable PNG
          realSrc = element.src;
          realWidth = element.width;
          realHeight = element.height;
          element.src = blankSrc;
          element.style.width = realWidth + 'px';
          element.style.height = realHeight + 'px';
          element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + encodeURI(realSrc) + "',sizingMethod='scale')";
        } else {
          // ordinary image - make sure the fix is removed
          if (realSrc) {
            realSrc = null;
            element.runtimeStyle.filter = '';
          }
        }
      }
    }
    function beforePrint() {
      if (realSrc) {
        supported = false;
        element.src = realSrc;
        element.runtimeStyle.filter = '';
        supported = true;
      }
    }
    function afterPrint() {
      if (realSrc) {
        var rs = realSrc;
        realSrc = null;
        element.src = rs;
      }
    }
    </script>
    </public:component>
    Sorry I can;t help more...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've done some more work with it and found out that the problem is that the pngbehavior.htc file makes the png's disappear instead of transparent.
    I've also tested pngbehavior.htc in a seperate static html file and there it worked fine.
    So i figure the context in wich it's used in must be the problem.

    In the pngbehavior.htc file you can set wich png files should be transparent.
    Here's the line that does that:
    Code:
    var IS_PNG = /\-trans.png$/i; /* <-- NOTE: remove the "\-trans" to process *all* PNGs */
    I've now renamed and added -trans to only the files that need to have transparency enabled and the horizontal colorpicker now works fine (no white box anymore).
    When i unfold the big colorpicker though where the big square exists out of 2 png's that have transparency enabled, the big square...in other words, those two transparency enabled images are invisible.

    The sample is now updated to this version.
    Last edited by jeanpaul1979; 02-02-2007 at 12:22 PM. Reason: Update

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    I think I fixed it...see attached .zip file for new files.....

    I really don;t understand what the developer was trying to do by modifying that behavior file so extensively....

    The behavior in it's purest/simplest form is here: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html.

    So I used that and then added the beforePrint() and afterPrint() functions (I'm not even sure if those are necessary, you might try deleting them)...I removed the need to use the "-trans" suffix after PNG files, which didn;t seem to be serving any purpose except to confuse things...and I added the path name here, like I originally did earlier:
    Code:
    var blankSrc = "colorpicker/blank.gif";
    And voila!, somehow it's working now....test it out and make sure it still functions how you want it to...
    Attached Files Attached Files
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    OK, here ya go....this is all your behavior file needs to contain...use this .htc file instead of the one in the attached .zip file:
    Code:
    <public:component>
    <public:attach event="onpropertychange" onevent="propertyChanged()" />
    <script>
    
    var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
    var realSrc;
    var blankSrc = "colorpicker/blank.gif";
    
    if (supported) fixImage();
    
    function propertyChanged() {
       if (!supported) return;
    
       var pName = event.propertyName;
       if (pName != "src") return;
       // if not set to blank
       if ( ! new RegExp(blankSrc).test(src))
          fixImage();
    };
    
    function fixImage() {
       // get src
       var src = element.src;
    
       // check for real change
       if (src == realSrc) {
          element.src = blankSrc;
          return;
       }
    
       if ( ! new RegExp(blankSrc).test(src)) {
          // backup old src
          realSrc = src;
       }
    
       // test for png
       if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
          // set blank image
          element.src = blankSrc;
          // set filter
          element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                         src + "',sizingMethod='scale')";
       }
       else {
          // remove filter
          element.runtimeStyle.filter = "";
       }
    }
    
    </script>
    </public:component>
    ...sweet simplicity
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Darn, i just installed IE7. I have a buggy standalone version of IE6 installed on wich it's not working right. But the IE6 version is buggy so it's a confusing situation.

    It does work different then it ever has done before, i get en empty horizontal picker but when i move my mouse over it i do get the color feedback on the left of the picker and i can move my mouse over the (invisible) button on the right to unfold the big color picker. The square on the big color picker now changes color but the gradient is gone.

    Do you have these problems too or does it work fine with your version of IE6?
    And do you also have a standalone by the way? Since you mention you tested on IE7 before.

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    Oy, don't even use the IE6 or ealier standalone versions, because they are just that, Buggy with a capital "B"...

    Get yourself a free copy of Microsoft Virtual PC, and then install a fresh copy of Win XP Pro in a virtual machine (using a WinXP cd)....then you'll have IE6 working just how you want it to...just don;t install any of the recent MS Windows updates in your virtual machine, because then you'll likely end up with IE7 on there, and you;ll have to start all over (you'll have to re-install WinXP into another virtual machine)...Edit: on second thought, if you do download the latest updates (you probably should for security reasons), just make sure you don;t download IE7 as well unknowingly...

    You might even find that Microsoft offers a IE6 disk image that you can just install into a virtual machine...I thought they did...(Edit: I think this is the disk image here)

    So, in answer to your question, I have IE7 running on my regular hard drive, and IE6 running on my virtual hard drive, in a virtual OS...

    Edit:

    Do you have these problems too or does it work fine with your version of IE6?
    Yes, it works fine for me...
    Last edited by chump2877; 02-02-2007 at 04:13 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #10
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    One more thing: You'll need around 1GB of RAM for MS Virtual PC (I don;t know if Microsoft's site warns you about this)...otherwise, you'll notice a significant drop in your machine's performance....

    Also, see my edits above, in the previous post....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great it works! Damned microsoft giving us a hard time...

    I downloaded IE Virtual EI6 from here, for some strange reason i could not download from the microsoft site .

    By the way to answer a previous question you asked, i am aware of fckeditor and tinymce and i am using tinymce for this project in another area of the site. I'm going to use this script to pick the colors for the entire layout, not just the colors for individual content.

    Thanks for your generous help , i've just nominated you for the heck of it
    Last edited by jeanpaul1979; 02-02-2007 at 05:47 PM.

  • #12
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    Glad you got it all sorted out
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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