Custom Style Chooser

[Bestrafung]

I'm trying to setup a custom style chooser and following some advice found on these forums (I forget where) I was able to move the Style Changer from the footer to the top links. We are only using two styles, one narrow and one wide, and we want a radio button selector instead of a drop down. The original code is:

<form action="{vb:link forumhome|nosession}" method="get" id="footer_select">
<vb:if condition="$show['quickchooser']">
<select name="styleid" onchange="switch_id(this, 'style')">
<optgroup label="{vb:rawphrase quick_style_chooser}">
{vb:raw quickchooserbits}
</optgroup>
</select>
</vb:if>
</form>

and the radio button code I tried is:

<form action="{vb:link forumhome|nosession}" method="get" id="footer_select">
<vb:if condition="$show['quickchooser']">
<input type="radio" name="styleid" value="5" onChange="switch_id(this, 'style')"/>
Narrow (Default)
<input type="radio" name="styleid" value="4" onChange="switch_id(this, 'style')"/>
Wide
</vb:if>
</form>


If anyone has any ideas I'd greatly appreciate it. I'm still trying to figure it out but I'm not very good with code like this.

[BirdOPrey5]

Unfortunately the JavaScript function switch_id is hard coded to use a <select> input and just won't work with any other type of input. You'd need to rewrite the function or make a new one to work with radio buttons.

FYI - this is the javascript function in question:


function switch_id(C,E)
{
var F = C.options[C.selectedIndex].value;
if(F=="")
{
return;
}
var B = new String(window.location);
var A = new String("");
B=B.split("#");
if(B[1])
{
A = "#" + B[1];
}
B = B[0];
if(B.indexOf(E+"id=") != -1 && is_regexp)
{
var D=new RegExp(E + "id=\\d+&?");
B = B.replace(D, "");
}
if(B.indexOf("?") == -1)
{
B += "?";
}
else
{
lastchar = B.substr(B.length - 1);
if(lastchar != "&" && lastchar != "?")
{
B += "&";
}
}
window.location = B + E + "id=" + F + A;
}

[BirdOPrey5]

OK so if you add this javascript to your template:


<script type="text/javascript">
function switch_id2(C,E)
{
var F = C.value;
if(F=="")
{
return;
}
var B = new String(window.location);
var A = new String("");
B=B.split("#");
if(B[1])
{
A = "#" + B[1];
}
B = B[0];
if(B.indexOf(E+"id=") != -1 && is_regexp)
{
var D=new RegExp(E + "id=\\d+&?");
B = B.replace(D, "");
}
if(B.indexOf("?") == -1)
{
B += "?";
}
else
{
lastchar = B.substr(B.length - 1);
if(lastchar != "&" && lastchar != "?")
{
B += "&";
}
}
window.location = B + E + "id=" + F + A;
}
</script>


And then change the calls in your code from switch_id to switch_id2 it will work.