Problème avec le sélecteur de couleurs

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec le sélecteur de couleurs

Message par bat2001 le Ven 17 Fév 2012 - 12:53

je n'arrive pas a mettre le sélecteur de couleurs car au lieu de faire 160 lignes cela en faiir 1


Dernière édition par Pinguino le Ven 17 Fév 2012 - 15:06, édité 2 fois (Raison : Modification du titre par un plus explicite)

bat2001
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 21/11/2011

http://farmri.forumgratuit.org
bat2001 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par Manka77 le Ven 17 Fév 2012 - 12:57

Bonjour Bat2001,

Désolé pour la modération je sais que ce n'est pas mon rôle mais j'aimerai rappeler deux petites règles pour la bonne convivialité du forum:

En toute occasion restez poli, courtois et respectueux, cela commence par savoir dire Bonjour ou Bonsoir et Merci.

Pensez à donner un titre explicite à vos sujets.

Ensuite pour votre problème, serait-il possible d'avoir le script ou le code Css en question ainsi que la page où le sélecteur est situé?

Cordialement
Manka

PS: Encore désolé pour la modération.

Manka77
*****

Masculin
Messages : 580
Inscrit(e) le : 20/12/2008

http://forum.forumactif.com
Manka77 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par bat2001 le Sam 18 Fév 2012 - 18:47

voili voilou ce que je vois

bat2001
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 21/11/2011

http://farmri.forumgratuit.org
bat2001 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par bat2001 le Lun 20 Fév 2012 - 7:46

Merci de me répondre

bat2001
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 21/11/2011

http://farmri.forumgratuit.org
bat2001 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par Invité le Lun 20 Fév 2012 - 9:57

Met cela dans les JavaScript qui à été donner par Dr. karlos;)
Code:
/**
 *
 * Color picker
 * Author: Stefan Petre www.eyecon.ro
 *
 * Dual licensed under the MIT and GPL licenses
 *
 */
