JavaScript - How To Make Collapsable Code Appear Collapsed On Open
I have the code below that gives the ability to open and collapse sections. I don't know too much javascript and found this code online. I tweaked it to serve my purposes but it doesn't do one thing. I would like all of the areas to be collapsed when the page is opened. How would I tweak the code below to do that?
Code: <!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> <title>Untitled Page</title> <script type="text/javascript"> function ExpandCollapseTable1(titleRow) { if(titleRow.parentNode.childNodes.length > 1) { if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="") { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "none"; } } else { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "block"; } } } } function ExpandCollapseTable2(titleRow) { if(titleRow.parentNode.childNodes.length > 1) { if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="") { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "none"; } } else { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "block"; } } } } function ExpandCollapseTable3(titleRow) { if(titleRow.parentNode.childNodes.length > 1) { if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="") { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "none"; } } else { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "block"; } } } } function ExpandCollapseTable4(titleRow) { if(titleRow.parentNode.childNodes.length > 1) { if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="") { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "none"; } } else { for(var i=1;i<titleRow.parentNode.childNodes.length;i++) { titleRow.parentNode.childNodes[i].style.display = "block"; } } } } </script> </head> <body> <table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=red> <tr onclick="ExpandCollapseTable1(this);" style='cursor:pointer;'> <td> I</td> </tr> <tr> <td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=lightgreen> <tr onclick="ExpandCollapseTable2(this);" style='cursor:pointer;'> <td> A</td> </tr> <tr> <td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=yellow> <tr onclick="ExpandCollapseTable3(this);" style='cursor:pointer;'> <td> i</td> </tr> <tr> <td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=lightblue> <tr onclick="ExpandCollapseTable4(this);" style='cursor:pointer;'> <td> a</td> </tr> <tr> <td bgcolor=orange> CONTENT CONTENT CONTENT</td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> </body> </html> FYI, I've also posted this question at: http://www.tek-tips.com/submitpost.cfm?pid=216 http://www.webdeveloper.com/forum/sh...60#post1106660 Similar Tutorialsjust started learning scripting. This bookmarklet essentially takes the domain name of the tab currently open when one pressses it & runs a search query through Google prefixing the related: search operator. As evident, here it shows the result in the same page replacing the earlier one. I would like it to open in a new tab. Can you please tell me how to do so. Self-learning it. At an initial stage of learning, I am. Code: javascript:location.href='https://www.google.com/search?q=related%3A'+encodeURIComponent(location.host) Hi. I am trying to learn how to make a Javascript menu for my webpage. I have made the menu and it works. I can collapse a submenu when I click on the menu header. I wan't it to start collapsed and then open a menu item when you click on it. I have figured out that it have something to do with the function Closeall(). But can't figure out what. Perhaps someone in here can help me or perhaps help me make a better menu. <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>IT-Menu</title> <script type="text/javascript" language="javascript1.3"> function closeall() { var divs=document.getElementsByTagName('div') for(var i=0; i<divs.length; i++) divs.style.display='none'; } function clicked(element) { var div=document.getElementById(element) if(div.style.display=='none') div.style.display='block'; else div.style.display='none'; return; } </script> </head> <body> <a href="#" onclick="clicked('MENU1')">MENU1</a><div id="MENU1"> <a href="#">SUBMENU1</a> <br /> <a href="#">SUBMENU2</a> </div> <br /> <a href="#" onclick="clicked('MENU2')">MENU2</a><div id="MENU2"> <a href="#">SUBMENU1</a> <br /> <a href="#">SUBMENU2</a> </div> </body> Hello everyone, i kinda stuck at this point on my php script, it has this javascript code and i stuck there Line 16: Code: echo("<script language=\"JavaScript\">\nfunction openptc(tpge,pnme,w,h){\nsettings=\"width=\" + w + \",height=\" + h + \",scrollbars=yes,location=no,directories=no,status=1,menubar=no,toolbar=no,resizable=no\";\nwindow.open(tpge,pnme,settings);\n}\n//-->\n</script>"); Line 72: Code: print "<td><a href=\"#\" onClick=\"openptc('./paidtoclick.php?adid=$row[linkid]&action=start&".session_name()."=".session_id()."','PaidtoClickPage','640','480');\"><b>Click Here To View</b></a><tr>"; I think those 2 lines actually are my problem I hope you won't get stuck because it's php and javascript and html. This code makes the site open in a new pop up window. how to make it open in a new tab Please see the design. I want that when user click on "Vyrobce" on top this change design chage according to the design. To see the code please visit this link: http:// jordanek.eu/aktual/index6 dot html Please help me to fix it. Thank you. N.B. I use boostrap collapse javascript function for this section: http:// getbootstrap dot com/javascript/#collapse Hey so I have some javascript and CSS code and I can't figure out where the problem is. Javascript (and a little HTML) Code: <script type="text/javascript"> var rowVisible = false; function toggleDisplay(tbl) { var tblRows = tbl.rows; for (i = 0; i < tblRows.length; i++) { if (tblRows[i].className != "headerRow") { tblRows[i].style.display = (rowVisible) ? "none" : "table-row"; } } rowVisible = !rowVisible; } </script> <table id="theTable" width="100%" border="0"> <tr class="headerRow"> <td><div align="center"> <h1>Software </h1> </div></td> </tr> <tr class="headerRow"> <td><h3 onmouseover="style.fontWeight = 'bold'" onmouseout="style.fontWeight = 'normal'" onclick="toggleDisplay(document.getElementById('theTable'))">Norton Antivirus Endpoint Protection</h3></td> </tr> CSS Code: table#theTable tr { display:none; } table#theTable tr.headerRow { display:table-row; } Now what it's supposed to do, and actually does do, is when you click on the tr.header-row element, it opens up the cell beneath it. My problem I'd like to figure out is why I have to click twice to enable a different header. For instance, if I click on a header, it'll open up just fine. But the moment I go to click on a different header, I have to click twice before it opens up. It's like the first click shifts focus then the second click activates the display code or something. Does anyone see anything that would cause this? Or maybe some code I'm missing to fix it? I'd like the user to be able to click on any one of them and have it open on the first click. I don't care how many are open at a time, I just don't want them to have to click more than once to open up the information. Thanks! -Kaze- Hi, I usually don't deal with Javascript, and have no idea whatsoever about it. All I am trying to do is adjust my ad code from adbrite to make the ads (when clicked) open up in a new window rather than the current one, as this disrupts gameplay on my site. (I have a game site). This is my ad code: <!-- Begin: AdBrite, Generated: 2009-10-04 22:48:52 --> <script type="text/javascript"> var AdBrite_Title_Color = '6728B2'; var AdBrite_Text_Color = 'E1771E'; var AdBrite_Background_Color = '000000'; var AdBrite_Border_Color = '000000'; var AdBrite_URL_Color = 'FFFFFF'; try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';} </script> <span style="white-space:nowrap;"><script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1366148&zs=3436385f3630&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script> </span> <!-- End: AdBrite --> I've already checked, and it is not against Adbrite's TOS to do this, however they say they cannot help and you must figure it out yourself. Any help would be greatly appreciated. Hello, I was wondering whether it is possible to expand and collapse forum categories using JavaScript. The forum board I am using is phpBB. Please help me make the links below open in the "top" or "parent" frame of a window. For example, in HTML, you would use
Code: <a href="URL" target="_top">LINK</a> I just do not know how to make the links below perform in the parent window. (or even a new window if that is only possible.) Code: var $el, $tempDiv, $tempButton, divHeight = 0; $.fn.middleBoxButton = function(text, url) { return this.hover(function(e) { $el = $(this).css("border-color", "white"); divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom")); $tempDiv = $("<div />", { "class": "overlay rounded" }); $tempButton = $("<a />", { "href": url, "text": text, "class": "widget-button rounded", "css": { "top": (divHeight / 2) - 7 + "px" } }).appendTo($tempDiv); $tempDiv.appendTo($el); }, function(e) { $el = $(this).css("border-color", "#999"); $(".overlay").fadeOut("fast", function() { $(this).remove(); }) }); } $(function() { $(".widget-one").middleBoxButton("Action Games","action.htm"); $(".widget-two").middleBoxButton("Adventure Games", "adventure.htm"); $(".widget-three").middleBoxButton("Arcade Games", "arcade.htm"); $(".widget-four").middleBoxButton("Puzzle Games", "puzzle.htm"); $(".widget-five").middleBoxButton("Sport Games", "sport.htm"); $(".widget-six").middleBoxButton("Search Games", "searchgames.htm"); }); Thank you very much for your help!!! Hi there, I'm putting together a GeoCaching book for iPad that I intend to shop around upon completion. I have hit a stumbling block though. I want the co-ordinates in the PDF to open the Google Earth application. Using the current hyperlinks, the iPad links to Google Maps instead. Is it possible, using Javascript, to create a code that will directly open the Google Earth application and take the reader to those exact co-ordinates? Thanks in advance, WR Hi everyone I am a newbie with respect to programming and this is my first post I have a small problem, probably very basic to everyone except me, and would appreciate and value your advice I have entered below a javascript I am using on my website. This script is designed to automatically insert videos based on keywords and works perfectly except that my visitors are taken away from my website when they use it. Can someone please tell me what code to insert, and where, in order get the script to open in a new page. I am aware how to do this in html using target ="blank" but do not know how to do it in javascript. Thankyou in anticipation, the code I am using is below: Code: <!-- BEGIN HostDomain --> <div id="HostDomain_DivId"> </div> <script src="http://app.HostDomain.com/script/HostDomainUtils.js"> </script> <script language="JavaScript" type="text/javascript" src="http://app.HostDomain.com/script/widgetTy pe/carousel/ptContentflow.js" load="fancyScrollbar"> </script> <script type="text/javascript"> /* Do not change the values given below. */ var HostDomain_Organization_Name = "MySite"; var HostDomain_Organization_ID = "xxxxxxxx"; var HostDomain_Feed_ID = "xxxxxxx"; var HostDomain_DivId = "HostDomain_DivId"; var HostDomain_AppServerPath = "http://app.HostDomain.com"; </script> <script src="http://app.HostDomain.com/script/HostDoma in.js"> </script> <!-- END HostDomain --></font></td> Hi, I am using a password protection javascript code that works very well, but my problem is that I would like to edit the code so that the ".html" page will open inside an iframe on the main page. I think the code "window.location=verification+extension" needs to be edit to indicate the iframe that I want the html page to open in. The complete code is below in bold and parts of code in red text is where I think I need to edit, but I don't know how to edit the code to do what I want. Can anyone please Help Me, Thanks to all that respond. <!-- var pass=new Array() var t3="" var lim=7 pass[0]="TLMXe8VqAwsAllw" pass[1]="YeWAc9pfP1rmGrA" pass[2]="M8ljslaPqg0mQQp" pass[3]="SRdDwXWa0LSsGB" pass[4]="83I2WyO06m3aUjs0" pass[5]="453I2WyO06m3aUjs" var extension=".html" var enablelocking=0 var numletter="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" var temp3='' var cur=0 function max(which){ return (pass[Math.ceil(which)+(3&15)].substring(0,1)) } function testit(input){ temp=numletter.indexOf(input) var temp2=temp^parseInt(pass[phase1-1+(1|3)].substring(0,2)) temp2=numletter.substring(temp2,temp2+1) return (temp2) } function submitentry(){ t3='' verification=document.password1.password2.value phase1=Math.ceil(Math.random())-6+(2<<2) var indicate=true for (i=(1&2);i<window.max(Math.LOG10E);i++) t3+=testit(verification.charAt(i)) for (i=(1&2);i<lim;i++){ if (t3.charAt(i)!=pass[phase1+Math.round(Math.sin(Math.PI/2)-1)].charAt(i)) indicate=false }0 if (verification.length!=window.max(Math.LOG10E)) indicate=false if (indicate) window.location=verification+extension else alert("Invalid password. Please try again") } //--> Hi My website was recently ftp hacked and a file inserted into it - js.php - which seems to be some sort of advertising spam programme. Having spotted the file I have renamed it to hide it but lots of other sites are still referring into my site looking for this php file. What I would like to do is to *just* open a java alert box on the referring sites to alert the users that the site has been hacked and that they should notify the webmaster so that he can fix his site. The line referring into my site is - <script type="text/javascript" src="http://www.mysite.com/js.php"></script> Is this something simple to do? I know nothing about Java or PHP so need detailed help. Thanks John Hi. I need help in adding a parenthesis in the area code of the phone number and validating it also. I made some javascript code but it is not working. Can somebody please help? I just need the code in adding () in the area code. For example: When user enter 10 digit number no spaces or dashes such as 0000000000 or 000-000-0000, I would like to have this format right away (000)000-0000. I know how to replace the characters but adding it is a tricky one for me. Can somebody please help? Thanks. Hello all,I have a website and I would like a pop-up window to promote a new website venture I have. I would like for the new website to open in a completely new window/browser when my members simply click on the index page (No link or Buttons).The code below does most of what I ask lol,but it.. 1.Only opens in a new tab (in same browser) while I would like for it to open in a completely new browser "full page" menu bar scroll tab and all. plus 2.It seems to open each and every time the page is clicked,which will be annoying to my members.I would only like for it to open 1 time per visitor every 24 hours or whenever cookies are cleared. Code: <html> <head> <script type="text/javascript"> function click_on() { window.open("URL HERE", "_blank"); } </script> </head> <body onclick="click_on()"> </body> </html> I am no expert at this,and my knowledge is very limited,so excuse me if this is a simple situation.Any help would be greatly appreciated. Thanks, Roco Hi guys, first of all im sorry cause i dont know the javascript name and what should this call. i wanted to make a Helps and Guides look like this website http://fnatic.com/ Feedback that located on the left side. If can totally make like them then i hope the script can open a new window with custom size and address bar. I hope someone can help me... i will change my topic tittle if i know what is this call. sorry im a pure newbie in web programming. hopes you all can help me. thanks alot. I have this javascript code in this html page and it works fine. As soon as I try to add it to an existing page, it doesn't work. I have tried every position for the form and the script that I can think of but to no avail. I would greatly appreciate soon expert guidance. Frank. The code page is here. The page that I am trying to add it to is here. Hi, i have this code that works, but takes like 3 seconds to load when using it on the website. Is there a better way to code this to make it faster? Code: function onTaskChange(num) { if( num = 1) { var stask = document.forms[0].task11.value; setSelectValue("forms[0].task21", stask); setSelectValue("forms[0].task31", stask); setSelectValue("forms[0].task41", stask); setSelectValue("forms[0].task51", stask); for( i = 0; i < 7; i++) tblProjectHours[i][6]=stask; onTaskChange(4); onTaskChange(7); onTaskChange(10); onTaskChange(13); } else if( num = 2) { var stask = document.forms[0].task12.value; setSelectValue("forms[0].task22", stask); setSelectValue("forms[0].task32", stask); setSelectValue("forms[0].task42", stask); setSelectValue("forms[0].task52", stask); for( i = 7; i < 14; i++) tblProjectHours[i][6]=stask; onTaskChange(5); onTaskChange(8); onTaskChange(11); onTaskChange(14); } else if( num = 3) { var stask = document.forms[0].task13.value; setSelectValue("forms[0].task23", stask); setSelectValue("forms[0].task33", stask); setSelectValue("forms[0].task43", stask); setSelectValue("forms[0].task53", stask); for( i = 14; i < 21; i++) tblProjectHours[i][6]=stask; onTaskChange(6); onTaskChange(9); onTaskChange(12); onTaskChange(15); } else if( num = 4) { var stask = document.forms[0].task21.value; for( i = 21; i < 28; i++) tblProjectHours[i][6]=stask; } else if( num = 5) { var stask = document.forms[0].task22.value; for( i = 28; i < 35; i++) tblProjectHours[i][6]=stask; } else if( num = 6) { var stask = document.forms[0].task23.value; for( i = 35; i < 42; i++) tblProjectHours[i][6]=stask; } else if( num = 7) { var stask = document.forms[0].task31.value; for( i = 42; i < 49; i++) tblProjectHours[i][6]=stask; } else if( num = 8) { var stask = document.forms[0].task32.value; for( i = 49; i < 56; i++) tblProjectHours[i][6]=stask; } else if( num = 9) { var stask = document.forms[0].task33.value; for( i = 56; i < 63; i++) tblProjectHours[i][6]=stask; } else if( num = 10) { var stask = document.forms[0].task41.value; for( i = 63; i < 70; i++) tblProjectHours[i][6]=stask; } else if( num = 11) { var stask = document.forms[0].task42.value; for( i = 70; i < 77; i++) tblProjectHours[i][6]=stask; } else if( num = 12) { var stask = document.forms[0].task43.value; for( i = 77; i < 84; i++) tblProjectHours[i][6]=stask; } else if( num = 13) { var stask = document.forms[0].task51.value; for( i = 84; i < 91; i++) tblProjectHours[i][6]=stask; } else if( num = 14) { var stask = document.forms[0].task52.value; for( i = 91; i < 98; i++) tblProjectHours[i][6]=stask; } else if( num = 15) { var stask = document.forms[0].task53.value; for( i = 98; i < 105; i++) tblProjectHours[i][6]=stask; } } Hello, I want to run video at our website at a specified time only,like i might want my video to be played at 9.00a.m exactly . how can i do it using javascript. Plz do revert back ASAP. Thanks, Revathi srikrishna I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. So I have made a website that you need a password to get into. The following javascript code works in Internet Explorer but, I need it to work in Safari also. Can anyone please rewrite this code, as simple as possible, to work in both Safari and Internet Explorer ? [CODE ]<!--// function mainpass() { if (pass.value=="password") {location="correct.HTML"}; else{location="wrong.HTML"}; } //--> [/CODE] Thanks in advance... |