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.
Jump to PostA simple demo that will prevent div2 of showing itself if div1 is currently visible on the page:
<head> <script type="text/javascript"> <!-- var showDiv = function() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); if ( div1.style.display === "none" ) { div2.style.display = "block"; return; } …
Jump to PostI 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
A simple demo that will prevent div2 of showing itself if div1 is currently visible on the page:
<head>
<script type="text/javascript">
<!--
var showDiv = function() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
if ( div1.style.display === "none" ) {
div2.style.display = "block";
return;
} div2.style.display = "none";
};
window.onload = showDiv;
// -->
</script>
</head>
<body>...A simple demo that will prevent div2 of showing itself if div1 is currently visible on the page:
<head> <script type="text/javascript"> <!-- var showDiv = function() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); if ( div1.style.display === "none" ) { div2.style.display = "block"; return; } div2.style.display = "none"; }; window.onload = showDiv; // --> </script> </head> <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?
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?
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
a { display : inline-block; margin-top : .100em; margin-left : 1em; color : #405060; padding : .200em 0 .200em 0; text-decoration : none; border-bottom : 1px dotted; }
div { margin-top : .500em; border : 1px solid #ccc; padding : .300em; background-color : #eee; }
div div { margin-top : .150em; border : 1px solid #405060; background-color : #ccc; padding : .150em; }
-->
</style>
<script type="text/javascript">
<!--
var hideAndDisplay = function( parentID ) {
this.ids = (( document.getElementById ) ? document.getElementById( parentID ) : document.all[ parentID ] );
this.tName = (( this.ids.nodeName ) ? this.ids.nodeName : this.ids.tagName ).toLowerCase();
this.elem = (( document.getElementsByTagName ) ? document.getElementsByTagName( this.tName )[ parentID ] : document.all.tags( this.tName ).item( parentID ));
};
hideAndDisplay.prototype = {
display : function( thisTagNames, displayProp, thisID ) {
this.divs = (( document.getElementsByTagName ) ? this.elem.getElementsByTagName( thisTagNames ) : this.elem.all.tags( thisTagNames ));
if ( typeof( thisID ) !== "undefined" ) {
try {
this.divs[ thisID ].style.display = displayProp;
} catch( e ) {
this.divs[ thisID ].setAttribute( "style", "display : " + displayProp );
} return;
} else {
try {
this.elem.style.display = displayProp;
} catch( e0 ) {
this.elem.setAttribute( "style", "display : " + displayProp );
} return;
}
}
}; var $ = function( myDivID, myNodeList, showHideProp, index ) {
var eLem = new hideAndDisplay( myDivID );
eLem.display( myNodeList, showHideProp, index );
return;
};
window.onload = function() {
/* $ Function syntax :
$( [ String [, String [, String [, Integer/String ]]]] );
The $() Function comes with four parameters:
1st parameter - ID of the parent ELEMENT that serves as a place holder for the elements' ( or nodeList ) collection. ( REQUIRED ).
2nd parameter - Element reference, ( or Tag Name ) of the element that will be showed/hide from the page ( REQUIRED ).
3rd parameter - display properties ( REQUIRED ).
4th parameter - Specify the Index reference ( or element ID ) that will be showed/hide from the page ( OPTIONAL ).
Example of usage : */
$( "div1", "div", "none" ); // By not specifying its 4th parameter, div1 ( 1st parameter, PARENT ELEMENT ) will be set to display as ( 3rd parameter - none ).
var elemArray = [ 0, 2, 4 ];
for ( var i = 0; i < elemArray.length; i++ ) {
$( "div2", "div", "none", elemArray[ i ] ); // Creating arrays of index for the elements inside div2.
}
};
// -->
</script>
</head>
<body>
<div id="div1">
<!-- This entire collection of elements will not be showed -->
<div>Div1 #1</div>
<div>Div1 #2</div>
<div>Div1 #3</div>
<div>Div1 #4</div>
<div>Div1 #5</div>
</div>
<div id="div2">
<!-- element1, element3 and element5 will not be showed -->
<div>Div2 #1</div>
<div>Div2 #2</div>
<div>Div2 #3</div>
<div>Div2 #4</div>
<div>Div2 #5</div>
</div>
<div id="nav">
<h6 style="padding-left : 1em; color : #808080; margin-bottom : 0;">- Control Panel -</h6>
<!-- Controlling display properties of the element using $() function -->
<a href="javascript:void(0)" onclick="$( 'div1', 'div', 'block' )">Show Div1 and all its element</a><br>
<a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 0 )">Show Div2 and element#1</a><br>
<a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 2 )">Show Div2 and element#3</a><br>
<a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 4 )">Show Div2 and element#5</a><br>
<a href="javascript:void(0)" onclick="$( 'nav', 'a', 'none' )">Hide Control Panel [ x ]</a>
</div>
</body>
</html>hope it helps...
Wow! Thanks.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.