Need help in my design html / css / javascript

Question

Hello,

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

IMHO, this is just a really bad idea - for starters your page is broken for anyone without JS, for another now you have to reimplement everything which is standardised, browser-safe and pre-written in the form of radio buttons, and you're breaking a well-understood user convention.

I strongly recommend you reconsider radio buttons. You shouldn't be promoting form over function.

Answer 2

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.)