Question

I am trying to have a function change the reflectionColor in some javascript to a jqeuryui ui-widget-content color. The reason is I want to have the reflection color change when each Themeroller theme is applied.
Here is my code:

function colorReflect(){,
var jqueryuiColor = $('.ui-widget-content:first').css('background-color');
return $(jqueryuiColor).val();

}

var cf = new ContentFlow('contentFlow',{

    reflectionColor:  colorReflect,
    visibleItems: 4,
    circularFlow: true,
    startItem: "center",
    scrollInFrom: "none",
    space: 0.4,
    maxItemHeight : 200,
    showCaption: true,
    flowSpeedFactor: 1.0,
    scrollWheelSpeed: 1,
    flowDragFriction: 1,
    reflectionGap: 0.0,
    reflectionHeight: 0.4,
            onReachTarget : function(){
    if (global.isCboxOpen)
        initCBox();
},

I think I am on the wrong track! Any help would be appreciated.

Answer 1

Getting the color value:

Inside the function “colorReflect” , why are you doing jqueryuiColor.val()?
.val() is used to get values of forms element.

To get the css value of the backgroundColor, the first line is enough:

return $('.ui-widget-content:first').css('background-color');
// returns rgb(255,255,255)

The .css() function

Setting the reflection color value to the ContentFlow plugin:

Looking at the documentation, it seems the plugin accepts color values in hex format:

reflectionColor := string (default: transparent)
Set the “surface”-color of the reflection. Can be “none”, “transparent”, or #RRGGBB (hex RGB values)

The problem here is that jquery returns the color value in rgb() format, so you would have to convert it before !

Follow the method in the answer to convert rgb() color values to hex format.