Any DHTML buffs round here?

[kid A]

Whats a good resource for DHTML tutorials and lookups.

I'm making a script that will show a <div> with information by modifying its visibility on mouseover/mouseout.

But something tells me I should not be making one Div for each block of information I want to show... When I do this they take up the same amount of space as if they were all visible at once.

If you want to take a look my project is here:
http://www.xio.no/kunder/flybussen/portal/v7.php

At the moment it looks a mess, so any help would be appreciated!

[kid A]

Ok, using position absolute, all <div>'s now display in the right place. However I'm having a slight problem removing them when I get to new mouseover object. I would think this code would work, but it doesn't:


function removeLast(lastTown) {
lastTown.visibility = "hidden";
}

function visInfo(by) {
if(lastTown) {
removeLast(lastTown);
}

if(document.layers) {
town = document.town;
}
else if(document.all) {
town = town.style;
}
town.visibility = "visible";
lastTown = town;
}


With the lastTown check and removal in there, nothing shows up, when commented out it's ok. I'm thinking the removeLast function is called all the time or something...

Can't work it out..

[kid A]

Ok, so it boils down to this:

How do I hide the last <div> when I hover on a new element?

I have tried a couple of methods but as soon as I use the same method for all elements nothing displays at all.

Gonna have to call it a night and think about it :p

[Nithos]

if its a limited number you can try maybe using id's on each div tag and then selecting them one by one
not sure if this will exactly work though but worth a try

[Nephalim]

The easiest way i can think of to do this is to create a div for each town with a different id for each one (perhaps the name of the city). Use CSS styles to absolute position all the divides at the same location on the page and also to initialize them to hidden visibility. Write a function that sets all the cities visibility to hidden, most easily by creating a temporary array of each of the div id's and looping through it, setting each to hidden. Add a call to this function to the next function. Finally, write a JavaScript function that accepts the id as a parameter and then uses that parameter to make the appropriate div visible after calling the all-hidden function. Attach this function to each city's onmouseover function.

Hope that helps...