• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 457
  • Last Modified:

Rollover Business Structure map

Ello again JS experts

At work they currently have a HUGE structre map of all of the top managers, then the people under them, then the people under them and so on.

Is it possible in javascript to create a structure chart that does the following:

Has the TOP 3 managers shown, on mouse over of each manager another part appears below them with their sub managers, then when you hover over a sub manager the people under them appear and so on?

__________                __________
i                 i               i                  i
i Manager 1 i               i Manager 2  i  <<<<<<<<<<Mouse over this one
i_________i                i__________i
                                         i
_______________________i______________________________
i                                                                                               i    
i     This appears with a line from manager2 - same for the others   i    
i_____________________________________________________i


Hope you know what i mean.

it sounds awfully complicated to me, but i can imagine the only thing you could do it in is javascript

Its only worth 100 at the moment because im only expecting someone to give me a reference to site or page that can explain how it can be odne, but if anyone has a code or is willing to help create it it will obviously go up to 500, i know its not about the points...but at the end of the day...its all about the points ;o)

Thanks
0
apresto
Asked:
apresto
  • 10
  • 5
  • 2
  • +2
1 Solution
 
robotman757Commented:
I have an idea using frontpage and tables, but it could get a little hairy (raised in Alabama so forgive the slang).
You could build the chart with a table giving id's to the cells. The complexity here would be the javascript for writing the visibilty style of the cells. I see it working in my head, but this is just one idea. Someone may have a better one.
0
 
cindyrodCommented:
Just a Suggestion: You can use the same functionality used for dynamic, hierarchical menus. Here are some links that may help you:

http://www.devx.com/webdev/Article/9843/1954?pf=true

http://developer.novell.com/tech/1032.html

http://www.a1javascripts.com/tutorials/dynamic-menu.html

Hope this helps!
0
 
aprestoAuthor Commented:
thanks for the links but i was thinking of something more along the lines of what robotman757 suggested, have tables already set out but with nothing in and have them change bg on rollover.  Do u know what i mean, i havent had to do anything like this so really i feel like im in the dark abit.

I have upped the points
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Ryan ChongCommented:
Try layers maybe.. ?
0
 
aprestoAuthor Commented:
Im realy sorry but i dont know what they are in this sort of thing, im only familair with layers in paint and photo shop.

If i need to know any basics before i go to actually implement it then im happy to read some tutorials but i was hoping someone could help me code it as i am an extreme novice with js and DHTML
0
 
Ryan ChongCommented:
Here is an example using layers, for more examples, you can do a search on web:

<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">

<SCRIPT LANGUAGE="JavaScript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></HEAD>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"> <p><b><font color="336699">Managers</font></b></p></td>
  </tr>
  <tr>
    <td> <div id="page1" style="position:absolute; left:9px; top:64px; visibility: hidden; width: 488px; height: 131px;">
        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="273" align="left" valign="top"><p>Staff 1 for Manger 1<br>
                Staff 2 for Manger 1<br>
                Staff N for Manger 1 </p>
              <p>&nbsp;</p></td>
          </tr>
        </table>
      </div>
      <div id="page2" style="position:absolute; left:9px; top:64px; visibility: hidden; width: 488px; height: 131px;">
        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="273" align="left" valign="top"><p>Staff 1 for Manger 2<br>
                Staff 2 for Manger 2<br>
                Staff N for Manger 2</p>
              <p>&nbsp;</p></td>
          </tr>
        </table>
      </div>
       <div id="page3" style="position:absolute; left:9px; top:64px; visibility: hidden; width: 488px; height: 131px;">
        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="273" align="left" valign="top"><p>Staff 1 for Manger 3<br>
                Staff 2 for Manger 3<br>
                Staff N for Manger 3</p>
              <p>&nbsp;</p></td>
          </tr>
        </table>
      </div>
        <a href="#" onMouseOver="javascript:MM_showHideLayers('page1','','show','page2','','hide','page3','','hide');">Manager 1</a> &nbsp;&nbsp;&nbsp;<a href="#" onMouseOver="javascript:MM_showHideLayers('page1','','hide','page2','','show','page3','','hide');">Manager 2</a> &nbsp;&nbsp;&nbsp;<a href="#" onMouseOver="javascript:MM_showHideLayers('page1','','hide','page2','','hide','page3','','show');">Manager
      3</a></td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
  </tr>
</table>
</HTML>

Hope this give you some clues maybe ;-)
0
 
Martin CotterillDabblerCommented:
Hi apresto

Are you thinking of something like this?

