[Web4lib] Fwd: disappearing picture

[Andrew Hankinson]

Hi Ray,

I'm no Javascript expert, but I think I found your problem.  Here's  
your Javascript file:

function collapse()
{
divs=document.getElementsByTagName("div")
	for (i=5;i<15;i++)
	{ divs[i].style.display="none";
	}
	
}

function expand(item)
{
collapse();
obj=document.getElementById(item);
obj.style.display="block";
}

I can't quite figure out the execution process for this, but it works  
something like this:
	- When expand(item) is called in the HTML, it starts looking for  
something to collapse.
	- When collapse() is called, it starts its counter at 5 and sets div  
#5 to display:none, which makes it disappear
	- in the tag hierarchy of your page, div #5 is, of course, the div  
holding the picture, so it goes away

As for a solution - there are many slick javascript libraries out  
there (appropriately bug tested, of course) that will do things like  
this with little effort.  My favourite is Script.aculo.us (http:// 
script.aculo.us)

Try this:
  - download Script.aculo.us
  - Read the README (it's brief, but gives complete instructions on  
how to use these libraries)
  - put the javascript libraries on your server and include them in  
the head of your webpage. (i.e. <script src="[scriptaculous  
libraries]" language="JavaScript" type="text/javascript"></script> )
  - on the divs you want to control the show/hide (i.e. the main item  
for that submenu), put this:
	-<a href="#" onclick="Effect.toggle('ID-OF-ELEMENT-YOU-WANT-TO- 
CONTROL', 'appear'); return false")>Click to Toggle</a>

  - and on the div you want to show/hide, put this:
	-<div id="ID-YOU-SPECIFIED-IN-THE-PREVIOUS-STEP"><div>your content</ 
div></div>

Note that you need the nested divs in the above step - it won't work  
without them.

For more information, see this page:
http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle

Hope that helps!
Andrew

On 16-Aug-07, at 9:11 PM, Raumin "Ray" Dehghan wrote:

> Colleagues,
>
>   I am in the process of experimenting with a possible redesign to our
> website and have some issues.  For this email, I will just mention  
> one issue
> first, although my problems may be related.
>
>   One issue I'm having is that the photo and any associated  
> material (can be
> found within a div called "layer 6") front and center in the webpage
> immediately disappears when the mouse goes over to the left nav.
>
>   I think it might be related to the javascript file, but I don't  
> understand
> javascript enough yet.
>
> the web url is:
> http://www.westchicago.lib.il.us/r/stuff/chatt/scratchtakeout.htm
>
>
> the javascript file it calls up is:
> http://www.westchicago.lib.il.us/r/stuff/chatt/tree3.js
>
> the css file is: http://www.westchicago.lib.il.us/r/stuff/chatt/ 
> ada.css
>
> thanks very much for any help.
>
> Sincerely,
> Raumin "Ray" Dehghan
> Adult Services Librarian
> West Chicago Public Library
> West Chicago, Illinois
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/

Andrew Hankinson
andrew.hankinson at gmail.com