2

I've got something like this currently:current page build and I'm working on making it more like this:enter image description here

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.

Rob
  • 2,779
  • 5
  • 23
  • 34

2 Answers2

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.

James
  • 3,765
  • 4
  • 48
  • 79
  • I may run into problems having them move on a narrow screen if I use absolute values for them, I'll have to check it. I forgot about z-indexes completely. – Rob Feb 03 '12 at 16:46
  • Well, you could have both those divs positioned relative so that whatever they are inside of can be moved around, and they will stay positioned right inside of it. – James Feb 03 '12 at 18:23
  • Yeah, I don't know why I didn't think of that. This should work great! – Rob Feb 03 '12 at 18:36
0

Are you sure hiding the googlemaps div won't work?

how to deal with google map inside of a hidden div (Updated picture)

According to that question/answer, it looks like you should be able to use display:none for your googlemaps div. Then, when you need it back, just use jQuery to give the googlemaps div this CSS: display:block.

Community
  • 1
  • 1
summea
  • 7,390
  • 4
  • 32
  • 48