$(function(){
  $("#color").length!=0&&(function(c){var e=function(){var e=65,j={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:!0,flat:!1},i=function(a,b){var d=h(a);c(b).data("colorpicker").fields.eq(1).val(d.r).end().eq(2).val(d.g).end().eq(3).val(d.b).end()},n=function(a,b){c(b).data("colorpicker").fields.eq(4).val(a.h).end().eq(5).val(a.s).end().eq(6).val(a.b).end()},l=function(a,b){c(b).data("colorpicker").fields.eq(0).val(k(h(a))).end()},
o=function(a,b){c(b).data("colorpicker").selector.css("backgroundColor","#"+k(h({h:a.h,s:100,b:100})));c(b).data("colorpicker").selectorIndic.css({left:parseInt(150*a.s/100,10),top:parseInt(150*(100-a.b)/100,10)})},p=function(a,b){c(b).data("colorpicker").hue.css("top",parseInt(150-150*a.h/360,10))},r=function(a,b){c(b).data("colorpicker").currentColor.css("backgroundColor","#"+k(h(a)))},q=function(a,b){c(b).data("colorpicker").newColor.css("backgroundColor","#"+k(h(a)))},D=function(a){a=a.charCode||
a.keyCode||-1;if(a>e&&a<=90||a==32)return!1;c(this).parent().parent().data("colorpicker").livePreview===!0&&g.apply(this)},g=function(a){var b=c(this).parent().parent(),d;if(this.parentNode.className.indexOf("_hex")>0){d=b.data("colorpicker");var f=this.value,e=6-f.length;if(e>0){for(var g=[],j=0;j<e;j++)g.push("0");g.push(f);f=g.join("")}f=m(s(f));d.color=d=f}else this.parentNode.className.indexOf("_hsb")>0?b.data("colorpicker").color=d=t({h:parseInt(b.data("colorpicker").fields.eq(4).val(),10),
s:parseInt(b.data("colorpicker").fields.eq(5).val(),10),b:parseInt(b.data("colorpicker").fields.eq(6).val(),10)}):(d=b.data("colorpicker"),f={r:parseInt(b.data("colorpicker").fields.eq(1).val(),10),g:parseInt(b.data("colorpicker").fields.eq(2).val(),10),b:parseInt(b.data("colorpicker").fields.eq(3).val(),10)},d.color=d=m({r:Math.min(255,Math.max(0,f.r)),g:Math.min(255,Math.max(0,f.g)),b:Math.min(255,Math.max(0,f.b))}));a&&(i(d,b.get(0)),l(d,b.get(0)),n(d,b.get(0)));o(d,b.get(0));p(d,b.get(0));q(d,
b.get(0));b.data("colorpicker").onChange.apply(b,[d,k(h(d)),h(d)])},E=function(){c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")},F=function(){e=this.parentNode.className.indexOf("_hex")>0?70:65;c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");c(this).parent().addClass("colorpicker_focus")},G=function(a){var b=c(this).parent().find("input").focus(),a={el:c(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>
0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:a.pageY,field:b,val:parseInt(b.val(),10),preview:c(this).parent().parent().data("colorpicker").livePreview};c(document).bind("mouseup",a,u);c(document).bind("mousemove",a,v)},v=function(a){a.data.field.val(Math.max(0,Math.min(a.data.max,parseInt(a.data.val+a.pageY-a.data.y,10))));a.data.preview&&g.apply(a.data.field.get(0),[!0]);return!1},u=function(a){g.apply(a.data.field.get(0),[!0]);a.data.el.removeClass("colorpicker_slider").find("input").focus();
c(document).unbind("mouseup",u);c(document).unbind("mousemove",v);return!1},H=function(){var a={cal:c(this).parent(),y:c(this).offset().top};a.preview=a.cal.data("colorpicker").livePreview;c(document).bind("mouseup",a,w);c(document).bind("mousemove",a,x)},x=function(a){g.apply(a.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,a.pageY-a.data.y)))/150,10)).get(0),[a.data.preview]);return!1},w=function(a){i(a.data.cal.data("colorpicker").color,a.data.cal.get(0));
l(a.data.cal.data("colorpicker").color,a.data.cal.get(0));c(document).unbind("mouseup",w);c(document).unbind("mousemove",x);return!1},I=function(){var a={cal:c(this).parent(),pos:c(this).offset()};a.preview=a.cal.data("colorpicker").livePreview;c(document).bind("mouseup",a,y);c(document).bind("mousemove",a,z)},z=function(a){g.apply(a.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,a.pageY-a.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,
a.pageX-a.data.pos.left))/150,10)).get(0),[a.data.preview]);return!1},y=function(a){i(a.data.cal.data("colorpicker").color,a.data.cal.get(0));l(a.data.cal.data("colorpicker").color,a.data.cal.get(0));c(document).unbind("mouseup",y);c(document).unbind("mousemove",z);return!1},J=function(){c(this).addClass("colorpicker_focus")},K=function(){c(this).removeClass("colorpicker_focus")},L=function(a){var b=c(this).parent(),d=b.data("colorpicker").color;b.data("colorpicker").origColor=d;r(d,b.get(0));b.data("colorpicker").onSubmit(d,
k(h(d)),h(d),b.data("colorpicker").el,a)},B=function(){var a=c("#"+c(this).data("colorpickerId"));a.data("colorpicker").onBeforeShow.apply(this,[a.get(0)]);var b=c(this).offset(),d;d=document.compatMode=="CSS1Compat";d={l:window.pageXOffset||(d?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(d?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(d?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||
(d?document.documentElement.clientHeight:document.body.clientHeight)};var f=b.top+this.offsetHeight,b=b.left;f+176>d.t+d.h&&(f-=this.offsetHeight+176);b+356>d.l+d.w&&(b-=356);a.css({left:b+"px",top:f+"px"});a.data("colorpicker").onShow.apply(this,[a.get(0)])!=!1&&a.show();c(document).bind("mousedown",{cal:a},A);return!1},A=function(a){M(a.data.cal.get(0),a.target,a.data.cal.get(0))||(a.data.cal.data("colorpicker").onHide.apply(this,[a.data.cal.get(0)])!=!1&&a.data.cal.hide(),c(document).unbind("mousedown",
A))},M=function(a,b,d){if(a==b)return!0;if(a.contains)return a.contains(b);if(a.compareDocumentPosition)return!!(a.compareDocumentPosition(b)&16);for(b=b.parentNode;b&&b!=d;){if(b==a)return!0;b=b.parentNode}return!1},t=function(a){return{h:Math.min(360,Math.max(0,a.h)),s:Math.min(100,Math.max(0,a.s)),b:Math.min(100,Math.max(0,a.b))}},s=function(a){a=parseInt(a.indexOf("#")>-1?a.substring(1):a,16);return{r:a>>16,g:(a&65280)>>8,b:a&255}},m=function(a){var b={h:0,s:0,b:0},d=Math.max(a.r,a.g,a.b),c=d-
Math.min(a.r,a.g,a.b);b.b=d;b.s=d!=0?255*c/d:0;b.h=b.s!=0?a.r==d?(a.g-a.b)/c:a.g==d?2+(a.b-a.r)/c:4+(a.r-a.g)/c:-1;b.h*=60;b.h<0&&(b.h+=360);b.s*=100/255;b.b*=100/255;return b},h=function(a){var b={},d=Math.round(a.h),c=Math.round(a.s*255/100),a=Math.round(a.b*255/100);if(c==0)b.r=b.g=b.b=a;else{var c=(255-c)*a/255,e=(a-c)*(d%60)/60;d==360&&(d=0);d<60?(b.r=a,b.b=c,b.g=c+e):d<120?(b.g=a,b.b=c,b.r=a-e):d<180?(b.g=a,b.r=c,b.b=c+e):d<240?(b.b=a,b.r=c,b.g=a-e):d<300?(b.b=a,b.g=c,b.r=c+e):d<360?(b.r=a,
b.g=c,b.b=a-e):(b.r=0,b.g=0,b.b=0)}return{r:Math.round(b.r),g:Math.round(b.g),b:Math.round(b.b)}},k=function(a){var b=[a.r.toString(16),a.g.toString(16),a.b.toString(16)];c.each(b,function(a,c){c.length==1&&(b[a]="0"+c)});return b.join("")},N=function(){var a=c(this).parent(),b=a.data("colorpicker").origColor;a.data("colorpicker").color=b;i(b,a.get(0));l(b,a.get(0));n(b,a.get(0));o(b,a.get(0));p(b,a.get(0));q(b,a.get(0))};return{init:function(a){a=c.extend({},j,a||{});if(typeof a.color=="string")a.color=
m(s(a.color));else if(a.color.r!=void 0&&a.color.g!=void 0&&a.color.b!=void 0)a.color=m(a.color);else if(a.color.h!=void 0&&a.color.s!=void 0&&a.color.b!=void 0)a.color=t(a.color);else return this;return this.each(function(){if(!c(this).data("colorpickerId")){var b=c.extend({},a);b.origColor=a.color;var d="collorpicker_"+parseInt(Math.random()*1E3);c(this).data("colorpickerId",d);d=c('<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",
d);b.flat?d.appendTo(this).show():d.appendTo(document.body);b.fields=d.find("input").bind("keyup",D).bind("change",g).bind("blur",E).bind("focus",F);d.find("span").bind("mousedown",G).end().find(">div.colorpicker_current_color").bind("click",N);b.selector=d.find("div.colorpicker_color").bind("mousedown",I);b.selectorIndic=b.selector.find("div div");b.el=this;b.hue=d.find("div.colorpicker_hue div");d.find("div.colorpicker_hue").bind("mousedown",H);b.newColor=d.find("div.colorpicker_new_color");b.currentColor=
d.find("div.colorpicker_current_color");d.data("colorpicker",b);d.find("div.colorpicker_submit").bind("mouseenter",J).bind("mouseleave",K).bind("click",L);i(b.color,d.get(0));n(b.color,d.get(0));l(b.color,d.get(0));p(b.color,d.get(0));o(b.color,d.get(0));r(b.color,d.get(0));q(b.color,d.get(0));b.flat?d.css({position:"relative",display:"block"}):c(this).bind(b.eventName,B)}})},showPicker:function(){return this.each(function(){c(this).data("colorpickerId")&&B.apply(this)})},hidePicker:function(){return this.each(function(){c(this).data("colorpickerId")&&
c("#"+c(this).data("colorpickerId")).hide()})},setColor:function(a){if(typeof a=="string")a=m(s(a));else if(a.r!=void 0&&a.g!=void 0&&a.b!=void 0)a=m(a);else if(a.h!=void 0&&a.s!=void 0&&a.b!=void 0)a=t(a);else return this;return this.each(function(){if(c(this).data("colorpickerId")){var b=c("#"+c(this).data("colorpickerId"));b.data("colorpicker").color=a;b.data("colorpicker").origColor=a;i(a,b.get(0));n(a,b.get(0));l(a,b.get(0));p(a,b.get(0));o(a,b.get(0));r(a,b.get(0));q(a,b.get(0))}})}}}();c.fn.extend({ColorPicker:e.init,
ColorPickerHide:e.hidePicker,ColorPickerShow:e.showPicker,ColorPickerSetColor:e.setColor})}(jQuery),$("#wcolor,#color").html("<div></div>"),defaulColor=my_getcookie("defaultColor")?my_getcookie("defaultColor"):"000000",$("#color div").ColorPicker({color:defaulColor,flat:!0,onSubmit:function(c,e,C,j){my_setcookie("defaultColor",e,1,0);bbfontstyle("[color=#"+e+"]","[/color]");selectWysiwyg(j,"color");return!1}}),$("#wcolor div").ColorPicker({color:defaulColor,flat:!0,onSubmit:function(c,e,C,j,i){my_setcookie("defaultColor",
e,1,0);vB_Editor.text_editor.format(i,"constructBBcode_select_color_#"+e,!1,!0)}}))
});