<html>
<head>
<title>Hierarchy List</title>

<script language="JavaScript">
function showMe(object) {
    if (document.getElementById && document.getElementById(object) != null)
         node = document.getElementById(object).style.visibility='visible';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}

function hideMe(object) {
    if (document.getElementById && document.getElementById(object) != null)
         node = document.getElementById(object).style.visibility='hidden';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'hidden';
    else if (document.all)
         document.all[object].style.visibility = 'hidden';
}

function hideAll() {
      hideMe('subManagerOne');
      hideMe('subManagerTwo');
      hideMe('subManagerThree');
      hideMe('staffOne');
      hideMe('staffTwo');
      hideMe('staffThree');
}
</script>

</head>
<body>

<table width="99%" border="1">
      <td align="center" width="33%" onclick="hideAll();showMe('subManagerOne')" style="cursor:hand">Manager One</td>
      <td align="center" width="33%" onclick="hideAll();showMe('subManagerTwo')" style="cursor:hand">Manager Two</td>
      <td align="center" width="33%" onclick="hideAll();showMe('subManagerThree')" style="cursor:hand">Manager Three</td>
      <tr>
      <td align="center" onclick="showMe('staffOne')">
            <div id="subManagerOne" style="visibility:hidden;cursor:hand">This is the subdivision of Manager One</div>
      </td>
      <td align="center" onclick="showMe('staffTwo')">
            <div id="subManagerTwo" style="visibility:hidden;cursor:hand">This is the subdivision of Manager Two</div>
      </td>
      <td align="center" onclick="showMe('staffThree')">
            <div id="subManagerThree" style="visibility:hidden;cursor:hand">This is the subdivision of Manager Three</div>
      </td>
      <tr>
      <td align="center">
            <div id="staffOne" style="visibility:hidden">This is the staff of sub Manager One</div>
      </td>
      <td align="center">
            <div id="staffTwo" style="visibility:hidden">This is the staff  of sub Manager Two</div>
      </td>
      <td align="center">
            <div id="staffThree" style="visibility:hidden">This is the staff of sub Manager Three</div>
      </td>

</table>

</body>
</html>

Hope this is of some help.

Regards

Pantyboy
0
 
aprestoAuthor Commented:
YES! Exactly that only with pictures, yo uknow what, you could not get any closer to what i want than that! Well only have it as mouseover but im sure thats just a chnage in code from onclick to on rollover, what would i do to user images instead of text because the thing is as it getslower down the chain say TOP is main manger, then there are 4 managers under her (directors) then each director has a section with say another 4 departments, then when u click on each of them the final tier is displayed - is that more complex?

#Im going to have a read through this code and see what i can make of it and post back either later today or tomoro - Thanksa lot - you have given me a new found hope!! :o)
0
 
aprestoAuthor Commented:
that last post was at panty boy, i tried yours ryanycsand i lie t he layers effect but i needed it physically in tables to make the reuslts of the rollover clickable
0
 
Martin CotterillDabblerCommented:
Hi apresto

To use images instead of text, use the <img> tag as you would normally. To achieve a rollover that appears when it should, the 'onmouseover' code is now inside the <div> tag.

You can make it as complex as you wish. Just remember to add any new id's to the list in function hideAll(). I've put in where the images would go as a pointer. However, a bit of a play and you'll see how it works.

<html>
<head>
<title>Hierarchy List</title>

<script language="JavaScript">
function showMe(object) {
    if (document.getElementById && document.getElementById(object) != null)
         node = document.getElementById(object).style.visibility='visible';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}

function hideMe(object) {
    if (document.getElementById && document.getElementById(object) != null)
         node = document.getElementById(object).style.visibility='hidden';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'hidden';
    else if (document.all)
         document.all[object].style.visibility = 'hidden';
}

function hideAll() {
      hideMe('subManagerOne');
      hideMe('subManagerTwo');
      hideMe('subManagerThree');
      hideMe('staffOne');
      hideMe('staffTwo');
      hideMe('staffThree');
}
</script>

</head>
<body>

