Полупрозрачная полоса внизу экрана на jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
xaocZ

Полупрозрачная полоса внизу экрана на jQuery

xaocZ 21 июл 2012, 14:29 Сообщение

Фиксированная чёрная полоса внизу экрана, при прокрутке становится полупрозрачной. При наведении мышки на полосу - становится активной.

Между тегами <head> ставим:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('.ac_footer').stop().animate({'opacity':'0.2'},400); else $('.ac_footer').stop().animate({'opacity':'1'},400); }); $('.ac_footer').hover( function (e) { var scrollTop = $(window).scrollTop(); if(scrollTop != 0){ $('.ac_footer').stop().animate({'opacity':'1'},400); } }, function (e) { var scrollTop = $(window).scrollTop(); if(scrollTop != 0){ $('.ac_footer').stop().animate({'opacity':'1'},400); } } ); }); </script>


Перед закрывающим тегом </body> ставим:

Код: Выделить всё

<div class="ac_footer"> <a href="#" class="ac_left"><span>Левая</span> ссылка</a> <a href="#">Правая ссылка</a> </div>


Вместо ссылки можно поставить просто надпись или стрелку вверх. Можно соорудить навигационное меню. Всё на ваше усмотрение и фантазию.

В тему стиля:

Код: Выделить всё

.ac_footer { background: none repeat scroll 0 0 #000000; bottom: 0; font-size: 13px; height: 20px; left: 0; opacity: 0.9; padding-bottom: 5px; position: fixed; width: 100%; z-index: 999; } .ac_footer a { font-family: 'PT Sans Narrow',Arial,sans-serif; color: #DDDDDD; float: right; letter-spacing: 0.3px; padding: 5px 10px; text-shadow: 1px 1px 1px #000000; font-size: 11px; text-transform: none; } .ac_footer a:hover { color: #FFFFFF; } .ac_footer a span { font-weight: bold; } .ac_footer a.ac_left { float: left; }


background: none repeat scroll 0 0 #000000; - цвет полосы.
color: #FFFFFF; - цвет текста.

Never opened myself this way
Life is ours, we live it our way
All these words I don't just say
And nothing else matters


Metallica - Nothing Else Matters

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 02 окт 2012, 10:50 Сообщение

xaocZ писал(а):Вместо ссылки можно поставить просто надпись или стрелку вверх. Можно соорудить навигационное меню. Всё на ваше усмотрение и фантазию.

А можно как то туда вставить script ?

Аватара пользователя
CabinetAdmin

Re: Полупрозрачная полоса внизу экрана на jQuery

CabinetAdmin 02 окт 2012, 14:07 Сообщение

romaamor
Смотря какой.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 02 окт 2012, 15:06 Сообщение

CabinetAdmin писал(а):Смотря какой.

Хочу вставить скрипт Переводчика от гугла.

Код: Выделить всё

<div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'ru', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

И мета-тег:

Код: Выделить всё

<meta name="google translate-настройки" content="99ac4de820a34d4e-e9999dc4ee289023-g4814ecb503448261-a"></meta>

Он сейчас стоит,работает отлично.Но у меня возникла идея :А если его перенести в полупрозрачнаю полосу в низ экрана ?.Можно такое сотворить.? :)

Аватара пользователя
CabinetAdmin

Re: Полупрозрачная полоса внизу экрана на jQuery

CabinetAdmin 02 окт 2012, 15:13 Сообщение

Мета-тег должен быть между <head> ... </head>, после тега TITLE.

А переводчик, можно, почему нет?...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 02 окт 2012, 15:24 Сообщение

CabinetAdmin писал(а):Мета-тег должен быть между <head> ... </head>, после тега TITLE.

Ну это я установил правильно.А вот с Скриптом не получилось.Должно быть что то типа так ?

Код: Выделить всё

<div class="ac_footer"> <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'ru', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </div>

Или я профан полнейший ? :D

Аватара пользователя
CabinetAdmin

Re: Полупрозрачная полоса внизу экрана на jQuery

CabinetAdmin 02 окт 2012, 15:47 Сообщение

Я бы сделал так. Это:

Код: Выделить всё

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'ru', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element'); } </script>