Enregistre.. Mais n'oublie pas de cocher toute les pages Wink !

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par bat2001 le Lun 20 Fév 2012 - 12:45

je vois toujours sa

bat2001
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 21/11/2011

http://farmri.forumgratuit.org
bat2001 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par Invité le Lun 20 Fév 2012 - 12:48

met dans la section du CSS ce CSS:
Code:
        .colorpicker {
          width: 356px;
          height: 176px;
          overflow: hidden;
          position: absolute;
          background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
          font-family: Arial, Helvetica, sans-serif;
          display: none;
        }
        .colorpicker_color {
          width: 150px;
          height: 150px;
          left: 14px;
          top: 13px;
          position: absolute;
          background: #f00;
          overflow: hidden;
          cursor: crosshair;
        }
        .colorpicker_color div {
          position: absolute;
          top: 0;
          left: 0;
          width: 150px;
          height: 150px;
          background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
        }
        .colorpicker_color div div {
          position: absolute;
          top: 0;
          left: 0;
          width: 11px;
          height: 11px;
          overflow: hidden;
          background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
          margin: -5px 0 0 -5px;
        }
        .colorpicker_hue {
          position: absolute;
          top: 13px;
          left: 171px;
          width: 35px;
          height: 150px;
          cursor: n-resize;
        }
        .colorpicker_hue div {
          position: absolute;
          width: 35px;
          height: 9px;
          overflow: hidden;
          background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
          margin: -4px 0 0 0;
          left: 0px;
        }
        .colorpicker_new_color {
          position: absolute;
          width: 60px;
          height: 30px;
          left: 213px;
          top: 13px;
          background: #f00;
        }
        .colorpicker_current_color {
          position: absolute;
          width: 60px;
          height: 30px;
          left: 283px;
          top: 13px;
          background: #f00;
        }
        .colorpicker input {
          background-color: transparent;
          border: 1px solid transparent;
          position: absolute;
          font-size: 10px;
          font-family: Arial, Helvetica, sans-serif;
          color: #898989;
          top: 4px;
          right: 11px;
          text-align: right;
          margin: 0;
          padding: 0;
          height: 11px;
        }
        .colorpicker_hex {
          position: absolute;
          width: 72px;
          height: 22px;
          background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
          left: 212px;
          top: 142px;
        }
        .colorpicker_hex input {
          right: 6px;
        }
        .colorpicker_field {
          height: 22px;
          width: 62px;
          background-position: top;
          position: absolute;
        }
        .colorpicker_field span {
          position: absolute;
          width: 12px;
          height: 22px;
          overflow: hidden;
          top: 0;
          right: 0;
          cursor: n-resize;
        }
        .colorpicker_rgb_r {
          background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
          top: 52px;
          left: 212px;
        }
        .colorpicker_rgb_g {
          background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
          top: 82px;
          left: 212px;
        }
        .colorpicker_rgb_b {
          background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
          top: 112px;
          left: 212px;
        }
        .colorpicker_hsb_h {
          background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
          top: 52px;
          left: 282px;
        }
        .colorpicker_hsb_s {
          background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
          top: 82px;
          left: 282px;
        }
        .colorpicker_hsb_b {
          background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
          top: 112px;
          left: 282px;
        }
        .colorpicker_submit {
          position: absolute;
          width: 22px;
          height: 22px;
          background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
          left: 322px;
          top: 142px;
          overflow: hidden;
        }
        .colorpicker_focus {
          background-position: center;
        }
        .colorpicker_hex.colorpicker_focus {
          background-position: bottom;
        }
        .colorpicker_submit.colorpicker_focus {
          background-position: bottom;
        }
        .colorpicker_slider {
          background-position: bottom;
        }

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu merci

