homepage Welcome to WebmasterWorld Guest from 174.129.103.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
need help with advanced checkbox
advanced checkbox, checkbox onclick
miteno




msg:3284617
 10:15 am on Mar 17, 2007 (gmt 0)

hello!

can someone help me how do i make advanced checkbox,
i mean if someone click on checkbox, it must open small dropdown menu with advanced options,

let say checkbox is called "airbags"
if you click it , it opens choice with "1 airbag, 2 airbags, 4 airbags ...", if you choose something , menu gets closed and you can see checkbox with changed description, e.g.: "4x airbags". it also must have different value id.

i can send you url where i see it done, i just have no chance to code it. can someone make it for me , i'm gonna pay for it of course

if not advice someone who can help
thanx

 

Moby_Dim




msg:3285272
 6:46 am on Mar 18, 2007 (gmt 0)

something like this may be :

<html><head><title>Checkbox menu</title>
<style type="text/css">
<!--
#menu {visibility : hidden; width : 100px; height : 100px; border : 1px solid #999;}
.mitem {visibility : inherit; width : 98px; height : 23px; background : #ff0; margin : 1px;}
-->
</style>
<script type="text/javascript">
<!--
function che() {
var cb = document.getElementById("cbox");
var lcb = document.getElementById("lcbox");
var menu = document.getElementById("menu");
if(cb.checked == true) {
menu.style.visibility = 'visible'
}
else {
menu.style.visibility = 'hidden';
lcb.innerHTML = 'Choose airbags'
}
}

function mche(id) {
var lcb = document.getElementById("lcbox");
var menu = document.getElementById("menu");
var menu_item = document.getElementById(id);

lcb.innerHTML = menu_item.innerHTML;
menu.style.visibility = 'hidden';
}
// -->
</script>
</head>

<body>
<form name="ff" id="ff">
<input type="checkbox" id="cbox" onchange="che()">&nbsp;<label for="cbox" id="lcbox">Choose airbags</label>
</form>
<div id="menu">
<div id="mitem1" class="mitem" onclick="mche(this.id)">1 airbag</div>
<div id="mitem2" class="mitem" onclick="mche(this.id)">2 airbag</div>
<div id="mitem3" class="mitem" onclick="mche(this.id)">3 airbag</div>
<div id="mitem4" class="mitem" onclick="mche(this.id)">4 airbag</div>
</div>
</body>
</html>

Did not understand fully the following : "it also must have different value id." What do you mean?

miteno




msg:3285394
 12:25 pm on Mar 18, 2007 (gmt 0)

thanx, i got something that match better to me:

<HTML>
<HEAD>
<TITLE>Show Select Text in Label</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
<FORM name='f1'>
<input type='checkbox' name='cb1' onclick="ShowSelectInLabel.cb(this,abSelect,'selOption')"><label id='selOption'>Add Airbags</label>
<SELECT name='abSelect'>
<option value=''>Please Select</option>
<option value='1'>1 Airbag</option>
<option value='2'>2 Airbags</option>
<option value='4'>4 Airbags</option>
</SELECT><BR>

<input type='checkbox' name='cb2' onclick="ShowSelectInLabel.cb(this,abSelect,'selOption')"><label id='selOption2'>Add Parking Assist</label>
<SELECT name='abSelect2'>
<option value=''>Please Select</option>
<option value='1'>Front Parking Assist</option>
<option value='2'>Rear Parking Assist</option>
<option value='3'>Front and Rear Parking Assist</option>
</SELECT>
</FORM>

<SCRIPT type='text/javascript'>

ShowSelectInLabel=
{
sets:[],

init:function(cBox, selBox, labelID)
{
var boxObj=this.sets[cBox.name]=[];

boxObj.cBox=cBox;
boxObj.selBox=selBox;

if( (boxObj.label=document.getElementById(labelID)).firstChild)
boxObj.txt = boxObj.label.firstChild.data;
else
boxObj.label.appendChild(document.createTextNode(''));

boxObj.selBox.onchange=new Function("ShowSelectInLabel.selBox(ShowSelectInLabel.sets['"+cBox.name+"'])");
boxObj.selBox.style.display='none';
boxObj.cBox.onclick=new Function("ShowSelectInLabel.cBox(ShowSelectInLabel.sets['"+cBox.name+"'])");
},

cBox:function(boxObj)
{
if(boxObj.cBox.checked)
{
boxObj.label.firstChild.data=boxObj.selBox.selectedIndex>0?boxObj.selBox[boxObj.selBox.selectedIndex].text:boxObj.txt;
boxObj.selBox.style.display='block';
}
else
{
boxObj.label.firstChild.data=boxObj.txt;
boxObj.selBox.selectedIndex=0;
boxObj.selBox.style.display='none';
}
},

selBox:function(boxObj)
{
var selected = boxObj.selBox.selectedIndex > 0,
selection= selected?boxObj.selBox[boxObj.selBox.selectedIndex]:null;

boxObj.label.firstChild.data=(selected?selection.text:boxObj.txt);
boxObj.selBox.style.display='none';
boxObj.cBox.checked=selected;
}
}

ShowSelectInLabel.init(document.forms.f1.cb1, document.forms.f1.abSelect, 'selOption');

ShowSelectInLabel.init(document.forms.f1.cb2, document.forms.f1.abSelect2, 'selOption2');

</SCRIPT>
</BODY>
</HTML>

Moby_Dim




msg:3285434
 1:08 pm on Mar 18, 2007 (gmt 0)

Well, may be you are right. But my script's been created in 15 min. only. If you prefer complex solutions to simplicity - let it be. At the same time do not forget about usability issues. The later example requires 2 clicks vs. 1 in mine example to do the same. To escape this it's better to add "size" attribute to both select boxes may be. And finally I do not understand the primary idea in the end - why to hide select boxes at all? All this are obsolete and useless tricks. IMHO, of course.

miteno




msg:3286099
 10:46 am on Mar 19, 2007 (gmt 0)

i like that idea because why to show other options, if someone has chosen some option, it's saving with space.
thanx anyway for your imputs...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved