PDA

View Full Version : show hide Div variation



krraleigh
Oct 26th, 2009, 09:48 PM
I have a script that is to hide specific divs and show the one called, or at least that is what I would like to happen.

Right now when I click the link to show my div it hides my entire page and display the item in quetion.

When I parse the return from document.getelementbytagname('div') it shows that I have 8 elements on my page. Great, but I only want to turn off the ones that match the following reg exp: "/^F\d+$/" the rest of the page I want to be left in tact.

So far the rabbit trail that I am going down is working out so great, can you advise a script that will let me hide all div elements that match a specific pattern: /^F\d+$/

I have two samples that I am working from.
The first:

<script language=javascript type='text/javascript'>

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
alert(divs.length);
var regExp = "/^F\d+$/";

for(i=0; i<divs.length; i++){//
var obj = document.getElementsById(pass).item(i);
if (obj){
var divIdName = obj.id;
alert(divIdName);
}
//myregexp = /regex/
alert(i);
if(divs[i].id.match(pass))//if they are 'see' divs
{
alert(divs[i].id.value);
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else if (!divIdName.match(pass) && document.getElementById()== regExp){
if (document.getElementById)
divs[i].style.visibility="hidden";
else if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
} else { }
}
} //end function

</script>

The second example is closer to what I want to do, but I haven't been able to figure out how to dynamically load the array "var ids=new Array();" so that I can automate the script.

The code for this page:

<script language="JavaScript">
//here you place the ids of every element you want.
//var ids=new Array('F256','F257','F258','F259');// etc...
var divs; // = document.getElementsByTagName('div');
var obj;
var divIdName;
var ids=new Array();

function switchid(id){
divs = document.getElementsByTagName('div');

for(i=0;i<divs.length;i++){//

obj = document.getElementsByName(id).item(i);
divIdName = obj.id;

alert(divIdName);
if(divIdName.match(/^F\d+$/))
{
ids[i] = divIdName;

}

alert(divs.length);
}

hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</script>



</head>
<body>
<div id="test" class="jobTitle_and_descriptionParent">

<div id="test1" class="jobListTitles">
<h5>Click one of the job titles to reveal the description on the right</h5>
<ol>
<li><a href="javascript:switchid('F256');">Breakfast Club Coordinator</a></li>
<li><a href="javascript:switchid('F257');">Bible Teacher</a></li>
<li><a href="javascript:switchid('F258');">Registration Coordinator</a></li>
<li><a href="javascript:switchid('F259');">Staff</a></li>
<li><a href="javascript:switchid('F260');">Assistant Counselor</a></li>
<li><a href="javascript:switchid('F261');">Drama Coordinator</a></li>
<li><a href="javascript:switchid('F262');">Special Services Assistant</a></li>
<li><a href="javascript:showDiv('F263')">Deans</a></li>
<li><a href="javascript:showDiv('F264')">Registration Workers</a></li>
<li><a href="javascript:showDiv('F265')">Counselors</a></li>
<li><a href="javascript:showDiv('F266')">Drama &amp; Breakfast Club Assistants</a></li>
<li><a href="javascript:showDiv('F267')">Aunt &amp; Uncle</a></li>
<li><a href="javascript:showDiv('F268')">Placement Coordinator</a></li>
<li><a href="javascript:showDiv('F269')">Activity Center Person</a></li>
<li><a href="javascript:showDiv('F270')">Social Worker/Psychologist</a></li>
</ol>
</div>

<div id='test3' class="jobDescriptions">

<div id="F256" name="F256" style="position: inherit; visibility:hidden;">
f256 Here
</div>

<div id="F257" name="F257" style="position: inherit;visibility:hidden;">
f257 Here
</div>

<div id="F258" name="F258" style="position: inherit;visibility:hidden;">
f258 Here
</div>

<div id="F259" name="F259" style="position: inherit;visibility:hidden;">
f259 Here
</div>

<div id="F260" name="F260" style="position: inherit;">
f260 Here
</div>

</div>

</div>


Been struggling with this for a couple days now and just not making any headway. Could you advise?

Kevin:thumbsup:

Old Pedant
Oct 27th, 2009, 02:10 AM
Well, right off the bat I see an error:


var obj = document.getElementsById(pass).item(i);

There is no such method on document as getElementsById.

The "s" is an error.

So I dunno how any of that code worked.

And if you don't have getElementById (that is, if you are *really* trying to support NetScape 4 or MSIE 4, as your code claims), then you sure as heck don't have getElementsByTagName. So the code has no hope of working in either Netscape 4 or MSIE 4. Do you *really* care, at all????

K.I.S.S.


function showDiv(pass)
{
var divs = document.getElementsByTagName('div');
var onlyLookAt = "/^F\d+$/";

for(i=0; i<divs.length; i++)
{
var div = divs[i];
if ( onlyLookAt.test( div.id ) )
{
div.style.visibility = ( div.id == pass ) ? "visible" : "hidden";
}
}
}


I would note that this only hides the *content* of the divs in question. They will still take up just as much space on the screen, only nothing will show.

If you want to hide the entire presence of the divs, then you should change that one line to

div.style.display = ( div.id == pass ) ? "block" : "none";

krraleigh
Oct 27th, 2009, 02:42 AM
thanx for the heads up

Works great

Kevin