Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Выдвигающийся блок

Обсуждение темы Выдвигающийся блок в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте, у меня еще один вопрос. Возникла идея реализации на сайте такого блока: (накидал анимацю в фотошопе) http://gta.bashtel.ru/img/15109f0474...728ac3e09d.gif Подскажите пожайлуста, как я могу ...


Закрытая тема
 
Опции темы
Старый 03.07.2011, 16:54   #1
Здравствуйте, у меня еще один вопрос.
Возникла идея реализации на сайте такого блока: (накидал анимацю в фотошопе)
http://gta.bashtel.ru/img/15109f0474...728ac3e09d.gif
Подскажите пожайлуста, как я могу это сделать. Или дайте ссылку на подобный урок
Заранее благодарен
 
Старый 03.07.2011, 16:54
Ссылки
Старый 03.07.2011, 17:44   #2
jquery
 
Старый 05.07.2011, 16:51   #3
Посмотри фреймворк jQuery. Там есть функция .show(), которую можно с помощью jQuery User Interface настроить так, как ты хочешь.

$('#id_твоего_блока').click(){
// код с использованием и настройками .show();
}
 
Старый 12.07.2011, 19:18   #4
Сделал, вроде бы все нравится. (Скрины 1 и 2)
Но как только я перехожу на страницу полной новости, все ломается. (скрин 3)
Подскажите пожайлуста, что нужно сделать.
вот код который я вставлял в main.tpl
cms dle
PHP код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.jstype="text/javascript"></script>
<script src="http://jemand.ru/examples/scripts/jquery.tabslideout.v1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('.panel').tabSlideOut({                            //Класс панели
        tabHandle: '.handle',                        //Класс кнопки
        pathToTabImage: '/templates/Default/images/menu-bottom.png',                //Путь к изображению кнопки
        imageHeight: '140px',                        //Высота кнопки
        imageWidth: '40px',                        //Ширина кнопки
        tabLocation: 'right',                        //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
        speed: 1000,                                //Скорость анимации
        action: 'click',                                //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
        topPos: '0px',                            //Отступ сверху
        fixedPosition: true                        //Позиционирование блока false - position: absolute, true - position: fixed
    });
});
</script> 
PHP код:
<div class="panel">
            <
class="handle" href="#">JavaScript должны быть включены!</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
            <
h3><span lang="ru">11111</span></h3><br>
            <
span lang="ru">
                <
p><a href="#">11</a></p><br>
                <
p><a href="#">11</a></p><br>
                <
p><a href="#">11</a></p><br>
                <
p><a href="#">11</a></p>
            </
span>
        </
div
А вот код fullstory.tpl (Полная новость)
PHP код:
{poll}
<
table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
<
div class="eTitle" style="text-align:left;">{title}[edit]<img src="/templates/default/images/edit.png">[/edit]</div>
<
div class="eTitle1" style="text-align:left;">Раздел:&nbsp;{link-category}</div>
<
div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">{full-story}</div>
<
div style="float:right; padding-top:7px; padding-bottom:0px;">{rating}</div>
<
div class="eTitle1" style="text-align:left;">&nbsp;Автор:<strong>{author}</strong> | {date} | Просмотров: {views}</div>
</
table>
<
br
Изображения
Тип файла: gif 1.gif (24.1 Кб, 19 просмотров)
Тип файла: gif 2.gif (24.5 Кб, 15 просмотров)
Тип файла: jpg 3.jpg (162.0 Кб, 10 просмотров)

Последний раз редактировалось 2GAR1N; 12.07.2011 в 19:20..
 
Старый 13.07.2011, 19:03   #5
Есть предложения?
 
Старый 27.07.2011, 01:30   #6
Как вариант:
Код:
$(document).ready(function () {
    $('css класс элемента, по которому будет производиться клик').click(function () {
	$('css класс выдвигаемого блока').slideToggle('normal');
    });
});
 
Этот пользователь сказал спасибо vadimon за это полезное сообщение:
2GAR1N (02.08.2011)
Старый 27.07.2011, 01:30
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемы с IE8: съезжает блок Apologet HTML, CSS, JavaScript 1 23.07.2011 17:49
Вставить видео-блок Генрик Сенкевич HTML, CSS, JavaScript 3 06.03.2010 11:17
Внутриконтентный блок от Зорьки zorin SEO-инструментарий 2 24.09.2009 15:07
Растягивающийся блок ugarov HTML, CSS, JavaScript 1 07.04.2009 22:07
Блок банер! hazy Кальянная 11 08.04.2005 00:24


Текущее время: 10:51. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум