Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jquery overflow 
:(
    Опции темы
klyxa
Дата 3.7.2009, 17:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 110
Регистрация: 13.8.2006

Репутация: нет
Всего: нет



привет. у меня вопрос, как сделать "красивый"(анимированный) выпад формы.
у меня есть div блок
Код

<div id="cmain">
</div>


стиль
Код

#cmain
{
   height:150px;
   overflow:hidden;
}


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

Код

$(document).ready(function()
{
   $("a.view").click(function()
   {
      $("div#cmain").css("height","100%");
    });
});


но тут он просто меняет высоту блока. пытался сделать через animate() и свойство overflow..чтото вобще ничего не получилось(

при 
Код

$("div#cmain").css("overflow","visible");

вобще страшные вещи происходят) 

т.е. у меня 2 вопроса:
1) как определить,что текст "вылез" за границы блока
2) как сделать анимированный выпад при выпаде блока

подскажите мудрым советом пожалуйстаsmile

p.s.: может есть способ проше?

PM MAIL   Вверх
ksnk
Дата 3.7.2009, 18:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Полезно почитать про верстку хоть что-нибудь, чтобы представлять себе какие страшные вещи бывают при overflow: visible и что случится с блоком при height:100%
Код

<body>
<script type="text/javascript" src='jquery.js'></script>
<style type="text/css" >
#cmain { 
    height:150px; 
    overflow:hidden;
    position:relative;
    border:1px solid red; /** debuggie */

}
#cmain .link {
   position:absolute; right:0; bottom:0;
   border:1px solid green;/** debuggie */
}
</style>

<script type="text/javascript">
$(function(){

$('#cmain').each(function(){
  if(this.scrollHeight > this.clientHeight){
    var self= this;
    $('<a class="link">смотреть фсё</a>').appendTo($(this)).click(function(){
        $(this).hide();
        $(self).animate({height:self.scrollHeight});
    });
  }
})


})
</script>

<div id="cmain">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a</div>
</body>




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
klyxa
Дата 3.7.2009, 23:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 110
Регистрация: 13.8.2006

Репутация: нет
Всего: нет



Спасибо большоеsmile
PM MAIL   Вверх
klyxa
Дата 5.7.2009, 18:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 110
Регистрация: 13.8.2006

Репутация: нет
Всего: нет



Код

<body>
<script type="text/javascript" src='jquery.js'></script>
<style type="text/css" >
.cmain { 
    height:150px; 
    overflow:hidden;
    position:relative;
    border:1px solid red; /** debuggie */
}
.cmain .hlink,.vlink {
   position:absolute; right:0; bottom:0;
   border:1px solid green;/** debuggie */
   cursor:pointer;
   cursor:hand;
}
#test
{
   border:1px solid grey;
   margin-top:5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $('.cmain').each(function(){
   if(this.scrollHeight > this.clientHeight){
    var self= this;
    $('<a class="hlink">смотреть всё</a>').appendTo(this).click(function(){
        var hlink = this;
        $(hlink).hide();
        $(self).animate({height:self.scrollHeight},100);
        $('<a class="hlink">свернуть</a>').appendTo(self).click(function(e){
          $(this).parent().animate({height:150},100);
          $(this).hide();
          $(hlink).show();
        });
    });
  }
});
})
</script>
<div class="cmain">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="cmain">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
</body>


Немного доделал код, теперь можно сворачивать\разворачивать...но было круто...smile
ps: какими способами можно получить значение свойства стиля?
т.е. например получить высоту блока,заданную в стилях,чтобы не прописывать "жёстко"
Код

$(this).parent().animate({height:150},100);


PM MAIL   Вверх
ksnk
Дата 5.7.2009, 22:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Код

$(document).ready(function(){
  $('.cmain').each(function(){
    this.__pastHeight=this.clientHeight; // как правило, это и есть height...
     $('<a class="hlink">смотреть всё</a>').appendTo(this).click(function(){
        var parent=$(this).parent('.cmain');
        parent.find('.hlink').toggle();
        parent.animate({height:parent[0].scrollHeight},100);
      })
     $('<a class="hlink">свернуть</a>').appendTo(this).click(function(){
        var parent=$(this).parent('.cmain');
        parent.find('.hlink').toggle();
        parent.animate({height:parent[0].__pastHeight},100);
      }).hide();
  });
})


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

Еще там был косяк с многократным создание кнопки "свернуть"...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
klyxa
Дата 6.7.2009, 13:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 110
Регистрация: 13.8.2006

Репутация: нет
Всего: нет



Оу. Да, красивое решениеsmile Добавлю только проверку на размер блока, чтобы ссылка на развёртывание появлялась только при "переполнении".
Код

