Question

I am trying to design a file hosting website template, the problem is i have redesigned the radio buttons to div elements to have custom image instead of default circles with javascript,

This is image 1 when default page loads

<script type="text/javascript">
<!--
//script to change background-color of the selected
//button and put the appropriate value in an input object
function btnClick(btnNum){
for (i=1;i<=4;i++){
tempBtnVal=document.getElementById('btnVal')
tempBtn=document.getElementById('btn'+i)
tempBtn.style.backgroundPosition=(i==btnNum?'0 -163px':'0 -30px')
tempBtn.style.color=(i==btnNum?'#333':'#6a7072')
}
tempBtnVal.value=btnNum
}
//-->
</script>

my html

<div id="btn1" name="btn1" class="buttonDiv" value='1' onclick="btnClick('1')" style="background: url(images/inSprite.png) no-repeat scroll 0 -163px; color:#333;"><div id="btnTxt">local</div></div>

<div id="btn2" name="btn2" class="buttonDiv" value='2' onclick="btnClick('2')"><div class="btnTxt">remote</div></div>

if i click on any other tab it works fine and that tab gets selected

Image 2 when clicked on URL Upload

but the script store the cookie of last selected tab, so next time a person visits the site automatically that tab is shown, so as i have manually hard coded the css in the div it breaks the design, like in image below i selected “URL Upload” and than reloaded the page

Image 3 when exited the browser and revisited the site

in selector it is showing Form Upload but instead URL Upload tab is open.

Please help me solve the problem so that if URL Upload is open it show the URL Upload selected in tab above.

I cant use any framework due to limitations, i can only use javascript but not framework. Please help me solving as i have very less knowledge of javascript.

Thank You very much.

Regards,

Shishant Todi

Answer 1

You need to preserve the state of the radio buttons after the browser closes. Cookies are the only way I can think of doing this, and you can manipulate cookies using javascript. (googling “javascript cookies” yields a lot of good tutorials for this.)