Как скрыть карту?

Question

[Максим]

Используется Smarty шаблонизатор,
Имеется блок

<div class="show_map">{include file='map.tpl'}</div>

Как сделать что бы этот блок выводился только при ширине экрана <640 ,
Условие есть
if (document.body.clientWidth >640) {
не получается сам блок выводить

Answer 1

[Данила Авдошин]

Через CSS.

@media only screen and (max-width: 640px) {
    .show_map {
        display: none;
    }
}

Comments

[Максим]

Проблема в том, что я не могу воспользоваться display:none так как при этом она все ровно будет загружаться, но не показыватьсяю На карте много точек и она долго загружается , в этом и смысл, вообще не загружать

[Илья Белобородов]

Максим: если использовать javascript, то карта все равно будет грузится

Answer 2

[Александр Таратин]

Оборачиваем карту в iframe и загружаем его только на широких экранах, либо если браузер растянули на достаточную ширину. При сужении экрана просто делаем карте display:none;

Данные манипуляции достаточно легко воплотить на js.

Answer 3

[Иван Соломенников]

Я бы лично воспользовался @media screen, если при помощи *js, то вам нужно свойство объекта window, window.innerWidth, которое отвечает за ширину окна браузера, а не элемента страницы.

Answer 4

[GreatRash]

document.addEventListener('DOMContentLoaded', function(event) {
  var elem = null;

  if (window.matchMedia("(min-width: 640px)").matches) {
    elem = document.querySelector('div.show_map');
    elem.parentNode.removeChild(elem);
  }
});

Comments

[GreatRash]

Если нужно назад вернуть элемент, то можно его перед удалением загнать в documentFragment и аппендить назад когда понадобится.

Answer 5

[Ivanq]

@media screen and (max-width: 640px) {
    .show_map {
        display: none;
    }
}

Comments

[Максим]

Проблема в том, что я не могу воспользоваться display:none так как при этом она все ровно будет загружаться, но не показыватьсяю На карте много точек и она долго загружается , в этом и смысл, вообще не загружать

[Ivanq]

Максим: Хм... Ну это никак, разве что динамически загружать через JS, но вряд ли получится.