Message par bat2001 le Lun 20 Fév 2012 - 13:02

merci cela marche

bat2001
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 21/11/2011

http://farmri.forumgratuit.org
bat2001 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par Invité le Lun 20 Fév 2012 - 13:06

Je t'invite a passer ce message en résolu en éditant ton premier message et cocher le bouton résolu Wink !


Bonne journée à toi !

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le sélecteur de couleurs

Message par MadDev le Lun 20 Fév 2012 - 13:18

@Manka77 a écrit:Bonjour Bat2001,

Désolé pour la modération je sais que ce n'est pas mon rôle mais j'aimerai rappeler deux petites règles pour la bonne convivialité du forum:

En toute occasion restez poli, courtois et respectueux, cela commence par savoir dire Bonjour ou Bonsoir et Merci.

Pensez à donner un titre explicite à vos sujets.

Ensuite pour votre problème, serait-il possible d'avoir le script ou le code Css en question ainsi que la page où le sélecteur est situé?

Cordialement
Manka

PS: Encore désolé pour la modération.



bonjour

Dans ce cas, merci de ne pas modérer Wink


@bat2001 a écrit:merci cela marche



bonjour

votre problème a t il été résolu ?

si c'est le cas merci d'éditer votre message en cliquant sur et mettre l'icone .

MadDev
Dévactif
Dévactif

Masculin
Messages : 1635
Inscrit(e) le : 19/02/2007

http://forum.forumactif.com
MadDev a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum