Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как определить уменьшение или увеличение элемента? (https://javascript.ru/forum/jquery/23504-kak-opredelit-umenshenie-ili-uvelichenie-ehlementa.html)

Zhazhah 26.11.2011 00:41

Как определить уменьшение или увеличение элемента?
 
Здравствуйте.. подскажите как можно определить что элемент уменьшается или увеличивается при изменении размеров окна?
$(window).resize(function() {});

trikadin 26.11.2011 01:18

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

Zhazhah 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 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 26.11.2011 20:43

Цитата:

Сообщение от ksa
А вот в ФФ и Опере таки работает.

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

ksa 27.11.2011 11:44

Цитата:

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

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

trikadin 27.11.2011 13:55

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

Zhazhah 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);

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


Часовой пояс GMT +3, время: 23:44.