Показать/скрыть данные в divs в том же месте?

У меня есть что-то вроде этого в настоящее время: current page build , и я работаю над тем, чтобы больше, как это: enter image description here Показать/скрыть данные в divs в том же месте?

Это не самая сложная часть, я в основном получил это сделать (благодаря ответ на предыдущий вопрос, это выглядит как первая картина на узком экране/мобильном телефоне, а вторая на больших экранах, планшетах и т. д.)

Зеленая пунктирная область будет div, и вы можете видеть две кнопки под ней. Мне нужно, чтобы карта спряталась (в этом случае нажмите ее в крайнем левом углу, потому что googlemaps не любит иметь скрытый/0px div), и я собираюсь использовать Spacetree от TheJIT для цепочки сообщений. Мы уже используем jQuery, так что лучший способ сделать зеленый dotted div (мы будем называть его .movingcontainer) переключаться между картой и spacetree, когда нажаты кнопки ниже нее?

Я знаю, что этот вопрос задан много раз, и я просматриваю некоторые другие вопросы, чтобы увидеть, были ли они подобной ситуацией.

источник

2012-02-03 Rob

Если у них есть абсолютный дисплей (вверху: что угодно: слева: что угодно), у вас может быть только 2 divs, уложенных друг на друга, а затем измените их z-индекс, чтобы поместить один напротив другого, в зависимости от которая нажата.

EDIT

Просто объяснить мой второй комментарий лучше. Предположим, у вас есть <div id="googlemap"> и <div id="otherdisplay">. Оба могут содержаться в пределах <div id="container">. Затем CSS может выглядеть примерно так:

#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; 
}

Вы можете укладывать контейнер, однако вам нужно, чтобы переместить его вокруг, и 2 дивы внутри него должны просто двигаться вместе с ним и размер, если это необходимо.

источник

2012-02-03 16:06:32 James

У меня могут возникнуть проблемы с их перемещением по узкому экрану, если я использую для них абсолютные значения, я должен проверить это. Я полностью забыл о z-индексах. – Rob

Ну, у вас могли бы быть оба этих divs, расположенных относительно друг друга, чтобы все, что они внутри, можно было перемещать, и они останутся прямо в нем. – James

Да, я не знаю, почему я об этом не думал. Это должно отлично работать! – Rob

Вы уверены, что скрытие googlemaps div не будет работать?

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

В соответствии с этим вопрос/ответ, похоже, что вы должны быть в состоянии использовать display:none для googlemaps дел. Затем, когда вам это нужно, просто используйте jQuery, чтобы дать googlemaps div этому CSS: display:block.

источник

2012-02-03 16:17:59 summea

Показать/скрыть данные в divs в том же месте?

ответ

Смежные вопросы