CodeThatScroller Style Customize

Here you can find a description of

the most common style settings

show modes

scroller positioning

Show Modes

Scroller can work at one of the following modes:

When the mode is "scroll", items are scrolled through the view from one to another

When the mode is "slide", items stay in the view area and various visual MSIE effects can be applied.

For example:

var DemoDef1 = {
	"mode" : "slide",
	...

Style Settings

Keep in mind that all style settings described below are applicable either for the scroller control in whole or for every html/image object inside of this control.

To learn more about html/image object inside of the scroller click here.

To describe general style properties use the following structure:

"style" :
{
	"width" : Integer, // Object width in pixels
	"height" : Integer, // Object height in pixels
	"css" : String, // Object's CSS class
	"color" : String, // Text color for an object in any
	// possible color format
	// (#RRGGBB, {red|green|blue|...}.
	"bgimg" : String, 	// URL string that specifies
	// the background image for an object
	"bgcolor" : String, // Background color for an object in any
	// possible color format
	"align" : String // Text alignment within an object.
	// Possible values are identical to ones in HTML:
	// { right | left | center }.
}

Read more about specific scroller styles that allow you to describe the view area within a widget and comment area that is situated within a widget.

Scroller Positioning

To describe the positioning of the widget use the following construction:

"position" :
{
	"absolute" : Boolean, // If "true", the widget is absolutely positioned
	// within a parent object. Otherwise it's positioned
	// relatively. Default value is "true".
	"x" : Integer,
	"y" : Integer
}

Example - Style, mode, position

You can see an example and complete code here - Style, mode, position [popup]

Read more about CodeThatScroller >>