Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2012, 01:27
Новичок на форуме
Отправить личное сообщение для Hidkun Посмотреть профиль Найти все сообщения от Hidkun
 
Регистрация: 20.01.2012
Сообщений: 2

Не скрывается блок при размере окна < 1024 px
Приветствую.

В JS разбираюсь.... вообще не разбираюсь.
Чисто логически написал скрипт:

<script language="javascript">

  if (document.body.clientWidth <= '1024'){
 document.getElementById('block01').style.display = 'none';
 }
 
</script>


Задача: Если размер окна браузера меньше или равен 1024 px, то div блок с id="block01" должен стать невидимым (display = none иначе display: block; т.е. видим.
Идеальный вариант если скрипт будет работать при изменении размера окна без перезагрузки страницы сайта.

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

Заранее благодарю за ответы.
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2012, 10:54
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

я бы сейчас делал это с помощью css (js только для старых броузеров),
почитайте про медиа-запросы, например, здесь http://habrahabr.ru/blogs/webdev/119127/
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2012, 15:19
Новичок на форуме
Отправить личное сообщение для Hidkun Посмотреть профиль Найти все сообщения от Hidkun
 
Регистрация: 20.01.2012
Сообщений: 2

Pavel M., спасибо, статья полезная.
Но у меня по статистике на < 1024 приходится менее 3% пользователей, а вот старые браузеры преобладают, поэтому склоняюсь к JS.
Есть варианты как реализовать?
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2012, 15:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Hidkun,
... поискать по форуму ... поразбиратся самому ... или вариант ниже ...
<!DOCTYPE html>

<html>
<head>
  <title></title>
<style type="text/css">
p {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    height: 50px;
    width: 300px;
    color: Red;
    font-size:  2em;
}
* html p {
    position: absolute;
}
</style>
<script type="text/javascript">
var b;

function get(a) {
    var c = document,
        d = c.body,
        e = c.documentElement,
        f = "client" + a,
        a = "scroll" + a;
    return "CSS1Compat" === c.compatMode ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = show;

function show() {
    document.getElementById("vid").style.display = 1024 < get("Width") ? "" : "none"
}
window.onresize = function () {
    window.clearTimeout(b);
    b = window.setTimeout(function () {
        show()
    }, 20)
};
</script>
</head>
<body>
<p id="vid">Всякая всячина</p>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Увеличение окна браузера при загрузке Grendel Events/DOM/Window 11 13.05.2011 01:40
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04