VPF::Slider - Форум программистов

APro

Дата 3.10.2008, 20:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Кто есть ВКонтакте, знают, что для того, чтобы написать на "Стене", нужно нажать соответствующую кнопочку... "Написать". И после того как на неё жмём, выезжает textarea в который собсно и пишем. А как сделать такой эффект? Я в js вообще полный ноль.

Если вы не знаете как сделать, чтоб было 1:1 как там, то, думаю, что Вы точно знаете, как сделать такой же эффект, только без "Скольжения" (плавности), то тоже пишите.

--------------------

Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.

Nigel

Дата 3.10.2008, 21:23 (ссылка)

(нет голосов)

Загрузка ...

познаю мир

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

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

Подобная тема уже была. Ищите скрипт ациловскую либу, к примеру.

bars80080

Дата 3.10.2008, 21:28 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

показать текстареа? да обычный

Код


document.getElementById('id_textarea').style.display = 'block';

, т.к. по-умолчанию он задан none
выезжающий эффект, конечно придётся релизовать чутка более сложно функцией.
а отправку сообщения без перезагрузки страницы - аяксом

Michael.de

Дата 3.10.2008, 21:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Наверно так: на странице позиционировать (absolute) <div> с бэкграундом как у страницы, и размерами как у текстареа. Под ним спрятать <textarea> (zIndex < чем у дива). При клике на кнопку сдвигать <textarea> с задержкой на несколько 'px', пока она вся не появится (с помощью setInterval() ). Кстати, двигать её можно как вправо-влево, так и вверх-вниз.

Вот, наваял:

Код


<html>
<head>
<script type='text/javascript'>
var open=false;
function openClose(vert){
 var h, w, t, go, step=5, speed=10;
 t=document.getElementById('ta').style;
 h0=h=parseInt(t.height);
 w0=w=parseInt(t.width);
 go=window.setInterval(function (){
  if (open) step=-step;
  if (vert){
   t.top=(parseInt(t.top)+step)+'px';
   h-=step;
  }
  else {
   t.left=(parseInt(t.left)+step)+'px';
   w-=step;
  }
  //alert(h0+' '+step+' '+h+' open='+open);// 'open' is always false. Is it possible ???
  
  if (!open && (h<1 || w<1)) {open=true; window.clearInterval(go);}
  if (open && (h<=h0/2 || w<=w0/2)) {open=false; window.clearInterval(go);}
 }, 300/speed);
}

</script>
</head>
<body>
<button onclick="openClose(false);">Show / hide textarea</button>
<div style='left:50px;top:50px;width:200px;height:100px;z-index:2;position:absolute;background-color:#FFFFFF;'></div>
<textarea id='ta' style='left:50px;top:50px;width:200px;height:100px;z-index:1;position:absolute;background-color:#EEEEFF;'></textarea>
</body>
</html>

Если вызывать ф-цию openClose() в 30 строке с 'false' - выдвигаться будет горизонтально, с 'true' - вертикально. При повторном клике должно всё прятаться назад... но почему-то выдвигается дальше smile

Может кто свежим глазом посмотрит: я там ещё alert() в 20 строке откомментировал - var open всегда false, несмотря на 22 строку smile

Это сообщение отредактировал(а) Michael.de - 4.10.2008, 01:16

Hades

Дата 4.10.2008, 18:36 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Цитата(Michael.de @ 3.10.2008, 21:43

)

При повторном клике должно всё прятаться назад... но почему-то выдвигается дальше

Цитата(Michael.de @ 3.10.2008, 21:43

)

Код


if (!open && (h<1 || w<1)) {open=true; window.clearInterval(go);}

когда условие истина, open=true, потом проверяется

Цитата(Michael.de @ 3.10.2008, 21:43

)

Код


if (open && (h<=h0/2 || w<=w0/2)) {open=false; window.clearInterval(go);}

так как open=true, этот код выполняется и open=false.

Код


<script type='text/javascript'>
    var open=false;
    
    function openClose(vert){
        var h, w, t, go, step, speed=10;
        t=document.getElementById('ta').style;
        h0=h=parseInt(t.height);
        w0=w=parseInt(t.width);
        go=window.setInterval(function (){
            step = (open) ? -5 : 5;
            
            if (vert) {
                t.top=(parseInt(t.top)+step)+'px';
                h -= Math.abs(step);
            }
            else {
                t.left=(parseInt(t.left)+step)+'px';
                w -= Math.abs(step);
            }
 
            if (h < 1 || w < 1) {
                open = !open;
                window.clearInterval(go);
            }
        }, 300/speed);
    }

</script>

APro

Дата 4.10.2008, 19:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Я не понял... Объясните хотя бы, как сделать этот скрипт:

Код


document.getElementById('id_textarea').style.display = 'block';

Потому что я даже это не понял... (можно пример, но гараздо подробнее)

Добавлено через 2 минуты и 37 секунд
Hades, не заметил баг? Если 2-3 раза на кнопку нажать, то textarea уже не в том месте появляется... (по оси X) ... это не подходит... можно хотя бы простенький пример ... plz

--------------------

Hades

Дата 4.10.2008, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Цитата(APro @ 4.10.2008, 19:09

)

Если 2-3 раза на кнопку нажать, то textarea уже не в том месте появляется... (по оси X)

можно посмотреть ваш код smile

Код


