|
Плавно переходящий текст и закреплённое подменю
|
|
|
2011-06-01Дата: Среда, 01.06.2011, 21:51 | Сообщение # 1 |
Подполковник
Группа: Проверенные
Статус: Offline
|
Вот выделенный пример плавно переходящего текста: http://desbr.ucoz.com/
Вопрос: Какой скрипт нужно писать что бы его можно было задействовать для другого текста и как работать с этим скриптом.
Закреплённое подменю (Пример тот же)
В данном случае подменю закреплено, каким образом можно создать подобное закрепление для подобного меню/подменю?
| | |
|
|
2011-06-02Дата: Четверг, 02.06.2011, 01:31 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
DesBR, Quote (DesBR) Вот выделенный пример плавно переходящего текста: http://desbr.ucoz.com/
Вопрос: Какой скрипт нужно писать что бы его можно было задействовать для другого текста и как работать с этим скриптом.
В упор не увидел “переходящего текста” ...
Что имеется в виду? ... Текст который меняет плавно цвет?
- для этого куча плагинов (скриптов) существует.
http://yandex.ru/yandsearch?text=плавная+смена+текста+script
...
| | |
|
|
2011-06-02Дата: Четверг, 02.06.2011, 05:44 | Сообщение # 3 |
Подполковник
Группа: Проверенные
Статус: Offline
|
Quote (likbezz)
В упор не увидел “переходящего текста” ..
при нажатии слева на ссылку справа текст плавно меняется..
| | |
|
|
2011-06-02Дата: Четверг, 02.06.2011, 05:50 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
DesBR, Quote (DesBR) при нажатии слева на ссылку справа текст плавно меняется..
Там не текст меняется, а содержимое всего блока ) ...
Quote (DesBR) Какой скрипт нужно писать
Можно использовать любой скрипт табов, с эффектом fadeIn/fadeOut ...
... Ну а можно написать свой, под свои ... запросы, естественно ... Ничего сложного в этом нет. Эффект - стандартный (jQ)
...
Например, такой:
Quote (JS) <script type="text/javascript">
(function($){$(function()
{$('ul.tabs').each(function(){$(this).find('li').each(function(i){
$(this).click(function(){$(this ).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box').hide().end()
.find('div.box:eq('+i+')').fadeIn (150);});});
});
})})(jQuery)
</script>
Code <div class="section"> <ul class="tabs"> <li class="current">1-я вкладка</li> <li>2-я вкладка</li> </ul> <div class="box visible">Содержимое первого блока</div> <div class="box">Содержимое второго блока</div> </div>
Quote (CSS) <style type="text/css">
.box{display:none;}
.box.visible{display:block;}
</style>
- прочее оформление - по вкусу.
| | |
|
|
2011-07-16Дата: Суббота, 16.07.2011, 08:12 | Сообщение # 5 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, помоги пожалуйста оформить стиль вывода текста в информере. Пытаюсь сделать вот что:
Эффект незначительной вдавленности тут сделан сдвигом вправо-вниз на 1рх белого текста на дублирующем слое. В браузере у меня получилось сделать тоже самое, но топорным способом: дублирую вывод надписей, одну из них перекрашиваю в белый цвет и совмещаю их друг под другом с помощью position:relative. Впринципе, в ФФ и в Хроме все смотрится адекватно, но в Опере же, сдвиг получается не 1рх, а чуть больше, а в ИЕ вообще сдвиг идет в противоположную сторону (влево-вверх). Плюс проблема с позиционирование дубликатов текста, расположенного в несколько строк (к-во строк постоянно меняется).
Просьба, - помоги, пожалуйста, сделать эффект вдавленности по-уму.
Сообщение отредактировал Lunder - Суббота, 16.07.2011, 17:18 | | |
|
|
2011-07-16Дата: Суббота, 16.07.2011, 15:13 | Сообщение # 6 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Lunder, Quote (Lunder) Просьба, - помоги, пожалуйста, сделать эффект вдавленности по-уму.
Проще всего, для нормальных браузеров организовать это при помощи CSS3 свойства text-shadow А для ИЕ - заюзать либо скрипт либо фильтр (как у меня в шапке «Copyright ....»), либо плюнуть на это неблагодарное дело )))
...
Вечерком гляну. Ссылки не забываем выкладывать на ваши эксперименты.
...
| | |
|
|
2011-07-16Дата: Суббота, 16.07.2011, 17:05 | Сообщение # 7 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Эксперементы убрал, потому как сайт, вроде бы, рабочий. А было вот что:
Code <table border="1" bordercolor="#66645b" cellpadding="10" cellspacing="2" width="100%" height="206px" style="margin-top:15px; background: #eefbea url('/Textures_580_200ten.jpg') no-repeat;" class="infTable"> <tr> <td> <table border="0" width="100%"> <tr> <td colspan="3"><strong><a href="/publ/" style="TEXT-DECORATION:none; font-size:13pt; color:#fefcfc; position:relative; left:228px; top:1px;">Прес-Центр</a> <a href="/publ/" style="TEXT-DECORATION:none; font-size:13pt; color:#66645b; position:relative; left:127px;">Прес-Центр</a></strong> </td> </tr> <tr> <td><strong><a href="#null" style="TEXT-DECORATION:none; font-size:13pt; color:#fefcfc; position:relative; left:2px; top:1px;">$DATE$</a><a href="#null" style="TEXT-DECORATION:none; font-size:13pt; color:#66645b; position:relative; right:80px;">$DATE$</a></strong> </td> <td> <?if($CATEGORY_NAME$)?><strong><a href="$CATEGORY_URL$" style="TEXT-DECORATION:none; font-size:13pt; color:#fefcfc; position:relative; left:202px; top:1px;">$CATEGORY_NAME$</a><a href="$CATEGORY_URL$" style="TEXT-DECORATION:none; font-size:13pt; color:#66645b; position:relative; left:69px; top:0px;">$CATEGORY_NAME$</a><strong> <?endif?> </td> </tr> </table> <p align="center" class="infTitle"><strong><a style="TEXT-DECORATION:none; font-size:14pt; color:#fefcfc; position:relative; left:2px; top:21px;" href="$ENTRY_URL$">$TITLE$</a></strong></p> <p align="center" class="infTitle"><strong><a style="TEXT-DECORATION:none; font-size:14pt; color:#66645b; position:relative; left:0px; bottom:38px;" href="$ENTRY_URL$">$TITLE$</a></strong></p> </td> </tr> </table>
На скриншоте рисунок масштабирован, а в оригинале (580х206) смотрится вроде бы в тему, поэтому "плевать" не очень хочется  Кроме того, в инете я не нашел подобных решений (может не повезло), и, если чо-нить выйдет, вставьте свой линк в решение или дайте ссылочку для вставки на сайт (по PR я вас доганяю, за тИЦ пока промолчу - не русскоязычный сайт )
Сообщение отредактировал Lunder - Суббота, 16.07.2011, 17:52 | | |
|
|
2011-07-17Дата: Воскресенье, 17.07.2011, 01:34 | Сообщение # 8 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Lunder, Quote (Lunder) Кроме того, в инете я не нашел подобных решений (может не повезло), и, если чо-нить выйдет, вставьте свой линк в решение или дайте ссылочку
«Тень для текста (кроссбраузерное решение)»
-- Почитайте, неплохая статеечка, присутствуют примеры и ссылки на оригиналы.
...
| | |
|
|
2011-07-17Дата: Воскресенье, 17.07.2011, 08:47 | Сообщение # 9 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, спасибо. Как раз то, шо надо. Сижу, эксперементирую.
Добавлено (17.07.2011, 08:47)
---------------------------------------------
Вот что получилось:
Сообщение отредактировал Lunder - Воскресенье, 17.07.2011, 09:27 | | |
|
|
2011-07-17Дата: Воскресенье, 17.07.2011, 19:38 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Lunder, Quote (Lunder) Вот что получилось:
Это под чем скрин?
Чёт не очень заметно тиснение...
| | |
|
|
2011-07-18Дата: Понедельник, 18.07.2011, 00:09 | Сообщение # 11 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) Чёт не очень заметно тиснение...
Поигрался с настройками скрипта, немного вдавил (хотя можно и "выдавить" - сделать выпукло)
но вот одно "но": скрипт вроде бы преподносится, как лекарство для ИЕ, но во всех браузерах он работает нормально, а как раз в ИЕ рисует что попало (вот ссылка - http://frontzmin.sumy.ua/)
Правда, не разобрался пока с подгрузкой библиотеки Dimensions, может она подкорректирует...
Скрипт вкинул сразу после <body>
Code <!--Тень-->
<script type="text/javascript" src="/jquery.dropshadow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".shadowsIE").dropShadow({color:"#fff",left:1,top:2, swap:true, blur:0})
});
</script>
<!--/Тень-->
, подлючил через class:
Code <p align="center" style="margin-top:25px" class="infTitle"><strong><a class="shadowsIE good" style="font-size:14pt;" href="$ENTRY_URL$">$TITLE$</a></strong></p>
стиль ссылок прописал в CSS (правда, :hover тоже работает не корректно)
Code a.good:link {text-decoration:none; color:#363636;}
a.good:active {text-decoration:none; color:#363636;}
a.good:visited {text-decoration:none; color:#363636;}
a.good:hover {text-decoration:none; color:#000000;}
Сообщение отредактировал Lunder - Понедельник, 18.07.2011, 00:21 | | |
|
|
2011-07-18Дата: Понедельник, 18.07.2011, 01:20 | Сообщение # 12 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Lunder, Quote (Lunder) но вот одно "но": скрипт вроде бы преподносится, как лекарство для ИЕ, но во всех браузерах он работает нормально, а как раз в ИЕ рисует что попало
Странно, как раз в ИЕ - отрисовал нормально ) Смотрел под IE v7
...
Quote (Lunder) стиль ссылок прописал в CSS (правда, :hover тоже работает не корректно)
В смысле чёрный цвет? ... Не факт что вообще работать будет ... Там же идёт наслоение абсолютно-позиционированных блоков ...
...
Quote (Lunder) Скрипт вкинул сразу после <body>
... Я бы, подключал скрипт только для ИЕ - так как остальные браузеры отлично понимают CSS3 свойство text-shadow.
...
Типа вот так:
-- Стили для норм. браузеров:
Quote (CSS) <style type="text/css">
a.shadowsIE{color:#5a5a5a;text-shadow:1px 1px 1px #FFF;}
a.good:link{text-decoration:none;color:#5a5a5a;}
a.good:active{text-decoration:none;color:#5a5a5a;}
a.good:visited{text-decoration:none;color:#5a5a5a;}
a.good:hover{text-decoration:none;color:#000;}
*+html a.shadowsIE{color:#000;z-index:99;} /* Цвет для ИЕ v7 */
</style>
-- Скрипт для ИЕ < 9;
Quote (JS) <!--[if lt IE 9]>
<script type="text/javascript" src="/jquery.dropshadow.js"></script>
<script type="text/javascript">
$(function(){$(".shadowsIE").dropShadow({color:"#FFFFFF",left:2,top:2,swap:false,blur:0});});
</script>
<![endif]-->
...
...
... И поиграться с настройками цвета ....
| | |
|
|
2011-07-18Дата: Понедельник, 18.07.2011, 08:07 | Сообщение # 13 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) Странно, как раз в ИЕ - отрисовал нормально ) Смотрел под IE v7
 Включил "Режим совместимости", - все стало на свои места (у меня ИЕ9)... Режим ранее отключил специально, после того, как прописал !DOCTYPE, потому как, конфликтов вроде бы не возникало.
За подсказку по CSS спасибо, вечерком проработаю, все-таки при первой загрузке скрипт заметно подтормаживает.
Сообщение отредактировал Lunder - Понедельник, 18.07.2011, 08:07 | | |
|
|
2011-07-18Дата: Понедельник, 18.07.2011, 13:56 | Сообщение # 14 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Lunder, Quote (Lunder) Включил "Режим совместимости", - все стало на свои места
Режим совместимости можно прописать по умолчанию ... Типа:
Code <meta http-equiv="X-UA-Compatible" content="IE=8" />
Возможные варианты для ИЕ8+
...
P.S. Тег должен находиться в секции head страницы перед всеми остальными элементами, за исключением title и других мета-элементов. В противном случае он игнорируется!
| | |
|