$(document).ready(function(){
  $('.cmain').each(function(){
   this.__pastHeight=this.clientHeight;
   if(this.scrollHeight > this.clientHeight)
   {
    $('<a class="hlink">смотреть всё</a>').appendTo(this).click(function(){
       var parent=$(this).parent('.cmain');
       parent.find('.hlink').toggle();
       parent.animate({height:parent[0].scrollHeight},100);
     });
    $('<a class="hlink">свернуть</a>').appendTo(this).click(function(){
       var parent=$(this).parent('.cmain');
       parent.find('.hlink').toggle();
       parent.animate({height:parent[0].__pastHeight},100);
     }).hide();
    }
});
})


Еще раз Спасибо за помощь;)

PM MAIL   Вверх
IDVsbruck
Дата 6.7.2009, 16:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 4
Всего: 22



Только красивей если __pastHeight помещать в атрибут родителя - проще с поиском и минимум на 3 строчки урезается код.
PM MAIL   Вверх
ksnk
Дата 6.7.2009, 17:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Цитата(IDVsbruck @  6.7.2009,  16:01 Найти цитируемый пост)
красивей если __pastHeight помещать в атрибут родителя

А сейчас он где? 

Можно сократить строчки, если использовать предыдущий вариант - сохранение парента в переменной self и использование ее. Но это тянет за собой проблему - почистить эту переменную по выходу из приложения, чтобы не было утечек памяти в IE6... А вот уже эта проблема съест всю экономию smile


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
youri
Дата 8.7.2009, 03:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: нет
Всего: 16



вообще, ходят слухи, что был патч для ie 6, в котором утечки были ликвидированы (Утечки памяти при коммуникации DOM-javascript)

Это сообщение отредактировал(а) youri - 8.7.2009, 03:54
PM   Вверх
ksnk
Дата 8.7.2009, 10:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



youri, То есть предлагается расчитывать на IE6, и при этом надеятся, что ВСЕ люди уже  пропатчили свой компьютер? imho, люди, которые следят за своим компьютером, переползают с -6ки на 7-8, а на 6-ке сидят те, кому и пропатчить бывает влом...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
youri
Дата 8.7.2009, 15:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: нет
Всего: 16



я скорее информацию сверяю... все хочу в этом вопросе разобраться (когда возникают утечки и как их избежать), в частности, если страница долго не перезагружается
PM   Вверх
Aliance
Дата 10.7.2009, 00:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137



По статистике liveinternet 6-ым ИЕ пользуются уже не более 14% всех пользователей ИЕ (со слов habrahabr ), так что думаю что скоро можно будет забыть об этом кошмарном сне)
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 10.7.2009, 00:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Aliance, Я вот, давеча ставил "XP за 1 минуту", разворачивая образ Acronis'а на чистой машинке с утащенного с торрента XP SP3 "со всеми обновлениями", дык догадайтесьс трех раз какой там Эксплорер оказался?  smile  


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
IDVsbruck
Дата 10.7.2009, 10:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 4
Всего: 22



Это не значит, что ты им пользовался ... Обычно при подключении к инету сразу апдейты предлагаются. В основном те, кто вылазят в инет, апдейтятся. А те, кто не вылазят, в статистику не попадают smile
PM MAIL   Вверх
ksnk
Дата 10.7.2009, 11:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



IDVsbruck, imho, пока клиент принимает сайт на IE6, нужно писать под IE6, даже если этот клиент остался единственным пользователем 6-ки в мире smile 
в конце концов это пока не так уж и страшно...

Добавлено через 2 минуты и 56 секунд
Есть мнение, что у однокласников и "в контакте" будет насколько другая статистика, чем на хабрахабре. Куда еще часто ходют неадвансед интернет-юзеры? Разве что на сайт Микрософт...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
IDVsbruck
Дата 10.7.2009, 17:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 4
Всего: 22



Насчет одного пользователя - это ты сильно загнул ...
Считаю, что рационально установить порог для подгонки под браузер, иначе вся работа сведется к "затачиванию" под десятки браузеров.
Насчет ИЕ6 согласен - сектор по-прежнему достаточно велик, чтобы его просто отпускать, хотя в самом последнем проекте, к примеру, особо на нем не заостряюсь - конечно, уродско выглядит, но есть надпись типа "сайт заточен под ИЕ от 7 и выше, советуем обновить свою версию тут". Конечно, покатит не всегда и не везде, но специфика сайта такова, что пользователю все равно надо пробиться и он или смирится с внешним видом, или обновит. Или еще пример текущей разработки - казино - просто в игнор, так как пользователи, экономящие на трафике, железе или еще на чем-то просто не являются нашей аудиторией. Хотя, возможно, и будет пересмотрено, правда, выход не ранее чем через год, так что статистика может сильно поменяться и может быть, что и вовсе сойдет на нет.
Кстати, подгонку провожу только под ИЕ и ФФ, еще в последнее время стал обращать внимание на 4 Сафари и Хром, остальные браузеры не поднимаются выше 1% (с суммарной статистикой 4-6%), поэтому прагматичнее их игнорировать.
PM MAIL   Вверх
Страницы: (2) [Все] 1 2 
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.1381 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.