ColorSphere (DHTML Control) Internet Explorer <-> Firefox

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • ColorSphere (DHTML Control) Internet Explorer <-> Firefox

    Hi liebe Com.

    Wie fasst jeder begründe ich meine Anmeldung dadurch das ich ein problem habe und nicht weiterkomme :P

    Unten angehängt habe ich ein DHTML Control zur Farbauswahl.

    Im Firefox (wie sollte es auch anderes sein) funktioniert alles tadellos. Benutze ich Internet Explorer kann mann die Maus nicht über das Farbfeld ziehen bzw das kleine runde Bild.

    Sowie ich das sehe wird die variable e irgendwo überschrieben. Eine Lösung habe ich in den 5 Stunden leider nicht gefunden.

    Wäre schön wenn ihr mir da weiterhelfen könntet :)

    Mythli

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>ColorJack: DHTML Color Picker</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <link href="plugin.css" rel="stylesheet" type="text/css" />
    7. </head>
    8. <body>
    10. <div id="everything">
    11. <div style="FONT-FAMILY: Garamond, Times, Serif; TEXT-ALIGN: center; PADDING-TOP: 20px;">
    12. <fieldset id="colorspy"><legend>DHTML Color Picker</legend>
    13. <div id="mini" onmousedown="Picker.core('mini',event)">
    14. <div class="north"><span id="mHEX">FFFFFF</span><div onmousedown="\$S('mini').display='none';">X</div></div>
    15. <div class="south" id="mSpec" style="HEIGHT: 128px; WIDTH: 128px;" onmousedown="Picker.core('mCur',event)">
    16. <div id="mCur" style="TOP: 86px; LEFT: 68px;"></div>
    17. <img src="http://www.colorjack.com/software/media/circle.png" onmousedown="return false;" ondrag="return false;" onselectstart="return false;">
    18. <img src="http://www.colorjack.com/software/media/resize.gif" id="mSize" onmousedown="Picker.core('mSize',event); return false;" ondrag="return false;" onselectstart="return false;">
    19. </div>
    20. </div>
    21. <div id="plugID" style="HEIGHT: 104px; WIDTH: 550px; MARGIN: 12px 0 0 170px; PADDING-TOP: 60px; COLOR: #000; BORDER: 1px solid #333; TEXT-ALIGN: center; FONT-SiZE: 25px; BACKGROUND: #333;"><a href="http://www.nofunc.com/DHTML_Color_Picker/">DHTML Color Picker</a><br>Free to use on your own projects!</div>
    22. </fieldset>
    23. </div>
    24. </div>
    26. <script type="text/javascript">
    28. /* DHTML Color Sphere : v1.0.2 : 2008/04/17 */
    29. /* http://www.colorjack.com/software/dhtml+color+sphere.html */
    31. function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }
    32. function $S(o) { o=$(o); if(o) return(o.style); }
    33. function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }
    34. function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
    35. function isset(v) { return((typeof(v)=='undefined' || v.length==0)?false:true); }
    36. function toggle(i,t,xy) { var v=$S(i); v.display=t?t:(v.display=='none'?'block':'none'); if(xy) { v.left=xy[0]; v.top=xy[1]; } }
    37. function XY(e,v) { var o=agent('msie')?{'X':e.clientX+document.body.scrollLeft,'Y':e.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); }
    38. function zero(n) { return(!isNaN(n=parseFloat(n))?n:0); }
    39. function zindex(d) { d.style.zIndex=zINDEX++; }
    42. /* COLOR PICKER */
    44. Picker={};
    46. Picker.stop=1;
    48. Picker.core=function(o,e,xy,z,fu) {
    50. function point(a,b,e) { eZ=XY(e); commit([eZ.X+a,eZ.Y+b]); }
    51. function M(v,a,z) { return(Math.max(!isNaN(z)?z:0,!isNaN(a)?Math.min(a,v):v)); }
    53. function commit(v) { if(fu) fu(v);
    55. if(o=='mCur') { var W=parseInt($S('mSpec').width), W2=W/2, W3=W2/2;
    57. var x=v[0]-W2-3, y=W-v[1]-W2+21, SV=Math.sqrt(Math.pow(x,2)+Math.pow(y,2)), hue=Math.atan2(x,y)/(Math.PI*2);
    59. hsv={'H':hue>0?(hue*360):((hue*360)+360), 'S':SV<W3?(SV/W3)*100:100, 'V':SV>=W3?Math.max(0,1-((SV-W3)/(W2-W3)))*100:100};
    61. $('mHEX').innerHTML=color.HSV_HEX(hsv); $S('plugID').background='#'+$('mHEX').innerHTML; color.cords(W);
    63. }
    64. else if(o=='mSize') { var b=Math.max(Math.max(v[0],v[1])+oH,75); color.cords(b);
    66. $S('mini').height=(b+28)+'px'; $S('mini').width=(b+20)+'px';
    67. $S('mSpec').height=b+'px'; $S('mSpec').width=b+'px';
    69. }
    70. else {
    72. if(xy) v=[M(v[0],xy[0],xy[2]), M(v[1],xy[1],xy[3])]; // XY LIMIT
    74. if(!xy || xy[0]) d.left=v[0]+'px'; if(!xy || xy[1]) d.top=v[1]+'px';
    76. }
    77. };
    79. if(Picker.stop) { Picker.stop=''; var d=$S(o), eZ=XY(e); if(!z) zindex($(o));
    81. if(o=='mCur') { var ab=abPos($(o).parentNode); point(-(ab.X-5),-(ab.Y-28),e); }
    83. if(o=='mSize') { var oH=parseInt($S('mSpec').height), oX=-XY(e).X, oY=-XY(e).Y; }
    85. else { var oX=zero(d.left)-eZ.X, oY=zero(d.top)-eZ.Y; }
    87. document.onmousemove=function(e){ if(!Picker.stop) point(oX,oY,e); };
    88. document.onmouseup=function(){ Picker.stop=1; document.onmousemove=''; document.onmouseup=''; };
    90. }
    91. };
    93. Picker.hsv={H:0, S:0, V:100};
    95. zINDEX=2;
    98. /* COLOR LIBRARY */
    100. color={};
    102. color.cords=function(W) {
    104. var W2=W/2, rad=(hsv.H/360)*(Math.PI*2), hyp=(hsv.S+(100-hsv.V))/100*(W2/2);
    106. $S('mCur').left=Math.round(Math.abs(Math.round(Math.sin(rad)*hyp)+W2+3))+'px';
    107. $S('mCur').top=Math.round(Math.abs(Math.round(Math.cos(rad)*hyp)-W2-21))+'px';
    109. };
    111. color.HEX=function(o) { o=Math.round(Math.min(Math.max(0,o),255));
    113. return("0123456789ABCDEF".charAt((o-o%16)/16)+"0123456789ABCDEF".charAt(o%16));
    115. };
    117. color.RGB_HEX=function(o) { var fu=color.HEX; return(fu(o.R)+fu(o.G)+fu(o.B)); };
    119. color.HSV_RGB=function(o) {
    121. var R, G, A, B, C, S=o.S/100, V=o.V/100, H=o.H/360;
    123. if(S>0) { if(H>=1) H=0;
    125. H=6*H; F=H-Math.floor(H);
    126. A=Math.round(255*V*(1-S));
    127. B=Math.round(255*V*(1-(S*F)));
    128. C=Math.round(255*V*(1-(S*(1-F))));
    129. V=Math.round(255*V);
    131. switch(Math.floor(H)) {
    133. case 0: R=V; G=C; B=A; break;
    134. case 1: R=B; G=V; B=A; break;
    135. case 2: R=A; G=V; B=C; break;
    136. case 3: R=A; G=B; B=V; break;
    137. case 4: R=C; G=A; B=V; break;
    138. case 5: R=V; G=A; B=B; break;
    140. }
    142. return({'R':R?R:0, 'G':G?G:0, 'B':B?B:0, 'A':1});
    144. }
    145. else return({'R':(V=Math.round(V*255)), 'G':V, 'B':V, 'A':1});
    147. };
    149. color.HSV_HEX=function(o) { return(color.RGB_HEX(color.HSV_RGB(o))); };
    152. /* LOAD */
    154. $S('mini').left=($('colorspy').offsetLeft+35)+'px';
    155. $S('mini').top=($('colorspy').offsetTop+36)+'px';
    157. </script>
    158. </body>
    159. </html>
    Alles anzeigen
    Bilder

    • jsie_colorsphere.jpg

      127,59 kB, 872×750, 323 mal angesehen

    • fehler_ie_vs.jpg

      68,83 kB, 902×442, 362 mal angesehen

    • colorsphere_firefox_ok.jpg

      14,36 kB, 778×199, 291 mal angesehen
    Dateien

  • Willkommen!

    Sorry, tausende Zeilen an Fremdcode gehen wir hier normalerweise nicht durch.
    Ich bin schon bei den ersten zwei Zeilen hängen geblieben

    Besuch doch mal die Webseite des Scripts: nofunc.org/DHTML_Color_Sphere/
    Funktioniert es auf der Webseite mit dem Internet Explorer?
    Wenn ja, hast du einen Fehler bei der Implementierung gemacht.
    Wenn nein, dann kannst du den Autor ja mal direkt anschreiben.

    Ansonsten würde ich dir einfach empfehlen einen anderen Color Picker zu verwenden.
    Zum Beispiel hier eine JQUERY Version: eyecon.ro/colorpicker/