JavaScript - Expandable Lists Issue
Hello, I'm pretty new to JS but I can script a few things. I'm using a pre-written script, but trying to add a functionality that uses my + and - images to indicate whats whether the list is expanded or not.
It works on the first click. The symbol starts as a plus, you click it and it expands and goes to minus. After that the list maintains functionality (for the most part) but doesn't continue changing symbols back and forth. I've pored over the script for HOURS but I can't find the solution. Working Link Example My written JS: Code: // JavaScript Document var expandables = new Array(); expandables[0] = "expand_northeast"; expandables[1] = "expand_southeast"; expandables[2] = "expand_midwest"; expandables[3] = "expand_southwest"; expandables[4] = "expand_west"; var clickCounter = 0; function expand(current) { //add height to the containing div if(clickCounter<=1) { var newHeight = document.getElementById('region_us').offsetHeight + 187; document.getElementById('region_us').style.height = newHeight.toString() + 'px'; clickCounter+=1; } //get the section name var section = current.split('_')[1]; for ( var i=0; i<expandables.length; i++ ){ if(document.getElementById(expandables[i]).id.indexOf('collapse') != -1){ //if it has collapse in id string var tempSection = expandables[i].split('_')[1]; //parse just the region document.getElementById(expandables[i]).id='expand_' + tempSection; //change the id to expand / plus symbol expandables[i] = document.getElementById('expand_' + tempSection).id; //make the change in the array as well } } document.getElementById(current).href='javascript:animatedcollapse.show(\'stats_'+ section + '\');'; document.getElementById(current).onclick=function() {collapse('\'collapse_'+section +'\'');}; document.getElementById(current).id="collapse_" + section + ""; for (x in expandables) { if(expandables[x] == current){ expandables[x] = document.getElementById('collapse_' + section).id; } } //alert(expandables); } function collapse(current) { var section = current.split('_')[1]; //alert(current); current = ("expand_"+section); document.getElementById(current).href='javascript:animatedcollapse.hide(\'stats_'+ section + ');'; document.getElementById(current).onclick=function() {expand('"expand_'+section+'"');}; document.getElementById(current).id='expand_' + section; for (x in expandables) { if(expandables[x] == current){ expandables[x] = document.getElementById('expand_' + section).id; } } } Relevant HTML: Code: <a id="expand_northeast" href="javascript://" onclick="expand('expand_northeast');"></a> <span class="state_title">Northeast</span> <span class="state_title_num">2,749</span> <span class="state_title_perc">62.5%</span> <div id="stats_northeast" style="display:none;"> <span class="state colored">Maine</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br /> <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br /> <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br /> <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br /> <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br /> <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br /> <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br /> <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br /> <span class="state colored">Maryland</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br /> <span class="state">Pennsylvania</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br /> </div> Thanks guys! Similar TutorialsHey guys, I own an online internet radio station and I have many different way which people can tune in. One way is the browse 'n' play feature. The browse 'n' play feature allows you to browse the net at the same time as being tuned into the radio. Below, I have installed an 'Expandable Sticky Bar' which is used for the radio panel. http://www.dynamicdrive.com/dynamici.../stickybar.htm What I am trying to do, is simply add that bar on every page my visitors visit. So, when the listen chooses 'Browse 'n' Play' I want a new window or tab to open, with Google and my bar at the bottom. I cannot figure out how I could do this, any ideas on how I could make this happen? Thanks. I just got this problem when I try to add the expandable divs in my webpage. However when I click the divs on the page, I can't see the rest of my content. This is my page, does anybody know what happened with my code??!! http://www.calibredesign.com/clients..._news_new.html the divs are on the button of the page. Thanks!! hi, i got a expandable menu that is working. i wonder if there is any way to make the links show as html and css if the user has disabled javascript i my code including javascript and css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="JavaScript" type="text/JavaScript"> <!-- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } //--> </script> <style type="text/css"> .menu1{ margin-left:25px; padding-left:20px; padding-top:2px; padding-bottom: 2px; display:block; text-decoration: none; color: #000000; height: 20px; width: 200px; background-color: #03C; border: thin solid #FFF; } .submenu{ background-image: url(images/submenu.gif); display: block; height: 19px; margin-left: 38px; padding-top: 2px; padding-left: 7px; color: #333333; } .hide{ display: none; } .show{ display: block; } </style> </head> <body> <a class="menu1" onclick="showHide('mymenu1')">Menu 1</a> <div id="mymenu1" class="hide"> <a href="#" class="submenu">Link One here</a> <a href="#" class="submenu">Link Two here</a> <a href="#" class="submenu">Link Three here</a> <a href="#" class="submenu">Link Four here</a> </div> <a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a> <div id="mymenu2" class="hide"> <a href="#" class="submenu">Link One here</a> <a href="#" class="submenu">Link Two here</a> <a href="#" class="submenu">Link Three here</a> <a href="#" class="submenu">Link Four here</a> </div> <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a> <div id="mymenu3" class="hide"> <a href="#" class="submenu">Link One here</a> <a href="#" class="submenu">Link Two here</a> <a href="#" class="submenu">Link Three here</a> <a href="#" class="submenu">Link Four here</a> </div> <a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a> <div id="mymenu4" class="hide"> <a href="#" class="submenu">Link One here</a> <a href="#" class="submenu">Link Two here</a> <a href="#" class="submenu">Link Three here</a> <a href="#" class="submenu">Link Four here</a> </div> <a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a> <div id="mymenu5" class="hide"> <a href="#" class="submenu">Link One here</a> <a href="#" class="submenu">Link Two here</a> <a href="#" class="submenu">Link Three here</a> <a href="#" class="submenu">Link Four here</a> </div> </body> </html> Hi, I'm completely new to using JavaScript having never used it before so please forgive me if this is ridiculously easy to solve. I want to include an expandable FAQ section in part of my website. I managed to find some code that works however by default the sections are expanded. I want them to automatically be collapsed when the page loads and when you click the image it then expands and shows the hidden text. The code I found is Code: <head><title> Untitled Page </title> <script type="text/javascript"> function expandable_toggle(id) { var tr = document.getElementById(id); if (tr==null) { return; } var bExpand = tr.style.display == ''; tr.style.display = (bExpand ? 'none' : ''); } function expandable_changeimage(id, sMinus, sPlus) { var img = document.getElementById(id); if (img!=null) { var bExpand = img.src.indexOf(sPlus) >= 0; if (!bExpand) img.src = sPlus; else img.src = sMinus; } } function Toggle_trGrpHeader1() { expandable_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif'); expandable_toggle('trRow1'); } function Toggle_trGrpHeader2() { expandable_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif'); expandable_toggle('row1'); } </script> </head> <body> <div> <table border="0"> <tr id="trGrpHeader1"> <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td> </tr> <tr id="trRow1"> <td> Hello<br><br></td></tr> <tr id="trGrpHeader2"><td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td> </tr> <tr id="row1"> <td> 123</td></tr> </table> </div> </body> </html> Any help you can give would be greatly appreciated. Many thanks I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable. I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx FROM JAVASCRIPTTOOLBOX A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row. The only requirements a 1. Put a class of "parent" on each parent row (tr) 2. Give each parent row (tr) an id 3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs Original code: Code: $(function() { $('tr.parent') .css("cursor","pointer") .attr("title","Click to expand/collapse") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); }); $('tr[@class^=child-]').hide().children('td'); }); This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing. My code now looks like this: Code: $(document).ready(function() { $('tr:not(.parent)').hide(); //$('tr.parent') $('.arrow') .css("cursor","pointer") .attr("title","Click to expand/collapse") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); $(this).toggleClass("up"); }); }); So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me? Thanks Hello, I was wondering whether it is possible to expand and collapse forum categories using JavaScript. The forum board I am using is phpBB. Trying to put my finger on how to achieve this result. About half way down on the page linked below you'll see "Recent - Comments - Popular - Tags" this table expands when you rollover and stays expanded while allowing you to populate the different content. Any help would be greatly appreciated, not even sure if I'm in the right forum. http://thedailydisney.com/blog/2010/...magic-kingdom/ Thanks for the time. Will I want to create a link which doesn't takes you to anew page but just expands to show it's information . Exactly like the one in FAQs where you click the question and the page expands to show you the answer.
Hi, I have a web form that I'm creating and it has some expandable checkboxes that need to be restricted based on choice. This is my criteria: If someone chooses checkbox number 1, they cannot choose any other checkbox. If someone chooses checkbox number 2, they may also choose number 3 but not 1 or 4, they must also answer the question that appears below. If someone chooses checkbox number 3, they may also choose number 2 but not 1 or 4, they must also answer the question that appears below. If someone chooses checkbox number 4, they cannot choose any other checkbox, and must answer the questions that appears below. One more caveat: If checkbox number 2 is chosen, and they've filled in all three lines of the question below, I need for them to dynamically add more lines as needed. I have attached my web form so you can see what I've done. I've researched these options and tried code from various examples but I can't seem to get it to work. Does anyone know how to accomplish all of this? Thank you in advance! Hey thanks in advance to anyone who can take a peak at my code and hopefully point me in the correct direction. I have been working on my final project in my javascript class for a bit, and there are a few erros I cant seem to find through firebug or error console. It is due this evening at midnight, so anyone that could help, I really need this assignment for a decent grade. Basically there are two issues so far, one needs to be solved so the other can be as well. First, line 103 - 105 should create a hyperlink to the specified id, but is doesn't return a number. so the link goes no where it is this code: PHP Code: //create hypertext link to the section heading var linkItem = document.createElement("a"); linkItem.innerHTML = n.innerHTML; linkItem.href = "#" + n.id; Next I belive there is a problem with the function expandCollapseDoc(), that might fix itself when the other problem is solved. The document should expand and collapse with the menu. Here is my javascript code: PHP Code: /* New Perspectives on JavaScript, 2nd Edition Tutorial 7 Tutorial Case Author: Mike Cleghorn Date: 2-15-10 Filename: toc.js Global Variables: sections An array contain the HTML elements used as section headings in the historic document Functions List: addEvent(object, evName, fnName, cap) Adds an event hander to object where evName is the name of the event, fnName is the function assigned to the event, and cap indicates whether event handler occurs during the capture phase (true) or bubbling phase (false) makeTOC() Generate a table of contents as a nested list for the contents of the "doc" element within the current Web page. Store the nested list in the "toc" element. levelNum(node) Returns the level number of the object node. If the object node does not represent a section heading, the function returns the value -1. createList() Goes through the child nodes of the "doc" element searching for section headings. When it finds a section heading, a new entry is added to the table of contents expandCollapse() Expands and collapse the content of the table of contents and the historic document expandCollapseDoc() Goes through the child nodes of the "doc" element determining which elements to hide and which elements to display isHidden(object) Returns a Boolean value indicating whether object is hidden (true) or not hidden (false) on the Web page by examining the display style for object and all its parent nodes up to the body element */ function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } addEvent(window, "load", makeTOC, false); var sections = new Array("h1","h2","h3","h4","h5","h6"); var sourceDoc; //document on which TOC is based on function makeTOC(){ var TOC = document.getElementById("toc"); TOC.innerHTML = "<h1>Table of Contents</h1>"; var TOCList = document.createElement("ol"); TOC.appendChild(TOCList); sourceDoc = document.getElementById("doc"); //generate list items containing section headings createList(sourceDoc, TOCList); } function levelNum(node) { for (var i = 0; i < sections.length; i++) { if(node.nodeName == sections[i].toUpperCase()) return i; } return -1; //node is not section heading } function createList(object, list) { var prevLevel = 0; //level of the pervious TOC entry var headNum = 0; //running count of headings for (var n = object.firstChild; n != null; n = n.nextSibling) { //loop through all nodes in object var nodeLevel = levelNum(n); if (nodeLevel != -1) { //node represents a section heading //insert id for the section heading if necessary headNum++; //create list item to match var listItem = document.createElement("li"); listItem.id = "TOC" + n.id; //create hypertext link to the section heading var linkItem = document.createElement("a"); linkItem.innerHTML = n.innerHTML; linkItem.href = "#" + n.id; //append the hypertext to the list entry listItem.appendChild(linkItem); if (nodeLevel == prevLevel) { //append the entry to the current list list.appendChild(listItem); } else if (nodeLevel > prevLevel) { //append entry to new nest list var nestedList = document.createElement("ol"); nestedList.appendChild(listItem); list.lastChild.appendChild(nestedList); //add plus/minus box beffore the text var plusMinusBox = document.createElement("span"); plusMinusBox.innerHTML = "--"; addEvent(plusMinusBox, "click", expandCollapse, false) nestedList.parentNode.insertBefore(plusMinusBox, nestedList.previousSibling); list = nestedList; prevLevel = nodeLevel; } else if (nodeLevel < prevLevel) { //append entry to a higher-level list var levelUp = prevLevel - nodeLevel; for (var i = 1; i<= levelUp; i++) {list = list.parentNode.parentNode;} list.appendChild(listItem); prevLevel = nodeLevel; } } } } function expandCollapse(e) { var plusMinusBox = e.target || event.srcElement; var nestedList = plusMinusBox.nextSibling.nextSibling; //Toggle the plus and minus symbol if (plusMinusBox.innerHTML == "--") plusMinusBox.innerHTML = "+" else plusMinusBox.innerHTML = "--"; //Toggle display of nested list if(nestedList.style.display == "none") nestedList.style.display = "" else nestedList.style.display = "none"; //expand/collapse doc to match TOC expandCollapseDoc(); } function expandCollapseDoc() { var displayStatus = ""; for (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) { var nodeLevel = levelNum(n); if (nodeLevel != -1) { //determain display status of TOC entry var TOCentry = document.getElementById("TOC" + n.id); if (isHidden(TOCentry)) displayStatus = "none" else displayStatus = ""; } if (n.nodeType == 1) { //apply to current status for the node n.style.display = displayStatus; } } } function isHidden(object) { for (var n = object; n.nodeName != "BODY"; n = n.parentNode) { if (n.style.display = "none") return true; } return false; } the html was too long, so i uploaded it to my webspace you can check out the almost working version at http://www.kinetic-designs.net/final/usconst.htm Again thank you so much! Any questions just ask! hello i have 2 lists and function to clean them Code: function del_sel(option) { if (option == "1") { document.forms[0].list1.innerHTML = ''; } if (option == "2") { document.forms[0].list2.innerHTML = ''; } } how to make this function shorter & without options ? smth like that Code: function del_sel(option) { document.forms[0].option.innerHTML = ''; } the problem is that this code returns mistake Code: function del_sel(option) { document.forms[0].option.innerHTML = ''; } ... <input type='button' value='Delete onclick='del_sel(form.list1);> Hi all, I have a JavaScript map of different regions (which are basically just seperate images merged together) and I want them to load different drop down list boxes according to which images/area of the map is clicked. There doesn't seem to be much on the net about loading specific elements on the page onClick like this(perhaps I'm barking up the wrong tree)... Can anyone provide an example of drop down boxes only loading on a page after an image is clicked? Or perhaps some way to populate an already loaded drop down list with an array, where different arrays are loaded into this drop down list depending on the image clicked? Cheers in advance. Tom Thanks for all the help Old Pedant. You're nice enough to lend people a hand when you don't have to, and this makes the second or third time you've helped me solve a problem I've had with my website. Thanks so much. So I'm making a page where when someone clicks on the second drop list, then it carrys out a function first, and it calculates it based on what the first droplist is picked. Here's the code I have: Code: <html> <head> <title></title> <script type="text/javascript"> function first() { var gold = 4; var green = 6; var red = 30; var blue = 0; var total = 100; if (calculate.color.GetElementById('gold').select) { var depends = gold/total }; if (calculate.color.GetElementById('green').select) { var depends = green/total }; if (calculate.color.GetElementById('red').select) { var depends = red/total }; if (calculate.color.GetElementById('blue').select) { var depends = blue/total }; if (calculate.choice1.GetElementById('first').select) { calculate.results.value = 1 * calculate.howmany.value * depends; } } </script> </head> <body> <form name="calculate"> <table> <td> I need: <input type="text" name="howmany" /> <br /> My choice is: </td> <td> <select name="color"> <option selected id="gold">Gold</option> <option id="green">Green</option> <option id="red">Red</option> <option id="blue">Blue Charms</option> </select> <br /> <select name="choice1"> <option id="first" onClick="first()"> First </option> </select> </td> </tr> <tr> <td colspan="2" align="center" valign="top"> You will need <input type="text" name="results" /> </td> </tr> </table> </form> </body> </html> Any help is well appreciated. Thanks. I need help please. I'm trying to validate when a user selects an item from the equipment select list they must select a reason code as to why they are ordering the item. This must work across all rows. Also the field to the left of the equipment select list should allow the user to key in the item # of the part and the select list automatically gets selected with the part. How the heck do I do this. I tried the functions I have included but they suck! Please help me Tracy Code: <script> function validateReason(){ var tr, i=1; while(tr=document.getElementById('Child'+(i++))){ var txtV=tr.getElementsByTagName('input')[0].value var selS=tr.getElementsByTagName('select')[0].selectedIndex; if(txtV.length>0&&selS==0){alert('If you enter a quantity you must select a reason!');return false} } } function change_uids(uid){ var uids = document.getElementById("uids"); for (var i=0; i<uids.options.length; i++){ if (uids.options[i].value == uid.value){ uids.options[i].selected = true; break; } } } </script> <form method="POST" onsubmit="return validateReason(this) ;" action="" name="theForm" > <table> <tr id='Child1'> <td><input type = 'text' MAXLENGTH='3' style = 'width:40px'; class='textfield' name='quantity[]' ></td> <td><input type = 'text' MAXLENGTH='6' style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td> <td> <select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'> <option value='' > - Choose Equipment - </option> <option value='112233' > ZENTIH - </option> <option value='332244' > EMERSON - </option> <option value='0949' >LG</option> <option value='99623' >SONY</option> </select> </td> <td> <select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> </td></tr> <tr id='Child2'> <td><input type = 'text' MAXLENGTH='3' style = 'width:40px'; class='textfield' name='quantity[]' ></td> <td><input type = 'text' MAXLENGTH='6' style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='num[]' ></td> <td> <select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'> <option value='' > - Choose Equipment - </option> <option value='112233' > ZENTIH - </option> <option value='332244' > EMERSON - </option> <option value='0949' >LG</option> <option value='99623' >SONY</option> </select> </td> <td> <select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> </td></tr> <tr id='Child3'> <td><input type = 'text' MAXLENGTH='3' style = 'width:40px'; class='textfield' name='quantity[]' ></td> <td><input type = 'text' MAXLENGTH='6' style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td> <td> <select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'> <option value='' > - Choose Equipment - </option> <option value='112233' > ZENTIH - </option> <option value='332244' > EMERSON - </option> <option value='0949' >LG</option> <option value='99623' >SONY</option> </select> </td> <td> <select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> </td></tr> </table> <input type="submit" value="SUBMIT" name="submit"> </form> Hi, I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance, <select name="module"> <option value="pic1.jpg>TM1</option> <option value="pic2.jpg>TM2</option> <option value="pic3.jpg>TM3</option> </select> <select name="location"> <option value="loc_1">Box1</option> <option value="loc_2">Box2</option> <option value="loc_3">Box3</option> Note: The option values are just examples, but each option must have a value in order for other things to work. Here is what I need to do: If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list); If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list); If TM3 is selected, all options in the dropdown "location" list are available. My javascript knowledge is very limited. Any help is greatly appreciated. Thanks in advance, JW Hi, I have a large e-commerce site that runs on a database. There are many products on the site which have 'variables' attached to them, e.g. colour, width, height etc. I have a script in place to sort the products depending on these variables. Apologies for the length of the code. Code: (function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st = setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState; if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);} else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){ document.addEventListener("DOMContentLoaded",i,false); } else if(e){ ( function(){var t=document.createElement('doc:rdy');try{t.doScroll('left'); i();t=null;}catch(e){st(arguments.callee,0);}})();}})(sortinit); var prodlines = new Array(); // for Products var spanids = new Array(); var lastsorttype = 'default'; var bReadyToSort = false; var searchlines = new Array(); // for Search Results var searchspanids = new Array(); var searchlastsorttype = 'default'; var bSearchReadyToSort = false; var sectlines = new Array(); // for Sections var sectspanids = new Array(); var sectlastsorttype = 'default'; var bSectReadyToSort = false; var bSortInitalised = false; // Search Results Related function searchreseq(seqtype){ // resequence search results if ( ! (bSearchReadyToSort || bPageIsLoaded) ) { alert('Please wait until the page has fully loaded. (SRC)'); return false; } searchlines.length = 0; searchspanids.length = 0; var spans = document.getElementsByTagName('span'); for ( var i=0; i<spans.length; i++ ) { if ( spans[i].id.indexOf('searchsortline_') == 0 ) { searchspanids.push(spans[i]); searchlines.push({ id: spans[i].id, price: spans[i].getAttribute('price').replace(/[^\d\.]/g,''), seq: spans[i].getAttribute('seq'), pname: spans[i].getAttribute('pname'), phtml: spans[i].innerHTML }); } } if ( seqtype == 'lowhigh' ) searchlines.sort(function(a,b){return a.price - b.price}); if ( seqtype == 'highlow' ) searchlines.sort(function(a,b){return b.price - a.price}); if ( seqtype == 'default' ) searchlines.sort(function(a,b){return a.seq - b.seq}); if ( seqtype == 'alpha' ) searchlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;}); if ( seqtype == 'reverse' ) searchlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;}); searchlastsorttype = seqtype; setCookie('SEARCHSORTTYPE', searchlastsorttype); searchshowsorttype(); for ( var i=0; i<searchlines.length; i++ ) { searchspanids[i].innerHTML = searchlines[i].phtml; searchspanids[i].id = searchlines[i].id; searchspanids[i].setAttribute('price', searchlines[i].price); searchspanids[i].setAttribute('seq', searchlines[i].seq); searchspanids[i].setAttribute('pname', searchlines[i].pname); } return false; } function searchshowsorttype(){ // highlight the type of sort that's currently in use if ( document.getElementById('searchsortdropdown') ) // see if we're using drop-downs { var dropdowns = document.getElementsByTagName('select'); // all drop-downs for ( var i=0; i<dropdowns.length; i++ ) { if ( dropdowns[i].name == 'searchsortdropdown' ) // relevant one { var sdd = dropdowns[i]; for ( var j=0; j<sdd.options.length; j++ ) { if ( sdd.options[j].value == searchlastsorttype ) sdd.selectedIndex = j; } } } } else { var buttonlinks = document.getElementsByTagName('input'); // looking for buttons for ( var i=0; i<buttonlinks.length; i++ ) { if ( buttonlinks[i].name == 'searchsortlink' ) { buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive'; } } var buttonlinks = document.getElementsByTagName('a'); // looking for A tags for ( var i=0; i<buttonlinks.length; i++ ) { if ( buttonlinks[i].name == 'searchsortlink' ) { buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive'; } } } } // Section Related function sectionseq(seqtype){ // resequence Sections if ( ! (bSectReadyToSort || bPageIsLoaded) ) { alert('Please wait until the page has fully loaded. (SECT)'); return false; } sectlines.length = 0; sectspanids.length = 0; var spans = document.getElementsByTagName('span'); for ( var i=0; i<spans.length; i++ ) { if ( spans[i].id.indexOf('sectionline_') == 0 ) { sectspanids.push(spans[i]); sectlines.push({ id: spans[i].id, price: spans[i].getAttribute('price'), seq: spans[i].getAttribute('seq'), pname: spans[i].getAttribute('pname'), phtml: spans[i].innerHTML }); } } if ( seqtype == 'lowhigh' ) sectlines.sort(function(a,b){return a.price - b.price}); if ( seqtype == 'highlow' ) sectlines.sort(function(a,b){return b.price - a.price}); if ( seqtype == 'default' ) sectlines.sort(function(a,b){return a.seq - b.seq}); if ( seqtype == 'alpha' ) sectlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;}); if ( seqtype == 'reverse' ) sectlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;}); sectlastsorttype = seqtype; setCookie('SECTSORTTYPE', sectlastsorttype); sectshowsorttype(); for ( var i=0; i<sectlines.length; i++ ) { sectspanids[i].innerHTML = sectlines[i].phtml; sectspanids[i].id = sectlines[i].id; sectspanids[i].setAttribute('price', sectlines[i].price); sectspanids[i].setAttribute('seq', sectlines[i].seq); sectspanids[i].setAttribute('pname', sectlines[i].pname); } return false; } function sectshowsorttype(){ // highlight the type of sort that's currently in use if ( document.getElementById('sectionsortdropdown') ) // see if we're using drop-downs { var dropdowns = document.getElementsByTagName('select'); // all drop-downs for ( var i=0; i<dropdowns.length; i++ ) { if ( dropdowns[i].name == 'sectionsortdropdown' ) // relevant one { var sdd = dropdowns[i]; for ( var j=0; j<sdd.options.length; j++ ) { if ( sdd.options[j].value == sectlastsorttype ) sdd.selectedIndex = j; } } } } else { var buttonlinks = document.getElementsByTagName('input'); // looking for buttons for ( var i=0; i<buttonlinks.length; i++ ) { if ( buttonlinks[i].name == 'sectsortlink' ) { buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive'; } } var buttonlinks = document.getElementsByTagName('a'); // looking for A tags for ( var i=0; i<buttonlinks.length; i++ ) { if ( buttonlinks[i].name == 'sectsortlink' ) { buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive'; } } } } // Product Related function reseq(seqtype, gotoanchor){ // resequence products if ( ! (bReadyToSort || bPageIsLoaded) ) { alert('Please wait until the page has fully loaded. (PROD)'); return false; } prodlines.length = 0; spanids.length = 0; var spans = document.getElementsByTagName('span'); for ( var i=0; i<spans.length; i++ ) { if ( spans[i].id.indexOf('sortline_') == 0 ) { spanids.push(spans[i]); prodlines.push({ id: spans[i].id, price: spans[i].getAttribute('price'), seq: spans[i].getAttribute('seq'), pname: spans[i].getAttribute('pname'), brand: spans[i].getAttribute('brand'), capacity: spans[i].getAttribute('capacity'), height: spans[i].getAttribute('height'), width: spans[i].getAttribute('width'), depth: spans[i].getAttribute('depth'), colour: spans[i].getAttribute('colour'), energyrating: spans[i].getAttribute('energyrating'), spinspeed: spans[i].getAttribute('spinspeed'), phtml: spans[i].innerHTML }); } } if ( seqtype == 'lowhigh' ) prodlines.sort(function(a,b){return a.price - b.price}); if ( seqtype == 'highlow' ) prodlines.sort(function(a,b){return b.price - a.price}); if ( seqtype == 'default' ) prodlines.sort(function(a,b){return a.seq - b.seq}); if ( seqtype == 'alpha' ) prodlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;}); if ( seqtype == 'reverse' ) prodlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;}); if ( seqtype == 'brand' ) prodlines.sort(function(a,b){return (a.brand <= b.brand) ? -1 : 1;}); if ( seqtype == 'capacity' ) prodlines.sort(function(a,b){return (b.capacity <= a.capacity) ? -1 : 1;}); if ( seqtype == 'height' ) prodlines.sort(function(a,b){return (a.height <= b.height) ? -1 : 1;}); if ( seqtype == 'width' ) prodlines.sort(function(a,b){return (a.width <= b.width) ? -1 : 1;}); if ( seqtype == 'depth' ) prodlines.sort(function(a,b){return (a.depth <= b.depth) ? -1 : 1;}); if ( seqtype == 'colour' ) prodlines.sort(function(a,b){return (a.colour <= b.colour) ? -1 : 1;}); if ( seqtype == 'energyrating' ) prodlines.sort(function(a,b){return (a.energyrating <= b.energyrating) ? -1 : 1;}); if ( seqtype == 'spinspeed' ) prodlines.sort(function(a,b){return (b.spinspeed <= a.spinspeed) ? -1 : 1;}); lastsorttype = seqtype; setCookie('SORTTYPE', lastsorttype); showsorttype(); for ( var i=0; i<prodlines.length; i++ ) { spanids[i].innerHTML = prodlines[i].phtml; spanids[i].id = prodlines[i].id; spanids[i].setAttribute('price', prodlines[i].price); spanids[i].setAttribute('seq', prodlines[i].seq); spanids[i].setAttribute('pname', prodlines[i].pname); spanids[i].setAttribute('brand', prodlines[i].brand); spanids[i].setAttribute('capacity', prodlines[i].capacity); spanids[i].setAttribute('height', prodlines[i].height); spanids[i].setAttribute('width', prodlines[i].width); spanids[i].setAttribute('depth', prodlines[i].depth); spanids[i].setAttribute('colour', prodlines[i].colour); spanids[i].setAttribute('energyrating', prodlines[i].energyrating); spanids[i].setAttribute('spinspeed', prodlines[i].spinspeed); } if ( gotoanchor && location.hash ) scrolltoanchor(location.hash); // Product Page just loaded and Anchor so we need to reposition // // Some Drillpine add-ons need reactivated after the DOM has been fiddled with // // Tabber (needs V210 onwards) - reset Tabber if ( window.resetallpanes ) resetallpanes(); // Tabber V3 if ( window.jqinittabber ) jqinittabber(); // Lightbox / Slimbox if ( window.Slimbox && window.Slimbox.scanPage ) Slimbox.scanPage(); // Lightbox / Slimbox2 if ( (typeof(jQuery) == 'function') && (typeof(jQuery.slimbox) == 'function') ) { $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); }); } return false; } function showsorttype(){ // highlight the type of sort that's currently in use if ( document.getElementById('sortdropdown') ) // see if we're using drop-downs { var dropdowns = document.getElementsByTagName('select'); // all drop-downs for ( var i=0; i<dropdowns.length; i++ ) { if ( dropdowns[i].name == 'sortdropdown' ) // relevant one { var sdd = dropdowns[i]; for ( var j=0; j<sdd.options.length; j++ ) { if ( sdd.options[j].value == lastsorttype ) sdd.selectedIndex = j; } } } } else { var buttonlinks = document.getElementsByTagName('input'); // looking for buttons for ( var i=0; i<buttonlinks.length; i++ ) { if ( buttonlinks[i].name == 'sortlink' ) { buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive'; } } var buttonlinks = document.getElementsByTagName('a'); // looking for A tags for ( var i=0; i<buttonlinks.length; i++ ) { if ( buttonlinks[i].name == 'sortlink' ) { buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive'; } } } } // General code function hidetagswithid(tag, id){ // hide all tags with ID var alltags = document.getElementsByTagName(tag); // all such tags for ( var i=0; i<alltags.length; i++ ) { if ( alltags[i].id == id ) // with ID { alltags[i].style.display = 'none'; // hide entire control alltags[i].style.visibility = 'hidden'; // hide entire control } } } function scrolltoanchor(anc){ // reposition to display anchor var ancs = document.getElementsByTagName('a'); anc = anc.replace(/.*\#/,''); // Search highlight passes duplicate anchors - lose one if ( ancs[anc] ) ancs[anc].scrollIntoView(true); } function sortinit(){ // called when DOM is loaded if (arguments.callee.done) return; arguments.callee.done = true; bSortInitialised = true; // Products if ( document.getElementById('sortwidget') ) { bReadyToSort = true; lastsorttype = getCookie('SORTTYPE'); if ( lastsorttype == null ) lastsorttype = 'default'; setCookie('SORTTYPE', lastsorttype); showsorttype(); if ( lastsorttype != 'default' ) { reseq(lastsorttype, true); } } // Search Results if ( document.getElementById('searchsortwidget') ) { bSearchReadyToSort = true; searchlastsorttype = getCookie('SEARCHSORTTYPE'); if ( searchlastsorttype == null ) searchlastsorttype = 'default'; setCookie('SEARCHSORTTYPE', searchlastsorttype); searchshowsorttype(); if ( searchlastsorttype != 'default' ) { searchreseq(searchlastsorttype); } } // Sections if ( document.getElementById('sectsortwidget') ) { // check for no prices available and hide buttons if so var spans = document.getElementsByTagName('span'); var rtot = 0; for ( var i=0; i<spans.length; i++ ) { if ( spans[i].id.indexOf('sectionline_') == 0 ) { var price = spans[i].getAttribute('price'); rtot += (price != null) ? price - 0 : 0; } } if ( rtot == 0 ) { if ( SectionSortLinksFinalOnly ) // do we only show links on final Sections { hidetagswithid('span', 'sectsortwidget'); // hide all sort widgets } else { if ( document.getElementById('sectpricelinks') ) // button or text links { hidetagswithid('span', 'sectpricelinks'); } if ( document.getElementById('sectionsortdropdown') ) // drop-down list { var dropdowns = document.getElementsByTagName('select'); // all drop-downs for ( var i=0; i<dropdowns.length; i++ ) { if ( dropdowns[i].id == 'sectionsortdropdown' ) // relevant one { var opts = dropdowns[i].options; for ( var j=opts.length; j>0; j-- ) // scan backwards as we're deleting items { if ( (opts[j - 1].value == "lowhigh") || (opts[j - 1].value == "highlow") ) { opts[j - 1] = null; } } } } } } } bSectReadyToSort = true; sectlastsorttype = getCookie('SECTSORTTYPE'); if ( sectlastsorttype == null ) sectlastsorttype = 'default'; setCookie('SECTSORTTYPE', sectlastsorttype); sectshowsorttype(); // only resequence if button showing and we've a non default sequence if ( (document.getElementById('sectsortwidget').style.display != 'none') && (sectlastsorttype != 'default') ) { sectionseq(sectlastsorttype); } } } function onloadsortinit(){ // optionally called on onload if ( ! bSortInitalised ) sortinit(); // only init if it's not already run } // in case we cannot activate on DOM loaded if (window.attachEvent) // IE { window.attachEvent("onload", onloadsortinit); } else // DOM { window.addEventListener("load", onloadsortinit, false); } I didn't write this script and I'm not a JavaScript expert, so i don't know how to edit it properly. I want to change it's function from sorting to filtering, i.e. something along the lines of a slice function. Any advice would be much appreciated. Hey, I've tried w3schools, tizag, and google, but haven't found exactly what I need. I need some way of easily figuring out which option in a drop down menu is checked, through the use of javascript, like how you can use document.formname.elementname[i].checked to find out which checkbox/radio button is checked. Anything that would return something that allows me to figure out which option has been chosen. I will need to have a function with 3 if statements, one for each option.
hello everybody I have a list like this Code: <ul id="main_menu"> <li><a href="#">Comments</a></li> <li><a href="#"> Advertising </a> <ul> <li><a href="#">edit/delete ads</a></li> <li><a href="#">Add Ads</a></li> </ul> </li> <li><a href="#">Groups</a></li> <li><a href="#">Members</a> <ul> <li><a href="#">Edit / Delete Member</a></li> <li><a href="#">Add Member</a></li> </ul> </li> <li><a href="#">Photo</a> <ul> <li><a href="#">edit / Delete Photo</a></li> <li><a href="#">Add a picture</a></li> </ul> </li> <li><a href="#">Sections</a> <ul> <li><a href="#">Edit / Delete section</a></li> <li><a href="#">Add Section</a></li> </ul> </li> <li><a href="#">General Settings</a></li> <li><a href="#">Home</a></li> </ul> This list contains lists of 8, including 4 lists contain children (Advertising , Members,Photo,Sections) And I've written this code but did not work very well Code: function MainMenu(item){ var MenuItems = document.getElementById('main_menu'); for (var i = 0; i < MenuItems.children.length; i++) { MenuItems.children[i].children[1].style.display = "none"; } item.children[1].style.display = "block"; } What i needed is when i press a list containing the submenus Close all open lists Then open this menu |