pupunzi / jquery.mb.extruder

A sliding panel on jQuery framework
http://pupunzi.com
102 stars 33 forks source link

Compatibility with Spectrum color picker. #19

Open glemmon opened 8 years ago

glemmon commented 8 years ago

I would like to use the Spectrum color picker in a slide out (mb.extruder) form. When placed in the mbExtruder color picker does not open as expected. An example is here:

http://weatherby.genetics.utah.edu/phevor2/spectrum_test/test.html

mischievous commented 8 years ago

Yea! Its not me... I have the same problem with input type = 'color'.

pupunzi commented 8 years ago

@glemmon in your case you've a z-index problem of the Spectrum container. The solution is here:

$("#extruderRight").buildMbExtruder({
        scrollTimer: 4000,
        position:"right",
        width:300,
        hidePanelsOnClose:false,
        closeOnClick:false,
        extruderOpacity:.8,
        textOrientation:"tb",
        onExtContentLoad:function(){
                $('#example').spectrum({
                        color:'red',
                        appendTo:"extruderRight",
                        showAlpha:true,
                });
        },
        onExtOpen:function(){
                //bring the Spectrum colors container on the front
                $(". sp-container").mb_bringToFront();
        },
});