TeddyKiller Posted May 18, 2010 Share Posted May 18, 2010 Hi. I have a function.. that shows or hides the div passed. I've done this before, but I'm helping someone out and for some reason...thing is, it doesn't do anything what so ever. The javascript functon is.. <script type="text/javascript"> function showthis(DIV) { DIV = document.getElementById(DIV); if(DIV.style.display == 'none') { DIV.style.display == ''; } else { DIV.style.display == 'none'; } } </script> And to call teh function.. would be.. <td width="30%">Main Category: <a href="#1" onclick="showthis('cats1')">Progression Page</a></td> Although I'm not sure where the problem is. It's completely confused me. This would be the whole page code (In the view source) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> <title>Try and Fail: A place where all your dreams could come true, but dont get your hopes up.</title><STYLE TYPE="TEXT/CSS"> A:LINK {color: #5c3a11;text-decoration:none;} A:VISITED {color: #5c3a11;text-decoration:none;} A:ACTIVE {color: #5c3a11;text-decoration:none;} A:HOVER { color: #330000;text-decoration:underline;} body {width: 1024px; margin-left:auto; margin-right:auto; background-color: #000000; color: #C68E17; font-size: 0.8em;} table.all {border-collapse: collapse;} table.text {color: #5c3a11;} table.center {align:center;} table.orange {background-color: #1a0f00;} table.gray {background-color: #0c0c0c;} table.hd {color: #5c3a11;background-color: #1a0f00;border-width: 2px 2px 2px 2px;border-style: solid;border-color: #5c3a11 #261600 #261600 #5c3a11;} th {color: #5c3a11; background-color:#5c3a11; background-image: url(themes/carbon/images/menu/p7exp_mbar.png); background-repeat: repeat-x;} tr.all {padding:0px; border-collapse: collapse;} td.left {text-align: left; } td.right {text-align: right; } td.top {vertical-align:top;} td.bottom {vertical-align:bottom;} td.all {text-align:center; padding:0px; border-collapse: collapse;} td.all1 {vertical-align:top; text-align:center; padding:0px; border-collapse: collapse;} td.all2 {vertical-align:middle; text-align:center; padding:0px; border-collapse: collapse;} td.all3 {vertical-align:bottom; text-align:center; padding:0px; border-collapse: collapse;} td.mhall4 {vertical-align:top; text-align:left; padding:0px; border-collapse: collapse;} td.mhall5 {vertical-align:bottom; text-align:left; padding:0px; border-collapse: collapse; height: 27px; width: 27px;} td.mhall6 {vertical-align:bottom; text-align:left; padding:0px; border-collapse: collapse; height: 27px; width: 233px;} /********** Image Spacers **********/ td.spcr01 {background-image: url(themes/carbon/images/spacers/spcr01.png); background-repeat:repeat-y;} td.spcr02 {background-image: url(themes/carbon/images/spacers/spcr02.png); background-repeat:repeat-y;} td.spcr03 {background-image: url(themes/carbon/images/spacers/spcr03.png); background-repeat:repeat-y;} td.spcr04 {background-image: url(themes/carbon/images/spacers/spcr04.png); background-repeat:repeat-y;} td.spcr05 {background-image: url(themes/carbon/images/spacers/spcr05.png); background-repeat:repeat-y;} td.spcr06 {background-image: url(themes/carbon/images/spacers/spcr06.png); background-repeat:repeat-y;} td.modspcr01 {background-image: url(themes/carbon/images/spacers/modspcr01.png); background-repeat:repeat-y; width: 21px;} td.modspcr02 {background-image: url(themes/carbon/images/spacers/modspcr02.png); background-repeat:repeat-y; width: 21px;} /********** Table Data Borders **********/ td.t {border-top: 2px solid #261600; } td.r {border-right: 2px solid #5c3a11;} td.b {border-bottom: 2px solid #5c3a11;} td.l {border-left: 2px solid #261600;} th.t {border-top: 1px solid #5c3a11; } th.r {border-right: 1px solid #261600;} th.b {border-bottom: 1px solid #261600;} th.l {border-left: 1px solid #5c3a11;} /********** Form Field Coloring **********/ input.submit { color: transparent; border: none; background: url('themes/carbon/images/buttons/submit.png') no-repeat top left; padding: 0px 0px; } .submit:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/submithover.png') no-repeat top left; padding: 0px 0px; } input.reset { color: transparent; border: none; background: url('themes/carbon/images/buttons/reset.png') no-repeat top left; padding: 0px 0px; } .reset:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/resethover.png') no-repeat top left; padding: 0px 0px; } input.cancel { color: transparent; border: none; background: url('themes/carbon/images/buttons/cancel.png') no-repeat top left; padding: 0px 0px; } .cancel:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/cancelhover.png') no-repeat top left; padding: 0px 0px; } input.approve { color: transparent; border: none; background: url('themes/carbon/images/buttons/approve.png') no-repeat top left; padding: 0px 0px; } .approve:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/approvehover.png') no-repeat top left; padding: 0px 0px; } input.decline { color: transparent; border: none; background: url('themes/carbon/images/buttons/decline.png') no-repeat top left; padding: 0px 0px; } .decline:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/declinehover.png') no-repeat top left; padding: 0px 0px; } input.message { color: transparent; border: none; background: url('themes/carbon/images/buttons/message.png') no-repeat top left; padding: 0px 0px; } .message:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/messagehover.png') no-repeat top left; padding: 0px 0px; } input.reply { color: transparent; border: none; background: url('themes/carbon/images/buttons/reply.png') no-repeat top left; padding: 0px 0px; } .reply:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/replyhover.png') no-repeat top left; padding: 0px 0px; } input.save { color: transparent; border: none; background: url('themes/carbon/images/buttons/save.png') no-repeat top left; padding: 0px 0px; } .save:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/savehover.png') no-repeat top left; padding: 0px 0px; } input.delete { color: transparent; border: none; background: url('themes/carbon/images/buttons/delete.png') no-repeat top left; padding: 0px 0px; } .delete:hover { color: transparent; border: none; background: url('themes/carbon/images/buttons/deletehover.png') no-repeat top left; padding: 0px 0px; } input {color: #5c3a11;background: #1a0f00;border-left: 2px solid #261600;border-right: 2px solid #5c3a11;border-top: 2px solid #261600;border-bottom: 2px solid #5c3a11;} select {color: #5c3a11;background: #1a0f00;border-left: 2px solid #261600;border-right: 2px solid #5c3a11;border-top: 2px solid #261600;border-bottom: 2px solid #5c3a11;} textarea {color: #5c3a11;background: #1a0f00;border-left: 2px solid #261600;border-right: 2px solid #5c3a11;border-top: 2px solid #261600;border-bottom: 2px solid #5c3a11;} /********** Rank Two-Tone Layout **********/ .table_style_1 , .table_style_1 table {color: #5c3a11;background-color: #330000;border-width: 2px 2px 2px 2px;border-style: solid;border-color: #660000 #110000 #110000 #660000;} .table_style_2 , .table_style_2 table {color: #5c3a11;background-color: #220000;border-width: 2px 2px 2px 2px;border-style: solid;border-color: #440000 #110000 #110000 #660000;} .row_style_1 , .row_style_1 td {background-color: #400000; color: #C68E17;} .row_style_2 , .row_style_2 td {background-color: #200000; color: #C68E17;} .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0;} .break { page-break-before: always; } /********** Three Section Floating Layout **********/ #leftcol,#content,#rightcol {overflow:hidden; display:inline-block} #clear { clear:left;} #leftcol { background: #1a0f00; float: left; width: 200px;} #rightcol { background: #1a0f00; float: left; width: 200px;} #content { background: #1a0f00; float: left; width: 582px;} #leftprofile { background: #1a0f00; float: left; width: 624px;} #rightprofile { background: #1a0f00; float: left; width: 358px;} #20 {width: 20%; } #25 {width: 25%; } #30 {width: 30%; } #40 {width: 40%; } #50 {width: 50%; } #60 {width: 60%; } #75 {width: 75%; } #100 {width: 100%; } /********** Menu Bar **********/ <!--[if lte IE 7]> #menuwrapper, #p7menubar ul a {height: 1%;} a:active {width: auto;} <![endif]--> div.menu { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; background-color: #5c3a11; margin: 0px 0; padding: 0; background-image: url(themes/carbon/images/menu/p7exp_pbg.jpg); background-repeat: repeat-x;} #menuwrapper { border-top: 1px solid #5c3a11; border-bottom: 1px solid #5c3a11; background-color: #5c3a11; background-image: url(themes/carbon/images/menu/p7exp_mbar.png); background-repeat: repeat-x; width:100%; } #p7menubar, #p7menubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif;} #p7menubar a { display: block; text-decoration: none; padding: 5px 10px 5px 10px; border-right: 1px solid #5c3a11; font-size: .85em; color: #5c3a11} #p7menubar a.trigger { padding: 5px 16px 5px 10px; background-image: url(themes/carbon/images/menu/p7PM_dark_south.gif); background-repeat: no-repeat; background-position: right center;} #p7menubar li { float: left; width: 9em;} #p7menubar li ul, #p7menubar ul li { width: 12em;} #p7menubar ul li a { color: #C68E17; border-right: 0; padding: 3px 12px 3px 16px;} #p7menubar li ul { position: absolute; display: none; background-color: #FFFFFF; border-right: 1px solid #5c3a11; border-bottom: 1px solid #5c3a11; background-image: url(themes/carbon/images/menu/p7exp_mgrad.png); background-repeat: repeat-both;} #p7menubar li:hover a, #p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a { color: #000000; background-color: #5c3a11;} #p7menubar li:hover ul, #p7menubar li.p7hvr ul { display: block;} #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a { color: #5c3a11; background-color: transparent;} #p7menubar ul a:hover { background-color: #5c3a11!important; color: #000000!important;} #p7menubar li {width: auto;} </STYLE> </head> <body><div width="1024px"> <img src="themes/carbon/images/header/header01.png" /><img src="themes/carbon/images/header/header02.png" /><img src="themes/carbon/images/header/header03.png" /> <table width="1024px" class="orange all"> <tr class="all"> <td class="all1"> <table class="all"> <tr class="all"> <td class="all1"><img src="themes/carbon/images/header/header04.png" /></td> <td class="all1" rowspan="3" height="100px" width="224px">Welcome, <b>TestAcc1</b>.[<a href="process.php">Logout</a>]</td> <td class="all1"><img src="themes/carbon/images/header/header05.png"></td> </tr> <tr class="all"> <td height="49px" class="all2 spcr01"></td> <td height="49px" class="all2 spcr02"></td> </tr> <tr class="all"> <td class="all3"><img src="themes/carbon/images/memberscroll/ms01.png"></td> <td class="all3"><img src="themes/carbon/images/memberscroll/ms02.png"></td> </tr> <tr class="all"> <td class="all1" colspan="3"><img src="themes/carbon/images/memberscroll/ms07.png"></td> </tr> </table> </td> <td class="all1"> <table class="all"> <tr class="all"> <td class="all1"><img src="themes/carbon/images/header/header06.png"></td> <td class="all1" rowspan="3" height="100px" width="456px">More Stuff</td> <td class="all1"><img src="themes/carbon/images/header/header07.png"></td> </tr> <tr class="all"> <td height="49px" class="all2 spcr03"></td> <td height="49px" class="all2 spcr04"></td> </tr> <tr class="all"> <td class="all3"><img src="themes/carbon/images/memberscroll/ms03.png"></td> <td class="all3"><img src="themes/carbon/images/memberscroll/ms04.png"></td> </tr> <tr class="all"> <td class="all1" colspan="3"><img src="themes/carbon/images/memberscroll/ms08.png"></td> </tr> </table> </td> <td class="all1"> <table class="all"> <tr class="all"> <td class="all1"><img src="themes/carbon/images/header/header08.png"></td> <td class="all1" rowspan="3" height="100px" width="224px">More Stuff<br>Stuff<br>Stuff</td> <td class="all1"><img src="themes/carbon/images/header/header09.png"></td> </tr> <tr class="all"> <td height="49px" class="all2 spcr05"></td> <td height="49px" class="all2 spcr06"></td> </tr> <tr class="all"> <td class="all3"><img src="themes/carbon/images/memberscroll/ms05.png"></td> <td class="all3"><img src="themes/carbon/images/memberscroll/ms06.png"></td> </tr> <tr class="all"> <td class="all1" colspan="3"><img src="themes/carbon/images/memberscroll/ms09.png"></td> </tr> </table> </td> </tr></table></div><script type="text/javascript" src="includes/javascript/p7exp.js"></script> <div class="menu" onLoad="P7_ExpMenu()"> <div id="menuwrapper"> <ul id="p7menubar"> <li><a href="?page=home">Home</a></li> <li><a class="trigger" href="#">My Stuff</a> <ul> <li><a href="?page=settings">Settings</a></li> <li><a href="?page=profile&uid=$uid">My Profile</a></li> <li><a href="?page=mailbox">Mailbox</a></li> <li><a href="?page=abilities">Abilities</a></li> <li><a href="?page=chatroom">Chatrooms</a></li> <li><a href="?page=blogs">Blogs</a></li> <li><a href="?page=polls">Polls</a></li> <li><a href="?page=collection">Collection</a></li> <li><a href="?page=photos">Photos</a></li> <li><a href="?page=friends">Friends</a></li> <li><a href="?page=frequests">Friend Request</a></li> <li><a href="?page=syndicate">Syndicate</a></li> <li><a href="?page=advocacy">Advocates</a></li> <li><a href="?page=supporters">Supporters</a></li> <li><a href="?page=possession">Possessions</a></li> </ul> </li> <li><a class="trigger" href="#">Recent Stuff</a> <ul> <li><a href="?page=home">Sub 2.1</a></li> <li><a href="?page=home">Sub 2.2</a></li> <li><a href="?page=home">Sub 2.3</a></li> <li><a href="?page=home">Sub 2.4</a></li> <li><a href="?page=home">Sub 2.5</a></li> </ul> </li> <li><a class="trigger" href="#">Top Members</a> <ul> <li><a href="?page=home">Sub 3.1</a></li> <li><a href="?page=home">Sub 3.2</a></li> <li><a href="?page=home">Sub 3.3</a></li> <li><a href="?page=home">Sub 3.4</a></li> <li><a href="?page=home">Sub 3.5</a></li> <li><a href="?page=home">Sub 3.6</a></li> <li><a href="?page=home">Sub 3.7</a></li> <li><a href="?page=home">Sub 3.8</a></li> </ul> </li> <li><a class="trigger" href="#">Fun Stuff</a> <ul> <li><a href="?page=venerate">Venerate</a></li> <li><a href="?page=home">Sub 3.2</a></li> </ul> </li> <li><a class="trigger" href="#">Charms/Presents</a> <ul> <li><a href="?page=givecharm">Give Charms</a></li> <li><a href="?page=givepresent">Give Presents</a></li> <li><a href="?page=giveshoutout">Give a Shoutout</a></li> <li><a href="?page=givesponsor">Give a Sponsorship</a></li> <li><a href="?page=charms">My Charms</a></li> <li><a href="?page=presents">My Presents</a></li> <li><a href="?page=shoutouts">My Shoutouts</a></li> <li><a href="?page=sponsorship">My Sponsorships</a></li> </ul> </li> <li><a class="trigger" href="#">Other</a> <ul> <li><a href="?page=rank">Rank</a></li> <li><a href="?page=ulist">User List: Temp</a></li> </ul> </li> <li><a>                                      </a></li> <li><a class="trigger" href="#">Interaction</a> <ul> <li><a href="?page=donate">Donations</a></li> <li><a href="?page=progress">Progression</a></li> <li><a href="?page=news">News</a></li> <li><a href="?page=invite">Invite</a></li> <li><a href="?page=search">Search</a></li> <li><a href="?page=about_us">About Us</a></li> <li><a href="?page=contact_us">Contact Us</a></li> <li><a href="?page=meet">Meet Us</a></li> </ul> </li> <li><a class="trigger" href="?page=help">Help</a> <ul> <li><a href="?page=guide">Beginner’s Guide</a></li> <li><a href="?page=advhelp">Advanced Help</a></li> <li><a href="?page=support">Support Chat</a></li> <li><a href="?page=query">Send Query</a></li> </ul></li> <li><a href="?page=logout">Logout</a></li> </ul> <br class="clearit"> </div> </div> <img src="themes/carbon/images/modules/mod01.png" /><img src="themes/carbon/images/modules/mod02.png" /><img src="themes/carbon/images/modules/mod03.png" /> <table class="all orange"> <tr class="all"> <td class="all modspcr01"></td> <td width="982px" class="all"> <script type="text/javascript"> function showthis(DIV) { DIV = document.getElementById(DIV); if(DIV.style.display == 'none') { DIV.style.display == ''; } else { DIV.style.display == 'none'; } } </script> <table width="100%" align="left"><tr align="left"> <td width="30%">Main Category: <a href="#1" onclick="showthis('cats1')">Progression Page</a></td> <td width="45%">Main Category Info: Page which will show progression levels.</td> <td></td> <td></td> </tr> </table> <table width="100%" align="left" id="cats1" style="display:none;"> <tr align="left"> <td colspan="">      Seconday Category: MySQL</td> <td>Secondary Info: Laying out various parts to the page server side.</td> <td></td> <td></td> </tr> <tr align="left"> <td>            Sub-Category Name: Table Design</td> <td>Sub-Category Info: Maybe this has gone too far?</td> <td></td> <td></td> </tr> <tr align="left"> <td>                  Tables</td> <td>Tables have been laid out!</td> <td>1010001-1010001</td> <td>4</td> </tr> </table><table width="100%" align="left"><tr align="left"> <td width="30%">Main Category: <a href="#2" onclick="showthis('cats2')">Progression Page</a></td> <td width="45%">Main Category Info: Page which will show progression levels.</td> <td></td> <td></td> </tr> </table> <table width="100%" align="left" id="cats2" style="display:none;"> <tr align="left"> <td colspan="">      Seconday Category: PHP</td> <td>Secondary Info: Coding the way the progression page will look.</td> <td></td> <td></td> </tr> <tr align="left"> <td>            Sub-Category Name: Page Design</td> <td>Sub-Category Info: Yeah I think it has!</td> <td></td> <td></td> </tr> <tr align="left"> <td>                  Code</td> <td>Code has been done! Just hoping it works!</td> <td>1010001-1010001</td> <td>3</td> </tr> </table><table width="100%" align="left"><tr align="left"> <td width="30%">Main Category: <a href="#3" onclick="showthis('cats3')">Progression Page</a></td> <td width="45%">Main Category Info: Page which will show progression levels.</td> <td></td> <td></td> </tr> </table> <table width="100%" align="left" id="cats3" style="display:none;"> <tr align="left"> <td colspan="">      Seconday Category: MySQL</td> <td>Secondary Info: Laying out various parts to the page server side.</td> <td></td> <td></td> </tr> <tr align="left"> <td>            Sub-Category Name: Table Design</td> <td>Sub-Category Info: Maybe this has gone too far?</td> <td></td> <td></td> </tr> <tr align="left"> <td>                  Fuck this shit!</td> <td>Yeah Yeah</td> <td>1010001-1010001</td> <td>3</td> </tr> </table><table width="100%" align="left"><tr align="left"> <td width="30%">Main Category: <a href="#4" onclick="showthis('cats4')">Progression Page</a></td> <td width="45%">Main Category Info: Page which will show progression levels.</td> <td></td> <td></td> </tr> </table> <table width="100%" align="left" id="cats4" style="display:none;"> <tr align="left"> <td colspan="">      Seconday Category: MySQL</td> <td>Secondary Info: Laying out various parts to the page server side.</td> <td></td> <td></td> </tr> <tr align="left"> <td>            Sub-Category Name: Table Design</td> <td>Sub-Category Info: Maybe this has gone too far?</td> <td></td> <td></td> </tr> <tr align="left"> <td>                  Fuck you asswhipe!</td> <td>Fuck this shit!</td> <td>1010001-1010001</td> <td>3</td> </tr> </table><table width="100%" align="left"><tr align="left"> <td width="30%">Main Category: <a href="#5" onclick="showthis('cats5')">Progression Page</a></td> <td width="45%">Main Category Info: Page which will show progression levels.</td> <td></td> <td></td> </tr> </table> <table width="100%" align="left" id="cats5" style="display:none;"> <tr align="left"> <td colspan="">      Seconday Category: PHP</td> <td>Secondary Info: Coding the way the progression page will look.</td> <td></td> <td></td> </tr> <tr align="left"> <td>            Sub-Category Name: Page Design</td> <td>Sub-Category Info: Yeah I think it has!</td> <td></td> <td></td> </tr> <tr align="left"> <td>                  Shitdipfuckcunt!</td> <td>Yeah I just said that!</td> <td>1010001-1010001</td> <td>3</td> </tr> </table></td> <td class="all modspcr02"></td> </tr> </table> <img src="themes/carbon/images/modules/mod04.png" /><img src="themes/carbon/images/modules/mod05.png" /><img src="themes/carbon/images/modules/mod06.png" /> </div><body><center<div width="1024px"><img src="themes/carbon/images/footer/footer01.png"><img src="themes/carbon/images/footer/footer02.png"><img src="themes/carbon/images/footer/footer03.png"></div></body> Sorry it's VERY messy. It's not my code, I tidied up some of it.. but this has puzzled me. You should be able to find out where the function is etc. I attempted to put it in between the head tags, and that never worked. It just doesn't seem to be calling it? Quote Link to comment Share on other sites More sharing options...
TeddyKiller Posted May 18, 2010 Author Share Posted May 18, 2010 I removed it all and started from a blank page with some php. Though it STILL doesn't call the function. I don't know what i'm doing wrong .. <!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 type="text/javascript"> function showthis(DIV) { DIV = document.getElementById(DIV); if(DIV.style.display == 'none') { DIV.style.display == ''; } else { DIV.style.display == 'none'; } } </script> </head> <body> <?php for($i = 1; $i < 10; $i++) { echo '<table> <tr> <td><a href="#" onclick="showthis(\'cats'.$i.'\')">Category</a></td> </tr> </table> <div id="cats'.$i.'" style="display:none;"> <span style="margin-left:10px;">+ Subcategory</span><br /> <span style="margin-left:20px;">+ Item</span> </div> <br /><br />'; } ?> </body> </html> Quote Link to comment Share on other sites More sharing options...
TeddyKiller Posted May 18, 2010 Author Share Posted May 18, 2010 It doesn't like the DOCTYPE. Although it's the same DOCTYPE as on my site, and my site likes the code.. its' so strange. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.