Форум

Hidkun · #1 (**permalink**) 20.01.2012, 01:27

Приветствую.

В 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; т.е. видим.
Идеальный вариант если скрипт будет работать при изменении размера окна без перезагрузки страницы сайта.

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

Заранее благодарю за ответы.

Pavel M. · #2 (**permalink**) 20.01.2012, 10:54

я бы сейчас делал это с помощью css (js только для старых броузеров),
почитайте про медиа-запросы, например, здесь http://habrahabr.ru/blogs/webdev/119127/

Hidkun · #3 (**permalink**) 20.01.2012, 15:19

Pavel M., спасибо, статья полезная.
Но у меня по статистике на < 1024 приходится менее 3% пользователей, а вот старые браузеры преобладают, поэтому склоняюсь к JS.
Есть варианты как реализовать?

рони · #4 (**permalink**) 20.01.2012, 15:56

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>

Форум

Справочник

Discord чат

Курсы javascript