Question

I’ve got something like this currently: and I’m working on making it more like this:

That’s not the hard part, I’ve basically got that done (thanks to an answer on a previous question, it looks like the first picture on a narrow screen/mobile and the second on larger screens, tablets, etc)

The green dotted area will be a div, and you can see two buttons beneath it. I need the map to hide (push it to the far left in this case, because googlemaps doesn’t like having a hidden / 0px div) and I’m going to be using a Spacetree from TheJIT for the reporting chain. We’re already using jQuery, so what’s the best way to make the green dotted div (we’ll call it .movingcontainer) switch between the map and the spacetree when the buttons below it are pressed?

I know this question has been asked many times, and I’m looking through some of the other questions to see if they were a similar situation.

Answer 1

If they have an absolute display (top: whatever; left:whatever), you could just have 2 divs stacked on top of each other, then change their z-index to put one in front of the other, depending on which button is pressed.

EDIT

Just to explain my second comment better. Let’s say you have <div id="googlemap"> and <div id="otherdisplay">. Both could be contained within <div id="container">. Then, the CSS could look something like:

#container {

}

#googlemap {
     position:relative;
     top:0;
     left:0;
     z-index:10;
     max-width:100%;
     overflow:hidden;
}

#otherdisplay {
     position:relative;
     top:0;
     left:0;
     z-index:1;
     max-width:100%;
     overflow:hidden;
}

You could style your container however you need to move it around, and the 2 divs within it should just move along with it and resize if necessary.