Create a Style Chooser

Question:

---

How can I add a Style Chooser like in the Sliding Billboard Styles Demo, so visitors can choose their own Billboard style?

Answer:

---

The addition of a Style Chooser for visitors, can be accomplished by adding two pieces of code to your page containing the Sliding Billboard. 

Before this is done, first add a Sliding Billboard to a page, and apply all the styles, from which you would visitors to choose from, to that Sliding Billboard. This will create all the styles-folders. Be sure to set the style that needs to be shown initially.

Next, switch to Code View and find the list of all the included CSS files. Below the last item in this list, enter the following code:

<script type="text/javascript">
function updateStyle() {
$('.dmxBillboard').removeClass('tabbed_blue apple_inspired_dark apple_inspired_light basic_tabs brushed_metal dark_black dark_blue dark_green dark_red dmxzone_inspired elegant_blue simple_tabs_blue sony_inspired tabbed_blue')
if ($('#style').val() != '') $('.dmxBillboard').addClass($('#style').val());
$('.dmxBillboard').each(function(){this.redraw();});
}
</script>

In this code, there is a list of styles, all seperated bij a space. Make sure that this list corresponds with all the styles that will be available to choose from.

Now, still in Code View, browse to a place on your page where you would like to enter the list from which visitoros can choose. Enter the following code at the chosen location.

<select id="style" onchange="updateStyle()"/>
<option value="">Default</option>
<option value="tabbed_blue">tabbed_blue</option>
<option value="apple_inspired_dark">apple_inspired_dark</option>
<option value="apple_inspired_light">apple_inspired_light</option>
<option value="basic_tabs">basic_tabs</option>
<option value="brushed_metal">brushed_metal</option>
<option value="dark_black">dark_black</option>
<option value="dark_blue">dark_blue</option>
<option value="dark_green">dark_green</option>
<option value="dark_red">dark_red</option>
<option value="dmxzone_inspired">dmxzone_inspired</option>
<option value="elegant_blue">elegant_blue</option>
<option value="simple_tabs_blue">simple_tabs_blue</option>
<option value="sony_inspired">sony_inspired</option>
</select>

Style this dropdown list the way it should appear on the page. Again, make sure that this list corresponds with the list in the first piece of code, and the styles that were chosen when creating the Billboard.

Upload the page and all of the necessary Billboard files, including all of the styles that can be chosen from. View and test the Billboard with Style Chooser on a live server.