VPF::mootools FX.slide - Форум программистов

sayber

Дата 25.1.2008, 15:27 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.7.2006
Где: Moscow - qwerty

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

Проблема с эффектом слайд в mootools

Код js

Код


  <script type="text/javascript">
        window.addEvent('domready', function(){
                    
            var mySlide = new Fx.Slide('login', {duration: 800});
            $('toggle').addEvent('click', function(e){
            e = new Event(e);
            mySlide.toggle();
            e.stop();
            });
    

        }); 
        
        
    </script>

Ссылка [code=html]<a id="toggle" href="#">ссылка</a>[code=html]

объект [code=html]<div id="login"> меня не должно быть видно до нажатия "ccskrf" </div>[code=html]

Демо
http://demos.mootools.net/Fx.Slide

Вопрос вот в чем, что то я не нашел в мануале как сделать следующие:

По умолчанию текст в теге div id=login виден. А мне надо наоборот. Чтобы изначально он был скрыт.
smile

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~WoW CafeSayber © Портфолио ~~~~~~~~~~~~~~~~~~~~~~~~~~~

ksnk

Дата 25.1.2008, 18:53 (ссылка)

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

Загрузка ...

прохожий

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

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

Код


...
var mySlide = new Fx.Slide('login', {duration: 800});
mySlide.hide();
...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

sayber

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

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.7.2006
Где: Moscow - qwerty

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

эффект тот же.\

ksnk, зачем давать совет если сами не проверяли?

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~WoW CafeSayber © Портфолио ~~~~~~~~~~~~~~~~~~~~~~~~~~~

ksnk

Дата 25.1.2008, 20:05 (ссылка)

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

Загрузка ...

прохожий

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

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

тогда сами ищите 10 отличий...

Код

<html>
<head>
<script src='mootools.js'></script>
<script>
window.addEvent('domready', function(){
       //-vertical
 
var mySlide = new Fx.Slide('test');
 mySlide.hide();
$('slidein').addEvent('click', function(e){
    e = new Event(e);
    mySlide.slideIn();
    e.stop();
});
 
$('slideout').addEvent('click', function(e){
    e = new Event(e);
    mySlide.slideOut();
    e.stop();
});
 
$('toggle').addEvent('click', function(e){
    e = new Event(e);
    mySlide.toggle();
    e.stop();
});
 
$('hide').addEvent('click', function(e){
    e = new Event(e);
    mySlide.hide();
    e.stop();
});
 
 
//--horizontal
 
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
 mySlide2.hide();
 
$('slidein2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.slideIn();
    e.stop();
});
 
$('slideout2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.slideOut();
    e.stop();
});
 
$('toggle2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.toggle();
    e.stop();
});
 
$('hide2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.hide();
    e.stop();
});
})</script>
<style>
#test {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
}
 
#test2 {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
}
</style>
</head>
<body>
<h3 class="section">Fx.Slide Vertical</h3>
 
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>
 
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<h3 class="section">Fx.Slide Horizontal</h3>
 
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
 
<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

sayber

Дата 25.1.2008, 20:56 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.7.2006
Где: Moscow - qwerty

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

Хех... Ну ттут я не прав т.к. вас не понял.

Надо было пояснить что после метода надо поставить mySlide.hide();

Я смотрел на эту часть
e = new Event(e);
mySlide.hide();

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~WoW CafeSayber © Портфолио ~~~~~~~~~~~~~~~~~~~~~~~~~~~

ksnk

Дата 25.1.2008, 21:04 (ссылка)

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

Загрузка ...

прохожий

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

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

Цитата(sayber @ 25.1.2008, 20:56

)

Надо было пояснить что после метода надо поставить mySlide.hide();

И как-же надо было это пояснить? Не так, разве ? ;-)

Код


...
var mySlide = new Fx.Slide('login', {duration: 800});
mySlide.hide();
...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

sayber

Дата 27.1.2008, 23:25 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.7.2006
Где: Moscow - qwerty

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

ksnk, просто я тупанул +) Признаюсь =D

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~WoW CafeSayber © Портфолио ~~~~~~~~~~~~~~~~~~~~~~~~~~~

Rencom

Дата 17.7.2008, 16:52 (ссылка)

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

Загрузка ...

Шустрый

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

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

решение с hide() плохое... оно выполняется когда готова DOM модель, то есть получается эффект, что страница загружается, а потом на глазах пользователя блок пропадает... А нужно, чтобы он изначально был скрыт... у кого какие мысли по этому поводу? из моих мыслей - поиграть с display:none... но может можно как-то по-другому?

Rencom

Дата 17.7.2008, 17:09 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


<div style="display: none;" id="vertical_slide">text</div>

Код


...
 var myVerticalSlide = new Fx.Slide('vertical_slide').hide();        
 $('vertical_slide').style.display = 'block';
...

Добавлено через 12 минут и 23 секунды
предыдущий вариант немного колбасило, вот придумал по-другому:

Код


    <div style="height: 0; overflow: hidden;" id="vertical_slide">

Код


    $('vertical_slide').style.height = 'auto';
    $('vertical_slide').style.overflow = 'visible';

Rencom

Дата 20.7.2008, 21:15 (ссылка)

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

Загрузка ...

Шустрый

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

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

появилась еще одна проблема) проблема с версией библиотеки v1.11, если делать hide() при нулевом height, а затем сделать height либо auto, либо какой-то фиксированный конкретный размер, но эффекта slidein() и toggle() при первом нажатии не будет... с версией библиотеки 1.2 такого не происходит... кто знает как решить задачу? поскольку версии 1.11 и 1.2 очень сильно различаются и вообще говоря несовместимы, то следать обновление для работающего сайта будет проблематично... хотелось бы решить проблему под 1.11...

Sinclair

Дата 16.11.2008, 01:50 (ссылка)

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

Загрузка ...

Новичок

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

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

у меня тоже проблема версий библиотеки, только у меня 1.00, необходим обычный слайд для дива, пытался по всякому и бестолку.. получается следующее: при инициализации слайда для дива создается див парент, но потом не уничтожается, либо уже не используется. возможно нужно просто правильно написать код, и вообщем то не проблемно сделать отдельно инициализацию при загрузке, а toggle при нажатии но в моем случае сильно нагрузочно так как пишу для движка, может кто знает чем помочь?

P.S. >> Пытался так:

Код


function toggle(id) {    
    //-vertical
d = $(id).innerHTML;
$('ram').innerHTML='<div id="'+id+'" style="margin: -90px 0pt 0pt;">'+d+'</div>';
     var myVerticalSlide = new Fx.Slide(id).toggle();

}

Это сообщение отредактировал(а) Sinclair - 16.11.2008, 01:54

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