<html>
<head>
<script type='text/javascript'>
    var open=false;
    
    function openClose(vert){
        var h, w, t, go, step, speed=10;
        t=document.getElementById('ta').style;
        h0=h=parseInt(t.height);
        w0=w=parseInt(t.width);
        go=window.setInterval(function (){
            step = (open) ? -5 : 5;
            
            if (vert) {
                t.top=(parseInt(t.top)+step)+'px';
                h -= Math.abs(step);
            }
            else {
                t.left=(parseInt(t.left)+step)+'px';
                w -= Math.abs(step);
            }
 
            if (h < 1 || w < 1) {
                open = !open;
                window.clearInterval(go);
            }
        }, 300/speed);
    }

</script>
</head>
<body>
<button onclick="openClose(false);">Show / hide textarea</button>
<div style='left:50px;top:50px;width:200px;height:100px;z-index:2;position:absolute;background-color:#FFFFFF;'></div>
<textarea id='ta' style='left:50px;top:50px;width:200px;height:100px;z-index:1;position:absolute;background-color:#EEEEFF;'></textarea>
</body>
</html>

Michael.de

Дата 5.10.2008, 00:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Hades: молодец, а то у меня уже голова не соображала smile

Цитата(APro @ 4.10.2008, 19:09

)

Hades, не заметил баг? Если 2-3 раза на кнопку нажать, то textarea уже не в том месте появляется... (по оси X) ... это не подходит... можно хотя бы простенький пример ... plz

APro: Да, это происходит если очень быстро нажимать на кнопку. Баг можно пофиксить, если после выдвижения прописать textarea позицию, где она дожна находиться.

Короче, версия 1.01beta smile

Код


<html>
<head>
<script type='text/javascript'>
var l=50, t=50, w0=w=200, h0=h=100, e='px', ta, dv, open=false;
function init(){
 ta=document.getElementById('ta').style;
 dv=document.getElementById('dv').style;
 ta.left=dv.left=l+e; ta.width=dv.width=w+e;
 ta.top=dv.top=t+e; ta.height=dv.height=h+e;
}

function openClose(vert){
 var h, w, go, bt, step=5, speed=10;
 bt=document.getElementById('bt');
 h=parseInt(ta.height);
 w=parseInt(ta.width);
 if (open) step=-step;
 go=window.setInterval(function(){
  if (vert){
   ta.top=(parseInt(ta.top)+step)+e;
   h-=Math.abs(step);
  }
  else {
   ta.left=(parseInt(ta.left)+step)+e;
   w-=Math.abs(step);
  }
  if (h<1 || w<1){
   open=!open;
   if (open) {bt.value='Hide'; vert ? ta.top=t+h0+e : ta.left=l+w0+e;}
   else {bt.value='Show'; vert ? ta.top=t+e : ta.left=l+e;}
   window.clearInterval(go);
  }
 }, 300/speed);
}
</script>
</head>
<body onload='init();'>
<input id='bt' type='button' value='Show' onclick='openClose(false);'>
<div id='dv' style='z-index:2;position:absolute;background-color:#FFFFFF;'></div>
<textarea id='ta' style='z-index:1;position:absolute;background-color:#EEEEFF;'></textarea>
</body>
</html>

Менять можно скорость выдвижения, плавность, направление (вниз или вправо) и местоположение на странице smile

APro

Дата 5.10.2008, 08:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Вроде красиво, но от некоторых пользователей не спрячешь баг, а его точно найдут :(

Буду юзать это:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>
<title>Скрытие элементов для дальнейшего показа с помощью  Javascript: пример 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>

<div id="link-here"></div>
<div id="hiddenknowledge">
<input type="text" value="xxx">
</div>


<script type="text/javascript">
document.getElementById('hiddenknowledge').style.display='none';
document.getElementById('link-here').innerHTML='<a onclick="document.getElementById(\'hiddenknowledge\').style.display=\'block\';this.innerHTML=\'\'">Показать знание</a>';
</script>

</body>
</html>

--------------------

Michael.de

Дата 5.10.2008, 18:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Цитата(APro @ 5.10.2008, 08:55

)

...Буду юзать это: ...

Ну о "этом" тебе ещё в 3м посту bars80080 написал smile

P.S. Оказалось что лучше сделать кнопку disabled на время работы скрипта, чем прописывать позицию у textarea.
Последняя версия 1.02 (я глюков не нашёл) - релиз smile

Код


<html>
<head>
<script type='text/javascript'>
var l=50, t=50, w=200, h=100, step=5, speed=10;
var bt, ta, dv, e='px', open=false;

function init(){
 ta=document.getElementById('ta').style;
 dv=document.getElementById('dv').style;
 bt=document.getElementById('bt');
 ta.left=dv.left=l+e; ta.width=dv.width=w+e;
 ta.top=dv.top=t+e; ta.height=dv.height=h+e;
}

function openClose(vert){
 bt.disabled=true;
 var h, w, go;
 h=parseInt(ta.height);
 w=parseInt(ta.width);
 go=window.setInterval(function(){
  if (vert){
   ta.top=(parseInt(ta.top)+step)+e;
   h-=Math.abs(step);
  }
  else {
   ta.left=(parseInt(ta.left)+step)+e;
   w-=Math.abs(step);
  }
  if (h<1 || w<1){
   open=!open;
   open ? bt.value='Hide' : bt.value='Show';
   bt.disabled=false;
   step=-step;
   window.clearInterval(go);
  }
 }, 300/speed);
}
</script>
</head>
<body onload='init();'>
<input id='bt' type='button' value='Show' style='cursor:pointer' onclick='openClose(true);'>
<div id='dv' style='z-index:2;position:absolute;background-color:#FFFFFF'></div>
<textarea id='ta' style='z-index:1;position:absolute;background-color:#EEEEFF'></textarea>
</body>
</html>

APro

Дата 6.10.2008, 06:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

буду пробовать smile

(релизер)

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »