JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Set visibility of div tags

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

•
•
Join Date: Jul 2009
Posts: 8
Reputation: ritu_kr is an unknown quantity at this point 
Solved Threads: 0
ritu_kr's Avatar
ritu_kr ritu_kr is offline Offline
Newbie Poster

Set visibility of div tags

 
0
  #1
Jul 1st, 2009
Hi,
this is my problem:
1. There are two div elements in my page.
2. When the page loads only one is supposed to be visible.(This is where i'm getting stuck)
3. There are a series of checkboxes.
4. On clicking on one particular checkbox the first div element must disappear and the other div element must be made visible.

I'm able to make one div element appear and disappear but both appear when the page loads.
Please help.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Set visibility of div tags

 
0
  #2
Jul 1st, 2009
A simple demo that will prevent div2 of showing itself if div1 is currently visible on the page:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <head>
  2. <script type="text/javascript">
  3. <!--
  4.  
  5. var showDiv = function() {
  6.    var div1 = document.getElementById("div1");
  7.    var div2 = document.getElementById("div2");
  8.    if ( div1.style.display === "none" ) {
  9.    div2.style.display = "block";
  10.    return;
  11.    } div2.style.display = "none";
  12. };
  13. window.onload = showDiv;
  14.  
  15. // -->
  16. </script>
  17. </head>
  18. <body>...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 8
Reputation: ritu_kr is an unknown quantity at this point 
Solved Threads: 0
ritu_kr's Avatar
ritu_kr ritu_kr is offline Offline
Newbie Poster

Re: Set visibility of div tags

 
0
  #3
Jul 3rd, 2009
•
•
•
•
Originally Posted by essential View Post
A simple demo that will prevent div2 of showing itself if div1 is currently visible on the page:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <head>
  2. <script type="text/javascript">
  3. <!--
  4.  
  5. var showDiv = function() {
  6.    var div1 = document.getElementById("div1");
  7.    var div2 = document.getElementById("div2");
  8.    if ( div1.style.display === "none" ) {
  9.    div2.style.display = "block";
  10.    return;
  11.    } div2.style.display = "none";
  12. };
  13. window.onload = showDiv;
  14.  
  15. // -->
  16. </script>
  17. </head>
  18. <body>...
Thanks for the code. It works fine.
My page has a lot of elements, so when the page loads you can see all the items for a second before they disappear because of the code.
Is there anyway property which sets their visibility to false when it loads itself so we cant see the unwanted items?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 8
Reputation: ritu_kr is an unknown quantity at this point 
Solved Threads: 0
ritu_kr's Avatar
ritu_kr ritu_kr is offline Offline
Newbie Poster

Re: Set visibility of div tags

 
0
  #4
Jul 3rd, 2009
Hi,
I got the answer. I've used a css class to configure its display property as none. Now how do i access this property to set it?
As in how are the getters and setters for this method defined?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Set visibility of div tags

 
0
  #5
Jul 4th, 2009
I won't be able to provide you example using getters and setters under my OPERA browser. But here's a little program that allows you to set display properties from any elements' inside your page:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <meta http-equiv="Content-Style-Type" content="text/css">
  8. <meta http-equiv="Content-Script-Type" content="text/javascript">
  9. <meta http-equiv="Window-target" content="_top">
  10. <title>Free Live Help!</title>
  11. <style type="text/css">
  12. <!--
  13. a { display : inline-block; margin-top : .100em; margin-left : 1em; color : #405060; padding : .200em 0 .200em 0; text-decoration : none; border-bottom : 1px dotted; }
  14. div { margin-top : .500em; border : 1px solid #ccc; padding : .300em; background-color : #eee; }
  15. div div { margin-top : .150em; border : 1px solid #405060; background-color : #ccc; padding : .150em; }
  16. -->
  17. </style>
  18. <script type="text/javascript">
  19. <!--
  20. var hideAndDisplay = function( parentID ) { 
  21.    this.ids = (( document.getElementById ) ? document.getElementById( parentID ) : document.all[ parentID ] );
  22.    this.tName = (( this.ids.nodeName ) ? this.ids.nodeName : this.ids.tagName ).toLowerCase();
  23.    this.elem = (( document.getElementsByTagName ) ? document.getElementsByTagName( this.tName )[ parentID ] : document.all.tags( this.tName ).item( parentID ));
  24. };
  25.  
  26. hideAndDisplay.prototype = {
  27. display : function( thisTagNames, displayProp, thisID ) {    
  28.    this.divs = (( document.getElementsByTagName ) ? this.elem.getElementsByTagName( thisTagNames ) : this.elem.all.tags( thisTagNames ));
  29.       if ( typeof( thisID ) !== "undefined" ) {
  30.          try {
  31.          this.divs[ thisID ].style.display = displayProp;
  32.          } catch( e ) { 
  33.          this.divs[ thisID ].setAttribute( "style", "display : " + displayProp );
  34.          } return;
  35.       } else {
  36.          try {
  37.          this.elem.style.display = displayProp;
  38.          } catch( e0 ) {
  39.          this.elem.setAttribute( "style",  "display : " + displayProp );
  40.          } return;
  41.       }
  42.    }
  43. }; var $ = function( myDivID, myNodeList, showHideProp, index ) {
  44.    var eLem = new hideAndDisplay( myDivID );   
  45.    eLem.display( myNodeList, showHideProp, index );
  46.    return;  
  47. }; 
  48. window.onload = function() {
  49. /* $ Function syntax :
  50.    $( [ String [, String [, String [, Integer/String ]]]] );
  51.  
  52. The $() Function comes with four parameters:
  53.  
  54. 1st parameter - ID of the parent ELEMENT that serves as a place holder for the elements' ( or nodeList ) collection. ( REQUIRED ). 
  55.  
  56. 2nd parameter - Element reference, ( or Tag Name ) of the element that will be showed/hide from the page ( REQUIRED ).
  57.  
  58. 3rd parameter - display properties ( REQUIRED ).
  59.  
  60. 4th parameter - Specify the Index reference ( or element ID ) that will be showed/hide from the page ( OPTIONAL ).
  61.  
  62. Example of usage : */
  63.  
  64. $( "div1", "div", "none" ); // By not specifying its 4th parameter, div1 ( 1st parameter, PARENT ELEMENT ) will be set to display as ( 3rd parameter - none ).
  65.  
  66. var elemArray = [ 0, 2, 4 ];
  67.    for ( var i = 0; i < elemArray.length; i++ ) {
  68.    $( "div2", "div", "none", elemArray[ i ] ); // Creating arrays of index for the elements inside div2.
  69.    }
  70. };
  71. // -->
  72. </script>
  73. </head>
  74. <body>
  75. <div id="div1">
  76. <!-- This entire collection of elements will not be showed -->
  77. <div>Div1 #1</div>
  78. <div>Div1 #2</div>
  79. <div>Div1 #3</div>
  80. <div>Div1 #4</div>
  81. <div>Div1 #5</div>
  82. </div>
  83.  
  84. <div id="div2">
  85. <!-- element1, element3 and element5 will not be showed -->
  86. <div>Div2 #1</div>
  87. <div>Div2 #2</div>
  88. <div>Div2 #3</div>
  89. <div>Div2 #4</div>
  90. <div>Div2 #5</div>
  91. </div>
  92. <div id="nav">
  93. <h6 style="padding-left : 1em; color : #808080; margin-bottom : 0;">- Control Panel -</h6>
  94. <!-- Controlling display properties of the element using $() function -->
  95.  
  96. <a href="javascript:void(0)" onclick="$( 'div1', 'div', 'block' )">Show Div1 and all its element</a><br>
  97. <a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 0 )">Show Div2 and element#1</a><br>
  98. <a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 2 )">Show Div2 and element#3</a><br>
  99. <a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 4 )">Show Div2 and element#5</a><br>
  100. <a href="javascript:void(0)" onclick="$( 'nav', 'a', 'none' )">Hide Control Panel [ x ]</a>
  101.  
  102. </div>
  103. </body>
  104. </html>

hope it helps...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 8
Reputation: ritu_kr is an unknown quantity at this point 
Solved Threads: 0
ritu_kr's Avatar
ritu_kr ritu_kr is offline Offline
Newbie Poster

Re: Set visibility of div tags

 
0
  #6
Jul 7th, 2009
Wow! Thanks.
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



acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC