|
JavaScript - Showing Multiple Divs From Selectbox
Hello there !!
I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript...... I want to show multiple divs on select of a <option> box. So lets say there are 3 options Code: <select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>
And a javascript function to show the div`s Code: function showDivs(prefix,chooser) {
for(var i=0;i<chooser.options.length;i++) {
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedvalue = chooser.options[chooser.selectedIndex].value;
if(selectedvalue == "a")
{
displayDivs(prefix,"a");
displayDivs(prefix,"c");
displayDivs(prefix,"d");
}
if(selectedvalue == "b")
{
displayDivs(prefix,"b");
displayDivs(prefix,"c");
}
if(selectedvalue == "c")
{
displayDivs(prefix,"d");
}
}
function displayDivs(prefix,suffix) {
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
And some divs to show Code: <div id="diva" style="display:none;">blabla</div> <div id="divb" style="display:none;">blabla</div> <div id="divc" style="display:none;">blabla</div> <div id="divd" style="display:none;">blabla</div> All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good.. Then I choose option 'c' I get only one div. Thats good.. But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'.. Does anybody understand why?? Thanx allot !!! Similar TutorialsMy code (below) currently has a Table with 3 columns, each with a different selectBox. I wish to have just one cell with a changing selectBox. Initial state: Only the citySelectBox should display. (this is currently in the first column of the table) State2: If user selects <option value='-1'>[-- change country --]</option> then the countrySelectBox should appear. (This is currently in the second column of the table) State 3: On click of the countrySelectBox, the cityDiv (id='ctWrapper') should display. This is currently in the third column of the table) Note: The commented-out code has a text link. OnClick opens up the countrySelectBox, but I don't want a text link. I want the user to use the <option value='-1'>[-- change country --]</option> Haven't a clue how to do any of this Any help out there? New Kid On The Block Code: <script type="text/javascript">
<!--
function loadCities(countryID){
if(countryID == "") {
displayCities("");
return;
}
var contentLoader = new ylib.util.ContentLoader(this,"/ajax/citiesServer.asp?c=" + countryID,cityCallback,null);
//var x = req.send("GET",,"",null,null,false,countryID,cityCallback,null);
contentLoader.SendRequest();
}
function cityCallback(request){
displayCities(request.responseText);
}
function displayCities(cityOptions) {
var citySelect = xGetElementById('ct');
xDisplay(citySelect,'block');
var cityDiv = xGetElementById('ctWrapper');
var selectBox = "";
if(cityOptions != "") {
selectBox = "<select name='ct' id='ct' onchange='this.form.submit();'><option value=''>-- select city --</option>" +
cityOptions +
"</select>";
}
cityDiv.innerHTML = selectBox;
}
-->
</script>
<table align="right" border="0">
<tr>
<%If Instr(sUrl, "city.asp") Then%>
<td>
<form name="citySelect" method="GET" action="../en/city.asp" onsubmit="alert('submit to default page');return false;">
<select name="ct" id="ct" onchange="submit()">
<option value=''>-- change city --</option>
<option value='-1'>[-- change country --]</option>
<%=list_CityOptions("")%>
</select>
</form>
</td>
<%End If%>
<!--
<td>
<a style="padding-left:8px;font-size:12px;text-decoration:none;" href="javascript:void(0);"
onclick="this.style.display='none';<%If Instr(sUrl, "city.asp") Then%>citySelect.style.display='none';<%End IF%>xDisplay('locationSelection','block');">change country</a>
</td>
-->
</tr></table>
<div id="locationSelection" style="float:right; display:none;">
<form method="GET" action="../en/city.asp" onsubmit="alert('submit to default page');return false;">
<th>
<select name='c' onchange='loadCities(this.options[this.selectedIndex].value);'>
<option value="">-- select country --</option>
<option value="1">Israel</option>
<option value="63">USA - Central</option>
<option value="2">USA - North East</option>
<option value="61">USA - South East</option>
<option value="62">USA - West</option>
<option value="3">United Kingdom</option>
<option value="4">South Africa</option>
<%=list_DefaultCountryOptions("")%>
</select>
</th>
<th>
<p id='ctWrapper'></p>
</th>
</tr>
</table>
</form>
I dont claim any of the JS below as my own. link to an example page http://www.clansngamers.com/add_new_game.php You see the PS3 checkbox is standard: Working, It brings up the hidden div. The Xbox checkbox is coded exactly the same except it uses the custom checkbox image and it dont work. This is my problem. have tried to code this and failed asking for any help i suck at JS. The Code Im trying to add Code: function showMe(id){ var obj = document.getElementById(id);
if (obj.style.display == "none"){obj.style.display = "inherit";}
else {obj.style.display = "none";}
}
The basic layout Code: <input class="styled" name="foo" type="checkbox" id="foo" value="1" onclick="showMe('div1')" />
<input class="styled" name="bar" type="checkbox" id="bar" value="1" onclick="showMe('div2')" />
<div id='div1' style="display:none;">hidden content 1</div>
<div id='div2' style="display:none;">hidden content 2</div>
Custom Checkbox code Code: var checkboxHeight = "14";
var radioHeight = "14";
var selectWidth = "190";
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.top = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
Hi, Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
var obj;
var sel = $_('divContent').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
obj = sel[i].id;
if (obj != IDS) { $_(obj).style.display = 'none'; }
else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
}
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>
<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>
<div id="divContent">
<div id="BIO" class='divElem'>
<p>This is my content for bio</p>
</div>
<div id="News" class='divElem'>
<pThis is my content for news</p>
</div>
<div id="Portfolio" class='divElem'>
<p><This is my content for portfolio </p>
</div>
<div id="Resume" class='divElem'>
<p>This is my content for resume</p>
</div>
</div>
</body>
Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
document.getElementById('per_week').style.display = 'none';
document.getElementById('bond').style.display = 'none';
}
else {
document.getElementById('per_week').style.display = 'block';
document.getElementById('bond').style.display = 'block';
}
}
Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? Hi Experts, I have a fixed size area.called a container tag.And based on selection of no of divs the area should divide into those many no of equal divs.And is there any other techinic to divide area by multiple divs or parts. Thanks in advance Eswaraiah M Hi guys ,, I am new here could you please help me in this: I have multiple divs something like this PHP Code: <div id="div1"> <div id="div2"> <div id="div3"> .... </div> </div> I want JavaScript code to print div1 with all nested divs as well I tried using the following code but it only print div1 content PHP Code: var printContent = document.getElementById('div1'); var windowUrl = 'about:blank'; var uniqueName = new Date(); var windowName = 'Print' + uniqueName.getTime(); var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=200,height=200'); printWindow.document.write(printContent.innerHTML); printWindow.document.close(); printWindow.focus(); printWindow.print(); printWindow.close(); so please tell me how to do such operation ?? Hi I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose. Anyone know how that can be done? thanks I have a PHP script that automatically increases a div id number by one. An example would be: Code: <div id="globalEventX"> where X is a number from 1 to 1000. I created a couple of javascript functions to show/hide these divs and it looks like this: Code: function hideGlobalEvents()
{
var i;
var gEvent = 'globalEvent';
for(i=1; i<=1000; i++)
{
var globalEvent = gEvent + i;
document.getElementById(globalEvent).style.display='none';
}
}
function showGlobalEvents()
{
var i;
var gEvent = 'globalEvent';
for(i=1; i<=1000; i++)
{
var globalEvent = gEvent + i;
document.getElementById(globalEvent).style.display='block';
}
}
I then created a pair of radio buttons to call the show or hide functions. The code looks like this: Code: <input type="radio" name="GlobalLocal" onClick="javascript:hideGlobalEvents();">Personal</input> <input type="radio" name="GlobalLocal" checked onClick="javascript:showGlobalEvents();">Global</input> But, when I try to use the buttons, they do not suppress the DIVs. Can anyone give me an idea what I'm doing wrong? Thanks in advance! Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter The very basic onclick code I threw together: Code: function descw()
{
document.getElementById("desc").style.display="block";
}
function descc()
{
document.getElementById("desc").style.display="none";
}
The div that needs a description... Code: <div class="select"><img src="image.jpg" onclick="descw()"></div> ..and the actual description div. Code: <div id="desc"> <img src="close.jpg" onclick="descc"> <p>Description</p> </div> This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error. I'm writing a GUI css/html editor in JavaScript which is a litte ambitious considering I just started with js like a month ago. Here's my first hurdle: Users can add divs simply by clicking on the div or element in which they want the new div to reside. The creation of a new div is in the onclick event. However, when I click on a div, I'm getting an onclick events from it and all the divs positions below it, so it's creating multiple new divs and all I want is one! Is there any way to make the onclick even fire for just the top layer div? Maybe using the z-index or something? Please help if you can - I couldn't find anything related to this at all. Thanks I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html>
<head>
<title>Show and Hide</title>
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
document.getElementById(tid).style.display = "none";
}
else {
document.getElementById(tid).style.display = "";
}
}
//-->
</script>
These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>
And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! Hi there, i'm new in the forum and need some help. I'm using wordpress to make my website but i have a problem.. I'm making a tags-menu in wordpress and call it in php with this function: PHP Code: <?php $items = wp_get_nav_menu_items('tags-menu'); //var_dump($items); echo "<select id='designfields' name='designfields'>"; foreach ($items as $list){ if($list->menu_item_parent != "0"){ echo "<option value=".$list->url."> ".$list->title."</option>"; } else { echo "<option value=".$list->url.">".$list->title."</option>"; } } echo "</select>"; ?> this give me what i want: Code: <select id='designfields' name='designfields'> <option value=http://myweb.com.ar/portfolio/>All Fields</option> <option value=http://myweb.com.ar/tag/branding/>Branding</option> <option value=http://myweb.com.ar/tag/print-design/>Print Design</option> <option value=http://myweb.com.ar/tag/web-design/>Web Design</option> <option value=http://myweb.com.ar/tag/ui-design/>UI Design</option> <option value=http://myweb.com.ar/tag/motion-graphics/>Motion Graphics</option> <option value=http://myweb.com.ar/tag/illustration/>Illustration</option> </select> I want to style this with css so i use the plugin jquery.selectbox, but when i style my menu with this plugin i lose the functionality, i need to convert this optionvalues in links like function onChange (a jumpmenu). so i think the problem is in the jquery.selectbox.js in some place must transform optionvalue in link. Here is the jquery.selectbox im using: https://github.com/claviska/jquery-s...y.selectBox.js Need some help with this, thanks Hi, I have a select box whose options are populated from an xml file, the code goes like this: Code: var sel_html = '<select onChange="handleSelected(this)">' +
'<option selected> - Select a zone - <\/option>';
var a = 0;
function createPolygon(pts,colour,name) {
var shape = new GPolygon(pts,"#000000",1,1,colour,0.5, {title:name});
gpolygons[a] = shape;
// ======= Add the entry to the select box =====
sel_html += '<option> ' + name + '<\/option>';
// ==========================================================
a++;
return shape;
}
// ======= This function handles selections from the select box ====
// === If the dummy entry is selected, the info window is closed ==
function handleSelected(opt) {
for (var a=0; a<gpolygons.length; a++) {
gpolygons[a].hide();
}
var a = opt.selectedIndex - 1;
if (a > -1) {
gpolygons[a].show()
}
}
sel_html += '<\/select>';
document.getElementById("selection").innerHTML = sel_html;
which works fine for showing one option at a time, but what I would like to do is have one of the selections to be to show all of the options at the same time. At the moment I have it working with a checkbox that works off a separate piece of code, but it would be great to have that option within the select box. You can see the select box in question here - it's the one on the right which says "Select a zone" thanks in advance. Hi All, I am a newbie to Javascript, I have a text box which when searched with 3 characters of vendor name will do ajax request and populate the results below the textbox, beside the box are two arrows pointing to a selectbox, when i clcik on the right arrow after the search the vendor name should to added to the select box.... similarly after i add required vendor names, I should be able to delete the name from the select box. I have completed the ajax search part of the textbox, and I am stuck with the passing value to the selectbox portion. Anyhelp will be appreciated. thanks in advance! |
|||||||