Using Java have a table "hidden" onload of page

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Oct 2006
Posts: 19
Reputation: bbqkaren is an unknown quantity at this point 
Solved Threads: 0
bbqkaren bbqkaren is offline Offline
Newbie Poster

Using Java have a table "hidden" onload of page

 
0
  #1
Jul 27th, 2009
I have what I hope is a simple question.

I found a js that does exactly what I want, except that I want the table 'closed' when the page is loaded, and opened when the +/- is clicked. I'd like this in Java. (assuming that non-java users would see the table 'open/show')

Hope someone can help. Thanks

Here is the script:
java Syntax (Toggle Plain Text) 
  1. function show_hide(tblid, show) {
  2. if (tbl = document.getElementById(tblid)) {
  3. if (null == show) show = tbl.style.display == 'none';
  4. tbl.style.display = (show ? '' : 'none');
  5. }
  6. }
html Syntax (Toggle Plain Text) 
  1. <a href="javascript:void();" onclick="show_hide('exampletbl')">+/-</a>
  2. <table id="exampletbl">
  3.   <tbody>
  4.     <tr>
  5.       <td>row 1</td>
  6.     </tr>
  7.     <tr>
  8.       <td>row 2</td>
  9.     </tr>
  10.   </tbody>
  11. </table>
  12. <br>
  13. <a href="javascript:void();"
  14.  onclick="show_hide('exampletbl2')">+/-</a>
  15. <table id="exampletbl2">
  16.   <tbody>
  17.     <tr>
  18.       <td>row 3</td>
  19.     </tr>
  20.     <tr>
  21.       <td>row 4</td>
  22.     </tr>
  23.   </tbody>
  24. </table>
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 19
Reputation: bbqkaren is an unknown quantity at this point 
Solved Threads: 0
bbqkaren bbqkaren is offline Offline
Newbie Poster

Re: Using Java have a table "hidden" onload of page

 
0
  #2
Jul 27th, 2009
Think I solved my own problem - found this thread and combined that with what I was already doing.

My Java now looks like this. New stuff is on lines 10-12
java Syntax (Toggle Plain Text) 
  1. function show_hide(tblid, show) 
  2. {
  3. if (tbl = document.getElementById(tblid)) 
  4. {
  5. if (null == show) show = tbl.style.display == 'none';
  6. tbl.style.display = (show ? '' : 'none');
  7. }
  8. }
  9.  
  10. function hide(id) 
  11. { 
  12. document.getElementById(id).style.display = 'none'; }

Add this one line to html
html Syntax (Toggle Plain Text) 
  1. <body onload="hide('exampletbl'); hide('exampletbl2');">

Works like a charm. Both table hidden when page loaded, opened when I click.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 885
Reputation: Airshow will become famous soon enough Airshow will become famous soon enough 
Solved Threads: 127
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Using Java have a table "hidden" onload of page

 
0
  #3
Jul 27th, 2009
BBQKaren,

First and foremost - Javascript and Java are completely different languages. Google "java versus javascript" for many detailed discussions and explanations.

For your problem, you need code not only to hide the tables initially, but also to generate the +/- controls. Otherwise the small minority with javascipt disabled will see controls that do nothing.

In the following code, an anonymous function which fires when the page has loaded, loops through the array hideTables (composition to be determined by you) calling my function initHiddenTables as it goes.

initHiddenTables creates the necessary +/- control for one specified table then hides that table.

javascript Syntax (Toggle Plain Text) 
  1. function initHiddenTable(tableId){
  2. 	var tbl = document.getElementById(tableId);
  3. 	if(tbl) {
  4. 		//1. Generate +/- control
  5. 		var a = document.createElement('a');
  6. 		a.setAttribute('href', '');
  7. 		a.onclick = function(){
  8. 			show_hide(tableId);
  9. 			return false;
  10. 		}
  11. 		var txt = document.createTextNode('+/-');
  12. 		a.appendChild(txt);
  13. 		tbl.parentNode.insertBefore(a, tbl);
  14. 		//2. Hide Table
  15. 		if(tbl) { tbl.style.display = 'none'; }
  16. 	}
  17. }
  18.  
  19. onload = function(){
  20. 	var hideTables = ["exampletbl", "exampletbl2"];
  21. 	for(var i=0; i<hideTables.length; i++){
  22. 		initHiddenTable(hideTables[i]);
  23. 	}
  24. }

The only other thing you need to do is to get rid of the +/- controls from your HTML and wrap the tables in <div>s.

html Syntax (Toggle Plain Text) 
  1. <div style="margin-top:12px;">
  2. <table id="exampletbl">
  3. <tbody>
  4. <tr><td>row 1</td></tr>
  5. <tr><td>row 2</td></tr>
  6. </tbody>
  7. </table>
  8. </div>
  9.  
  10. <div style="margin-top:12px;">
  11. <table id="exampletbl2">
  12. <tbody>
  13. <tr><td>row 3</td></tr>
  14. <tr><td>row 4</td></tr>
  15. </tbody>
  16. </table>
  17. </div>
As you will see, I have styled these divs to give some vertical space above. You can modify this aspect as required.

Hope this helps.

Airshow
Last edited by Airshow; Jul 27th, 2009 at 8:22 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 19
Reputation: bbqkaren is an unknown quantity at this point 
Solved Threads: 0
bbqkaren bbqkaren is offline Offline
Newbie Poster

Re: Using Java have a table "hidden" onload of page

 
0
  #4
Jul 27th, 2009
for some reason, when you toggle the plain text (on this forum), the item below inlcudes an extra <b></b>. This is not in my real document.


•
•
•
•
Originally Posted by bbqkaren View Post
I have what I hope is a simple question.

I
html Syntax (Toggle Plain Text) 
  1. <a href="javascript:void();" onclick="show_hide('exampletbl')">+/
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 885
Reputation: Airshow will become famous soon enough Airshow will become famous soon enough 
Solved Threads: 127
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Using Java have a table "hidden" onload of page

 
0
  #5
Jul 27th, 2009
It's either a bug or, more probably, an anti code injection measure.

But it should be completely academic, because nobody should ever need to use that syntax. Javascript URLs are very 1990s.

See my reponse to your question above.

Airshow
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 19
Reputation: bbqkaren is an unknown quantity at this point 
Solved Threads: 0
bbqkaren bbqkaren is offline Offline
Newbie Poster

Re: Using Java have a table "hidden" onload of page

 
0
  #6
Jul 27th, 2009
thank you!
Last edited by bbqkaren; Jul 27th, 2009 at 11:12 pm. Reason: correct spelling
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp ajaxjspservlets animate api automatically blackjack browser bug calendar captchaformproblem checkbox child class close cookies createrange() cursor dependent disablefirebug dom dropdown editor element engine events explorer ext file firehose flash form forms game gears google gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha media microsoft mp3 mysql object offline onerror onmouseoutdivproblem onreadystatechange parent passing pdf php player post progressbar rated regex runtime scroll search session shopping size software solutions sql star stars stretch synchronous text textarea twitter unicode validation web website window windowsxp wysiwyg xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC