Форум

Zhazhah · #1 (**permalink**) 26.11.2011, 00:41

Здравствуйте.. подскажите как можно определить что элемент уменьшается или увеличивается при изменении размеров окна?

$(window).resize(function() {});

trikadin · #2 (**permalink**) 26.11.2011, 01:18

Брать его размер. При изменении размеров окна - проверять его размер. Если больше, чем было - значит, увеличился.

Zhazhah · #3 (**permalink**) 26.11.2011, 02:12

function RubberShoveler() {    
     resize = $('ul').width();
    
    $(window).resize(function() {
        var action;
        var ulWidth=$('ul').width();//Текущий размер UL
        
        if(ulWidth<resize) {
            action = false;
        }  else if(ulWidth>resize) {
            action = true;
        }
        resize=ulWidth;
        $('#res').html(resize+" ; "+action);
    });
}

всё время false, странно resize глобальная переменная
сначало получаем текущую ширину в переменную resize, при возникновении события сравниваем если значение увеличилось true нет false и так далее, но что то только false

ksa · #4 (**permalink**) 26.11.2011, 13:42

Сообщение от Zhazhah

всё время false

Всё там работает...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
	resize = $('ul').width();
    $(window).resize(function() {
        var action='';
        var ulWidth=$('ul').width();
        if(ulWidth<resize) {
            action = '<<';
        } else if (ulWidth>resize) {
            action = '>>';
        };
        resize=ulWidth;
        $('#res').text(action);
    });
});
</script>
</head>
<body>
<ul>
	<li>Test</li>
</ul>
<p id='res'></p>
</body>
</html>

Правда в ИЕ8 работать не захотело... А вот в ФФ и Опере таки работает.

trikadin · #5 (**permalink**) 26.11.2011, 20:43

Сообщение от ksa

А вот в ФФ и Опере таки работает.

Таки не работает. FF 8.

ksa · #6 (**permalink**) 27.11.2011, 11:44

Сообщение от trikadin

Таки не работает. FF 8.

Решил проверить... Обновился до 8.0.1 - таки работает.

trikadin · #7 (**permalink**) 27.11.2011, 13:55

ksa, работает) Видимо, браузер глюкнул, а я не разобрался)

Zhazhah · #8 (**permalink**) 27.11.2011, 20:03

У меня в хроме не работало, видимо из за того что если делать инкремент при увеличении или уменьшении окна в хроме переменная увеличивается на 2 а в опере на 1

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <!--
        <link rel="stylesheet" type="text/css" href="tmp.css" />
        -->
        <style type="text/css">
        </style>
        <script type="text/javascript">

            resize = $('.shoveler ul').width();
            $(window).resize(function() {
                var action='';
                var ulWidth=$('ul').width();
                if(ulWidth<resize) {
                    action = '<<';
                } else if (ulWidth>resize) {
                    action = '>>';
                };
                resize=ulWidth;

                if(action=='>>') {
                    $('#res').html(">>");
                } else if(action=='<<') {
                    $('#res').html("<<");
                }
            });

        </script>
    </head>
    <body>
        <ul>
            <li>Test</li>
        </ul>
        <p id='res'></p>
    </body>
</html>

в ie нет возможности проверить, но думаю заработает... если заменить

if(action=='>>') {
    $('#res').html(">>");
} else if(action=='<<') {
    $('#res').html("<<");
}

на

$('#res').html(action);

то в хроме точно не работает

Форум

Справочник

Discord чат

Курсы javascript