<table width="99%" border="1">
      <td align="center" width="33%" onclick="hideAll();showMe('subManagerOne')" style="cursor:hand"><img src="MrSmith.jpg" width="100" height="100"><br>Manager One</td>
      <td align="center" width="33%" onclick="hideAll();showMe('subManagerTwo')" style="cursor:hand"><img src="MissJones.jpg" width="100" height="100"><br>Manager Two</td>
      <td align="center" width="33%" onclick="hideAll();showMe('subManagerThree')" style="cursor:hand"><img src="MrsWilliams.jpg" width="100" height="100"><br>Manager Three</td>
      <tr>
      <td align="center">
            <div id="subManagerOne" style="visibility:hidden;cursor:hand" onmouseover="showMe('staffOne')"><img src="MissDavies.jpg" width="50" height="50"><br>This is the subdivision of Manager One</div>
      </td>
      <td align="center">
            <div id="subManagerTwo" style="visibility:hidden;cursor:hand" onmouseover="showMe('staffTwo')"><img src="MrPeterson.jpg" width="50" height="50"><br>This is the subdivision of Manager Two</div>
      </td>
      <td align="center">
            <div id="subManagerThree" style="visibility:hidden;cursor:hand" onmouseover="showMe('staffThree')"><img src="MissMainwaring.jpg" width="50" height="50"><br>This is the subdivision of Manager Three</div>
      </td>
      <tr>
      <td align="center">
            <div id="staffOne" style="visibility:hidden">This is the staff of sub Manager One</div>
      </td>
      <td align="center">
            <div id="staffTwo" style="visibility:hidden">This is the staff  of sub Manager Two</div>
      </td>
      <td align="center">
            <div id="staffThree" style="visibility:hidden">This is the staff of sub Manager Three</div>
      </td>

</table>

</body>
</html>

If you need help let me know.

Regards

Pantyboy.
0
 
aprestoAuthor Commented:
Thanks man, I'll have a play and post back when i encounter a prob
0
 
aprestoAuthor Commented:
Ello, right i've had a play and im familiarised myself with it abit but is there a way to have the results of the rollovers replace eachother.  i ask this because i really want one row that will duisplay the reuslts and they will be long images and at the moment they are displayed one under the other

The way its coded at the mo each resulting rollover is displayed in a different TD each time, i wanted to remove the TD and replace it with TABLE and either have the image (result) replace the current image in the table or better have the bg of the table replaced.  I have had a play but attempting this i just messed it up ;o)

the code is basically the same, you dont need to show me step by step, if you just show me if i need to add a script or if i need to change the Divs, ill do it for each of them

Thanks for the help - im getin there
0
 
aprestoAuthor Commented:
or better yet, is it possible to replace an entire table and it contents with another on rollover?
0
 
Martin CotterillDabblerCommented:
Hi apresto

The script needs no changing (except for adding <div> id's to the hideAll() section), so no need to worry about that.

You can use css positioning in the <div> tag to place what you want where you want it. If you use postioning to overwrite already visible info, you need to add the hideAll() function to the rollover. It need to be before showMe() to work.

You can also place tables, or any other stuff. inside the <div></div> tags.

Let me know how you get on.

Pantyboy
0
 
aprestoAuthor Commented:
aaaaahhhhh

So could i have:

<div id="1">
<TABLE>
<Tr>...
</tr>
</table>
</div>

The problem i am encountering is that it hides and shows fine but i would rather like it to be replaced - But that positioning sounds like it can sort it out, ill look into it now

Thanks

i.domaindlx.com/derekdig/index.htm
I had drawn this up to let see how i wanted it to work but i tihnk u have sorted it out, but ill post ot anyway
0
 
Martin CotterillDabblerCommented:
Hi apresto

In answer to you're <table>, yep, you can do that. However, I wouldn't use numbers for the <div> id. I've had some problems in the past using numbers. Just a heads up.

As to the postioning, I'll bash something up too, just in case.

I've checked out your diagram and I'll work to that.

Talk to you later

Pantyboy
0
 
aprestoAuthor Commented:
Pantyboy!

Man, i wish i could give you more points - DIV's have given me a whole different perspective of front page web design.  Its give you so much more freedom and less limitations - I read up a little bit, had a play and BAM!

I learned a few things though - Be careful with positioning, the number of times i had to re-position stuff cos i added a border to a table or image - Nightmare, so i dont think div and positioning are things you should overuse but will definitely come in handy - but i feel confident that i have creating a pretty respectable document now.

Its one thing to have the answer to what i needed to know, but its entirely another when i have learned something new that i will no doubt remember for future!

Thank you Pantyboy!
0
 
Martin CotterillDabblerCommented:
Hi apresto

Glad to be of help.

While you're checking out div's, have a look at the <span> tag. These can be used in similar ways to div's, but don't 'add a break'. If you check them out, you'll see what I mean.

Anyway, have fun and, as I said before, glad to be of some help.

Kind regards

Pantyboy.
0
 
aprestoAuthor Commented:
This i will check them out!

thanks again

0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 10
  • 5
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now