Я бы поставил перед </head>. Хотя тут надо знать, как оно правильно ставится, по инструкции. А вот:

Код: Выделить всё

<div id="google_translate_element"></div>

Я бы установил в блок:

Код: Выделить всё

<div class="ac_footer" "> <div id="google_translate_element"></div> <a href="/">Спутниковый рай.Форум любителей спутникового телевидения.</a> </div>


Плюс в css (#google_translate_element), если он есть, добавил бы float: left;.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 02 окт 2012, 16:01 Сообщение

CabinetAdmin писал(а):Хотя тут надо знать, как оно правильно ставится, по инструкции.

Да ,Вы правы.По инструкции перед
CabinetAdmin писал(а): перед </head>
.
CabinetAdmin писал(а):Плюс в css (#google_translate_element), если он есть, добавил бы float: left;.

Нету.
Спасибо.Заработало. :drink: :ihaaaa:

Аватара пользователя
CabinetAdmin

Re: Полупрозрачная полоса внизу экрана на jQuery

CabinetAdmin 02 окт 2012, 19:14 Сообщение

Под цвет стиля сделал, симпатично получилось:)

Можно ещё вот такую штуку добавить к .ac_footer {:

Код: Выделить всё

  -webkit-box-shadow: 0 -3px 10px #333; -moz-box-shadow: 0 -3px 10px #333; box-shadow: 0 -3px 10px #333;


Что придаст полосе небольшую тень. Тоже должно выглядеть ничего.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 02 окт 2012, 20:57 Сообщение

CabinetAdmin писал(а): -webkit-box-shadow: 0 -3px 10px #333;
      -moz-box-shadow: 0 -3px 10px #333;
      box-shadow: 0 -3px 10px #333;
CabinetAdmin писал(а):Можно ещё вот такую штуку добавить к

Да.Симпотишно получилось. :drink:

deshenez

Re: Полупрозрачная полоса внизу экрана на jQuery

deshenez 06 окт 2012, 10:49 Сообщение

Странное что-то такое...
-------------
[спам какой-то]

Аватара пользователя
CabinetAdmin

Re: Полупрозрачная полоса внизу экрана на jQuery

CabinetAdmin 06 окт 2012, 10:55 Сообщение

Что странного?
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 07 апр 2013, 19:48 Сообщение

xaocZ писал(а):Вместо ссылки можно поставить просто надпись или стрелку вверх. Можно соорудить навигационное меню. Всё на ваше усмотрение и фантазию.

А можно бегущую строку с сылками - последние темы ? И если да то как. Одну бегущую строку вставил без проблем, а вот как туда вставить список последних тем - не шарю. :(

Аватара пользователя
CabinetAdmin

Re: Полупрозрачная полоса внизу экрана на jQuery

CabinetAdmin 07 апр 2013, 20:14 Сообщение

Можно. Поставь:

Код: Выделить всё

<!-- BEGIN recenttopicrow --> <a href="{recenttopicrow.U_VIEW_TOPIC}" title="{recenttopicrow.TOPIC_TITLE}">{recenttopicrow.TOPIC_TITLE}</a> &#8226; <!-- END recenttopicrow -->


Это вырезка из модификации вывода последних тем (NV Recent topics for phpBB3). Не проверял, но работать должно.

Можно установить Recent topics for phpBB3 (Темы на стр. сайта) и использовать скрипт для вывода тем на все страницы форума.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Полупрозрачная полоса внизу экрана на jQuery

romaamor 07 апр 2013, 20:57 Сообщение

Установил так -

Код: Выделить всё

<div class="ac_footer"> <marquee behavior="alternate" direction="left" bgcolor="#ffcc00"> <!-- BEGIN recenttopicrow --> <a href="{recenttopicrow.U_VIEW_TOPIC}" title="{recenttopicrow.TOPIC_TITLE}">{recenttopicrow.TOPIC_TITLE}</a> &#8226; <!-- END recenttopicrow --> </marquee> </div>

На сайте http://shishatskaya.luckbb.ru/ работает, а на http://satray.ru/ нет. У вас видать версия мода другая. :(
Последний раз редактировалось romaamor 08 апр 2013, 05:46, всего редактировалось 1 раз.



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость