Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to make all the other document element set to style.display = "" if I don't exactly know they're id's?

Posted on 2007-07-20
10
Medium Priority
?
220 Views
Last Modified: 2010-08-05
Hi guys and girls,

I have a page which populates <div>'s and when the user click's a particular row the related <div> will appear. I'm using javascript so it's all kind of ajax-y I guess.

My question is with the javascript. I'm passing in the rowID to toggle the show/hide of the <div>. I have given each <div> an ID which has the rowID in it so i can find it with the following line:
var tm = "tab1_" + id;
document.getElementById(tm).style.display = "none";

Set that particular <div>'s appearance (either "none" or "") works fine.

My question is, how do I make all the other <div>'s disappear? If they are not the selected row, how do I include in the javascript to set all the other <div>'s to style.display = ""?

here is my page with the javascript and stuff..
<%@ Page Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="Manage.aspx.vb" Inherits="Deployments_Manage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

       <script type="text/javascript" language="javascript">
        function fn_ChangeDisplay(rowId)
        {
        var oRowDetails = document.getElementById('DetailRow');
       
            if(rowId.style.display=="none")
            {
                rowId.style.display = "block";
                rowId.style.visibility = "visible";
            }
            else
            {
                rowId.style.display="none";
            }
            //return true;
           
        }
        function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];

        return itm;
    }

    function toggleItem(id)
    {
        itm = getItem(id);

        if(!itm)
            return false;
           
        var im = id + "_toggle";
        var tm = "tab1_" + id;

        if(itm.style.display == 'none') {
            itm.style.display = '';
            document.images[im].src = "../images/minus.gif";
            //document.getElementById("tab1").tabber.tabShow(0);
            //document.getElementById(tm).tabber.tabShow(0);
            //document.getElementById("TargetGroup").style.display = "";
            //document.getElementById("Release").style.display = "none";
            //document.getElementById("tab1").style.display = "";
            document.getElementById(tm).style.display = "";
            //document.getElementById("tab1_1").style.display = "";
            //document.getElementById("tab1_4").style.display = "";
            //document.getElementById("tab1_7").style.display = "";
           
            }
        else {
            itm.style.display = 'none';
            document.images[im].src = "../images/plus.gif";
            //document.getElementById("TargetGroup").style.display = "none";
            //document.getElementById("Release").style.display = "";
            //document.getElementById("tab1").style.display = "none";
            //document.getElementsByName("tab1").style.display = "";
            document.getElementById(tm).style.display = "none";
            //document.getElementById("tab1_1").style.display = "none";
            //document.getElementById("tab1_4").style.display = "none";
            //document.getElementById("tab1_7").style.display = "none";
           
            }
        return false;
    }

    </script>
<h2>Manage Deployments</h2>
<div id="firstdiv" runat="server">
</div>
<div id="hrborder">
<hr style="color: #e0e0e0; width: 100%"/>
</div>

<div class="bodytext" id="main">
    <div class="content">
    content

    </div>
<div id="tabdiv" runat="Server">
</div>
</div>

</asp:Content>

thanks!

rss2
0
Comment
Question by:rss2
  • 4
  • 4
9 Comments
 
LVL 14

Expert Comment

by:steveberzins
ID: 19536012
if you want all div tags, you could use .getElementsByTagName("DIV")

so, somethin' like:

var divs = document.getElementsByTagName("DIV");
for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
}
0
 

Author Comment

by:rss2
ID: 19538081
Actually the aspx page is writing innerHTML to a parent div, and it is those inner div's that I need to reference, so it's a bit tricky knowing how many there are on the page as I build it dynamically and give them an id dynamically built too. All sounds a bit complicated..

It's getElementsByName, just for anyone reading this.




0
 
LVL 14

Expert Comment

by:steveberzins
ID: 19539792
no, it is NOT, it IS .getElementsByTagName!

to get all DIVs inside an element, you use .getElementsByTagName("DIV")

so, you if you know the parent divs name, let's say it is the 'content' div. you can get all divs inside it using something like this:

var contentdivs = document.getElementById("content").getElementsByTagName("DIV");

and if you have just one you want to show, and you know what its id is, but don't know how many other divs you have, and their ids

for (var i = 0; i< contentdivs.length; i++) {
  if (contentdivs[i].id == idtoshow) {
    contentdivs[i].style.display = '';
  } else {
    contentdivs[i].style.display = 'none';
  }
}

get it?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:rss2
ID: 19540418
Nope it is NOT getElementsByTagName! It's getElementsByName or getElementsById!

I get a javascript error with your code. Sorry dude!
0
 
LVL 14

Accepted Solution

by:
steveberzins earned 2000 total points
ID: 19541191
sorry to have to tell you this, but you are wrong... it is .getElementsByTagName...

http://msdn2.microsoft.com/en-us/library/ms536439.aspx
http://developer.mozilla.org/en/docs/DOM:element.getElementsByTagName
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-core.html#i-Document
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-core.html#ID-745549614

need I go on...

here is a hokey example, but works and is tested in IE7, should work in IE6/Firefox, but not tested in those...

<!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 runat="server">
    <title>Untitled Page</title>
<script>
var index = 0;
function GetIndex() {
    if (index > 10) {
        index = 1;
    } else {
        index++
    }
    return index;
}
function DoIt() {
    ShowAllBut("Div" + GetIndex());
}
function ShowAllBut(id) {
    var contentdivs = document.getElementById("a").getElementsByTagName("DIV");
    for (var i = 0; i < contentdivs.length; i++) {
        if (contentdivs[i].id == id) {
            contentdivs[i].style.display = '';
        } else {
            contentdivs[i].style.display = 'none';
        }
    }
}
function onload() {
    setInterval("DoIt();", 500);
}
</script>    
</head>
<body onload="onload();">
    <form id="form1" runat="server">
    <div id="a">
        <div id="Div1">1</div>
        <div id="Div2">2</div>
        <div id="Div3">3</div>
        <div id="Div4">4</div>
        <div id="Div5">5</div>
        <div id="Div6">6</div>
        <div id="Div7">7</div>
        <div id="Div8">8</div>
        <div id="Div9">9</div>
        <div id="Div10">10</div>
        <div id="Div11">11</div>
    </div>
    </form>
</body>
</html>
0
 

Author Comment

by:rss2
ID: 19541913
you're weird
0
 

Author Comment

by:rss2
ID: 19542365
sorry that was uncalled for..I apologise steveberzins.
0
 
LVL 14

Expert Comment

by:steveberzins
ID: 19550090
been called worse :)
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20346027
Forced accept.

Computer101
EE Admin
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 20 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question