Staff en línea
Últimos temas
Hola a todos
por YoshiGM Jue Abr 19, 2018 12:27 pm

Foro invision
por Chalo Mar Abr 17, 2018 8:28 am

[Ocio] Contemos hasta el 5000
por Chalo Lun Abr 16, 2018 8:33 am

[ocio] Saludos a todos
por Himnoshistoricos Sáb Abr 14, 2018 5:01 am

[javascript] Selector de color para el foro
Tema iniciado por y Añadir a favoritos

[javascript] Selector de color para el foro 
el Miér Oct 07, 2015 11:42 pm
staff
[codebox]
probado para punbb, colocar el js en todas las paginas
[/codebox]

[hidecode]
Código:

(function(b){var a=function(){var S={},c,N=65,t,P='<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="colour_instructions">Use both controls to the left by clicking and dragging to select a color and shade<br /><br />Press the button <strong>Save</strong> below to save your color.</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" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',B={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:true,flat:false},J=function(T,V){var U=j(T);b(V).data("colorpicker").fields.eq(1).val(U.r).end().eq(2).val(U.g).end().eq(3).val(U.b).end()},u=function(T,U){b(U).data("colorpicker").fields.eq(4).val(T.h).end().eq(5).val(T.s).end().eq(6).val(T.b).end()},g=function(T,U){b(U).data("colorpicker").fields.eq(0).val(R(T)).end()},l=function(T,U){b(U).data("colorpicker").selector.css("backgroundColor","#"+R({h:T.h,s:100,b:100}));b(U).data("colorpicker").selectorIndic.css({left:parseInt(150*T.s/100,10),top:parseInt(150*(100-T.b)/100,10)})},G=function(T,U){b(U).data("colorpicker").hue.css("top",parseInt(150-150*T.h/360,10))},h=function(T,U){b(U).data("colorpicker").currentColor.css("backgroundColor","#"+R(T))},E=function(T,U){b(U).data("colorpicker").newColor.css("backgroundColor","#"+R(T))},n=function(T){var V=T.charCode||T.keyCode||-1;if((V>N&&V<=90)||V==32){return false}var U=b(this).parent().parent();if(U.data("colorpicker").livePreview===true){e.apply(this)}},e=function(U){var V=b(this).parent().parent(),T;if(this.parentNode.className.indexOf("_hex")>0){V.data("colorpicker").color=T=m(y(this.value))}else{if(this.parentNode.className.indexOf("_hsb")>0){V.data("colorpicker").color=T=f({h:parseInt(V.data("colorpicker").fields.eq(4).val(),10),s:parseInt(V.data("colorpicker").fields.eq(5).val(),10),b:parseInt(V.data("colorpicker").fields.eq(6).val(),10)})}else{V.data("colorpicker").color=T=i(M({r:parseInt(V.data("colorpicker").fields.eq(1).val(),10),g:parseInt(V.data("colorpicker").fields.eq(2).val(),10),b:parseInt(V.data("colorpicker").fields.eq(3).val(),10)}))}}if(U){J(T,V.get(0));g(T,V.get(0));u(T,V.get(0))}l(T,V.get(0));G(T,V.get(0));E(T,V.get(0));V.data("colorpicker").onChange.apply(V,[T,R(T),j(T)])},o=function(T){var U=b(this).parent().parent();U.data("colorpicker").fields.parent().removeClass("colorpicker_focus")},K=function(){N=this.parentNode.className.indexOf("_hex")>0?70:65;b(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");b(this).parent().addClass("colorpicker_focus")},I=function(T){var V=b(this).parent().find("input").focus();var U={el:b(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:(this.parentNode.className.indexOf("_hsb")>0?100:255),y:T.pageY,field:V,val:parseInt(V.val(),10),preview:b(this).parent().parent().data("colorpicker").livePreview};b(document).bind("mouseup",U,s);b(document).bind("mousemove",U,L)},L=function(T){T.data.field.val(Math.max(0,Math.min(T.data.max,parseInt(T.data.val+T.pageY-T.data.y,10))));if(T.data.preview){e.apply(T.data.field.get(0),[true])}return false},s=function(T){e.apply(T.data.field.get(0),[true]);T.data.el.removeClass("colorpicker_slider").find("input").focus();b(document).unbind("mouseup",s);b(document).unbind("mousemove",L);return false},w=function(T){var U={cal:b(this).parent(),y:b(this).offset().top};U.preview=U.cal.data("colorpicker").livePreview;b(document).bind("mouseup",U,r);b(document).bind("mousemove",U,k)},k=function(T){e.apply(T.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,(T.pageY-T.data.y))))/150,10)).get(0),[T.data.preview]);return false},r=function(T){J(T.data.cal.data("colorpicker").color,T.data.cal.get(0));g(T.data.cal.data("colorpicker").color,T.data.cal.get(0));b(document).unbind("mouseup",r);b(document).unbind("mousemove",k);return false},x=function(T){var U={cal:b(this).parent(),pos:b(this).offset()};U.preview=U.cal.data("colorpicker").livePreview;b(document).bind("mouseup",U,A);b(document).bind("mousemove",U,q)},q=function(T){e.apply(T.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,(T.pageY-T.data.pos.top))))/150,10)).end().eq(5).val(parseInt(100*(Math.max(0,Math.min(150,(T.pageX-T.data.pos.left))))/150,10)).get(0),[T.data.preview]);return false},A=function(T){J(T.data.cal.data("colorpicker").color,T.data.cal.get(0));g(T.data.cal.data("colorpicker").color,T.data.cal.get(0));b(document).unbind("mouseup",A);b(document).unbind("mousemove",q);return false},v=function(T){b(this).addClass("colorpicker_focus")},Q=function(T){b(this).removeClass("colorpicker_focus")},p=function(U){var V=b(this).parent();var T=V.data("colorpicker").color;V.data("colorpicker").origColor=T;h(T,V.get(0));V.data("colorpicker").onSubmit(T,R(T),j(T),V.data("colorpicker").el)},D=function(T){var X=b("#"+b(this).data("colorpickerId"));X.data("colorpicker").onBeforeShow.apply(this,[X.get(0)]);var Y=b(this).offset();var W=z();var V=Y.top+this.offsetHeight;var U=Y.left;if(V+176>W.t+W.h){V-=this.offsetHeight+176}if(U+356>W.l+W.w){U-=356}X.css({left:U+"px",top:V+"px"});if(X.data("colorpicker").onShow.apply(this,[X.get(0)])!=false){X.show()}b(document).bind("mousedown",{cal:X},O);return false},O=function(T){if(!H(T.data.cal.get(0),T.target,T.data.cal.get(0))){if(T.data.cal.data("colorpicker").onHide.apply(this,[T.data.cal.get(0)])!=false){T.data.cal.hide()}b(document).unbind("mousedown",O)}},H=function(V,U,T){if(V==U){return true}if(V.contains){return V.contains(U)}if(V.compareDocumentPosition){return !!(V.compareDocumentPosition(U)&16)}var W=U.parentNode;while(W&&W!=T){if(W==V){return true}W=W.parentNode}return false},z=function(){var T=document.compatMode=="CSS1Compat";return{l:window.pageXOffset||(T?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(T?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(T?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(T?document.documentElement.clientHeight:document.body.clientHeight)}},f=function(T){return{h:Math.min(360,Math.max(0,T.h)),s:Math.min(100,Math.max(0,T.s)),b:Math.min(100,Math.max(0,T.b))}},M=function(T){return{r:Math.min(255,Math.max(0,T.r)),g:Math.min(255,Math.max(0,T.g)),b:Math.min(255,Math.max(0,T.b))}},y=function(V){var T=6-V.length;if(T>0){var W=[];for(var U=0;U<T;U++){W.push("0")}W.push(V);V=W.join("")}return V},d=function(T){var T=parseInt(((T.indexOf("#")>-1)?T.substring(1):T),16);return{r:T>>16,g:(T&65280)>>8,b:(T&255)}},m=function(T){return i(d(T))},i=function(V){var U={h:0,s:0,b:0};var W=Math.min(V.r,V.g,V.b);var T=Math.max(V.r,V.g,V.b);var X=T-W;U.b=T;if(T!=0){}U.s=T!=0?255*X/T:0;if(U.s!=0){if(V.r==T){U.h=(V.g-V.b)/X}else{if(V.g==T){U.h=2+(V.b-V.r)/X}else{U.h=4+(V.r-V.g)/X}}}else{U.h=-1}U.h*=60;if(U.h<0){U.h+=360}U.s*=100/255;U.b*=100/255;return U},j=function(T){var V={};var Z=Math.round(T.h);var Y=Math.round(T.s*255/100);var U=Math.round(T.b*255/100);if(Y==0){V.r=V.g=V.b=U}else{var aa=U;var X=(255-Y)*U/255;var W=(aa-X)*(Z%60)/60;if(Z==360){Z=0}if(Z<60){V.r=aa;V.b=X;V.g=X+W}else{if(Z<120){V.g=aa;V.b=X;V.r=aa-W}else{if(Z<180){V.g=aa;V.r=X;V.b=X+W}else{if(Z<240){V.b=aa;V.r=X;V.g=aa-W}else{if(Z<300){V.b=aa;V.g=X;V.r=X+W}else{if(Z<360){V.r=aa;V.g=X;V.b=aa-W}else{V.r=0;V.g=0;V.b=0}}}}}}}return{r:Math.round(V.r),g:Math.round(V.g),b:Math.round(V.b)}},C=function(T){var U=[T.r.toString(16),T.g.toString(16),T.b.toString(16)];b.each(U,function(V,W){if(W.length==1){U[V]="0"+W}});return U.join("")},R=function(T){return C(j(T))},F=function(){var U=b(this).parent();var T=U.data("colorpicker").origColor;U.data("colorpicker").color=T;J(T,U.get(0));g(T,U.get(0));u(T,U.get(0));l(T,U.get(0));G(T,U.get(0));E(T,U.get(0))};return{init:function(T){T=b.extend({},B,T||{});if(typeof T.color=="string"){T.color=m(T.color)}else{if(T.color.r!=undefined&&T.color.g!=undefined&&T.color.b!=undefined){T.color=i(T.color)}else{if(T.color.h!=undefined&&T.color.s!=undefined&&T.color.b!=undefined){T.color=f(T.color)}else{return this}}}return this.each(function(){if(!b(this).data("colorpickerId")){var U=b.extend({},T);U.origColor=T.color;var W="collorpicker_"+parseInt(Math.random()*1000);b(this).data("colorpickerId",W);var V=b(P).attr("id",W);if(U.flat){V.appendTo(this).show()}else{V.appendTo(document.body)}U.fields=V.find("input").bind("keyup",n).bind("change",e).bind("blur",o).bind("focus",K);V.find("span").bind("mousedown",I).end().find(">div.colorpicker_current_color").bind("click",F);U.selector=V.find("div.colorpicker_color").bind("mousedown",x);U.selectorIndic=U.selector.find("div div");U.el=this;U.hue=V.find("div.colorpicker_hue div");V.find("div.colorpicker_hue").bind("mousedown",w);U.newColor=V.find("div.colorpicker_new_color");U.currentColor=V.find("div.colorpicker_current_color");V.data("colorpicker",U);V.find("div.colorpicker_submit").bind("mouseenter",v).bind("mouseleave",Q).bind("click",p);J(U.color,V.get(0));u(U.color,V.get(0));g(U.color,V.get(0));G(U.color,V.get(0));l(U.color,V.get(0));h(U.color,V.get(0));E(U.color,V.get(0));if(U.flat){V.css({position:"relative",display:"block"})}else{b(this).bind(U.eventName,D)}}})},showPicker:function(){return this.each(function(){if(b(this).data("colorpickerId")){D.apply(this)}})},hidePicker:function(){return this.each(function(){if(b(this).data("colorpickerId")){b("#"+b(this).data("colorpickerId")).hide()}})},setColor:function(T){if(typeof T=="string"){T=m(T)}else{if(T.r!=undefined&&T.g!=undefined&&T.b!=undefined){T=i(T)}else{if(T.h!=undefined&&T.s!=undefined&&T.b!=undefined){T=f(T)}else{return this}}}return this.each(function(){if(b(this).data("colorpickerId")){var U=b("#"+b(this).data("colorpickerId"));U.data("colorpicker").color=T;U.data("colorpicker").origColor=T;J(T,U.get(0));u(T,U.get(0));g(T,U.get(0));G(T,U.get(0));l(T,U.get(0));h(T,U.get(0));E(T,U.get(0))}})}}}();b.fn.extend({ColorPicker:a.init,ColorPickerHide:a.hidePicker,ColorPickerShow:a.showPicker,ColorPickerSetColor:a.setColor})})(jQuery);
    jQuery(document).ready(function($){
    $('body').prepend('<span class="custom_theme"><input type="text" id="colorpicker" /></span>');
    var customElements = ".pun #pun-navlinks, .pun .main-head, .pun .main-foot, .maintitle, .forumline tr th, .catHead, .bodylinewidth #page-footer";
      var customText = ".pun .posthead, .pun .posthead a, #wrap p.author, #ipbwrapper .post-header, #ipbwrapper .post-header a";
      $('#colorpicker').ColorPicker({
          onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
            $(el).css("backgroundColor", "#" + hex);
            $(customElements).css("background-color", "#" + hex);
            $(customText).css("color", "#" + hex);
            $.cookie('customcolor',hex,{ expires: 365, path: '/'});
          },
          onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
          },
          onChange: function (hsb, hex, rgb) {
            $(customElements).css("background-color", "#" + hex);
            $(customText).css("color", "#" + hex);
            $.cookie('customcolor',hex,{ expires: 365, path: '/'});
          }
      })
      .bind('keyup', function(){
          $(this).ColorPickerSetColor(this.value);
      });
      if ( ($.cookie('customcolor') != null))  {
          $(customElements).css("background-color", "#" + $.cookie('customcolor'));
          $(customText).css("color", "#" + $.cookie('customcolor'));
          $("#colorpicker").val($.cookie('customcolor'));
      }
      else{
          $(customElements).css("background-color","#000");
          $(customText).css("color","#000");
      }
    });
[/hidecode]
CSS
Código:
    .custom_theme {
    -moz-border-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-radius: 3px;
    background: #2a2a2a url('http://imgur.com/n5WBjiq.png') no-repeat 50% 50%;
    border: 1px solid #3f3f3f;
    cursor: pointer;
    width: 37px;
    height: 36px;
    bottom: 0px;
    right: 0px;
    position: fixed;
    }
    .custom_theme #colorpicker {
    border: 0 !important;
    background: none transparent !important;
    text-indent: -999px !important;
    height: 36px;
    font-size: 0;
    width: 37px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    display: block;
    }
    .colorpicker {
      width: 356px;
      height: 176px;
      overflow: hidden;
      position: absolute;
      background: url(http://imgur.com/cp9O00T.png);
      font-family: Arial, Helvetica, sans-serif;
      display: none;
      z-index: 999;
      margin-left: 36px;
    }
    .colour_instructions{
      width: 134px;
      height: 92px;
      position: absolute;
      left: 211px;
      top: 47px;
      text-align: left;
      font-size: 10px;
      color: #898989;
    }
    .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://imgur.com/0fI5T18.png);
    }
    .colorpicker_color div div {
      position: absolute;
      top: 0;
      left: 0;
      width: 11px;
      height: 11px;
      overflow: hidden;
      background: url(http://imgur.com/TiIaZhU.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://imgur.com/GwId8jQ.gif) left top;
      margin: -4px 0 0 0;
      left: 0px;
    }
    .colorpicker_new_color {
      position: absolute;
      width: 130px;
      height: 30px;
      left: 213px;
      top: 13px;
      background: #f00;
    }
    .colorpicker_current_color {
      position: absolute;
      width: 60px;
      height: 30px;
      left: 283px;
      top: 13px;
      background: #f00;
      display: none;
    }
    .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://imgur.com/8k1fljb.png) top;
      left: 212px;
      top: 142px;
    }
    .colorpicker_hex input {
      right: 6px;
    }
    .colorpicker_field {
      height: 22px;
      width: 62px;
      background-position: top;
      position: absolute;
      display: none; /* Hide colour boxes */
    }
    .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://imgur.com/LoNVkQy.png);
      top: 52px;
      left: 212px;
    }
    .colorpicker_rgb_g {
      background-image: url(http://imgur.com/AWdqy5f.png);
      top: 82px;
      left: 212px;
    }
    .colorpicker_rgb_b {
      background-image: url(http://imgur.com/tC2ZC6A.png);
      top: 112px;
      left: 212px;
    }
    .colorpicker_hsb_h {
      background-image: url(http://imgur.com/JWlDkxh.png);
      top: 52px;
      left: 282px;
    }
    .colorpicker_hsb_s {
      background-image: url(http://imgur.com/nIlHxOu.png);
      top: 82px;
      left: 282px;
    }
    .colorpicker_hsb_b {
      background-image: url(http://imgur.com/MBRfPJk.png);
      top: 112px;
      left: 282px;
    }
    .colorpicker_submit {
      position: absolute;
      width: 56px;
      height: 22px;
      background: url(http://imgur.com/8rxM5QJ.png) top;
      left: 288px;
      top: 142px;
      cursor: pointer;
      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;
    }
    .pun #pun-navlinks, .pun .main-head, .pun .main-foot, #wrap .navbar, #wrap .forabg, #wrap .postprofile, #ipbwrapper #submenu, #ipbwrapper .maintitle, #ipbwrapper #gfooter, .forumline tr th, .catHead, #page-footer {
      background: url('http://imgur.com/1JZt1zo.png') repeat-x 100% 50%;
    }
Chalo
avatar

¿Que estoy pensando? :

de regreso [table class=fecha_up][td]Se modifico:10/04/18 - 9:50 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6629


Puntos :

8685


Me gusta :

999


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.