О нас Форум Баннеры RSS картинка Нас уже 577, Присоединяйся

Новый вид всплывающей подсказки Title для uCoz

Добавил: Fatal1ti| 16.09.2012, 12:33 | Комментариев: (8) | Заглянули 265 | Загрузок: 26
Категория: uCoz » Скрипты, Разное
Пожаловаться

Помните стандартную подсказку Title?
Которая всплывает когда вы наводите стрелку мышки на ссылку,
конечно помните, такое нельзя пройти мимо, так вот существует не одно готовое решение,
благодаря которому можно изменить внешний вид данной подсказки...


Особенности:
- Небольшой вес, всего 8 килобайт
- Перемещается вслед за мышкой (Для некоторых это минус или а для других - наоборот плюс)
- Работает почти во всех новых браузерах
- Простая установка

Вроде все, теперь Установка:

1) Устанавливаем в "Верхнюю часть сайта" в самый верх следующий скрипт:
Code
<script type="text/javascript" src="http:/serv/js/unitip.js"></script>


Если у вас нету "Верхней части сайта", то ставим скрипт после тега
На страницы где хотите видеть подсказку (например "Архив новостей")

2) Теперь чтобы наш title отображался у нужного нам элемента,
Например нужной ссылки, следует прописать ей class="tip"
Вот пример:
Code
<a class="tip" href="http://noviok.ru" title="Тут титле">Название ссылки</a>


3) Оставлось прописать css стили для title - заходим в Таблицу стилей(CSS) и вставляем:
Code
/* unitip css */  
#unitip {  
  position: absolute;  
  z-index: 1000;  
  top: -1000px;  
  color: #fff;  
  font:11px Verdana,Arial,Helvetica, sans-serif; color:#CED9E8;  
  display: none;  
}
#unitippoint, #unitipmid, #unitipcap {  
  position: relative;  
  top: 0px;  
  left: 0px;  
  width: 145px;  
  display: block;  
}  
#unitippoint {  
  background: url('http:/serv/img/title/TipPoint.png') no-repeat;  
  height: 19px;  
  overflow: hidden;  
}  
#unitipmid {  
  background: url('http:/serv/img/title/TipMid.png') repeat;  
  width: 115px;  
  height: auto;  
  padding: 5px 15px;  
}  
#unitipcap {  
  background: url('http:/serv/img/title/TipCap.png') no-repeat;  
  height: 7px;  
  overflow: hidden;  
}


Всё наша подсказка теперь будет отображаться как и положено..

Вы также можете загрузить картинки и сам скрипт на свой сайт
Для этого скачайте архив и залейте на сайт и поменяйте ссылки на изображения и скрипт


Спонсор :
Скачать(сервер)
Демо
+ Спасибо



Источник: http://www.center-dm.ru
Всего голосов: ... | ... | ...

Похожие материалы
Всего комментариев: 8
Hаписал: shelest , 26.09.2012 Среда 08:10 Сообщение #1
shelest
OFFLINE
+ 0 -

TipTip хорошая подсказка, там не надо классы дополнительно расставлять, особенно это актуально для тех сайтов, где уже всё давным давно расставлено в форме альтов и титле. Одна беда - в ИЕ почти не работает, т.е. работает некорректно. Может займёшься доведением до ума?

Установка:

После

Code
<link rel="stylesheet" type="text/css" href="/css/tipTip.css">   
   <script src="/js/jquery.tipTip.js"></script>   
   <script>   
   $(function(){   
   $("a[title]").tipTip({maxWidth: "400px", edgeOffset: 10});   
   $("img[title]").tipTip({maxWidth: "400px", edgeOffset: 10});   
   $("span[title]").tipTip({maxWidth: "400px", edgeOffset: 10});   
   $("div[title]").tipTip({maxWidth: "400px", edgeOffset: 10});
   $("*[alt]").tipTip({maxWidth: "400px", edgeOffset: 10});   
   });   
   </script>


Два файла в архиве - скрипт и css: http://narod.ru/disk....ar.html

Я вот думаю, если его с ИЕ подружить не удасться, может тогда условие написать, чтобы ИЕ скрипт игнорировал. В других браузерах нормально показывается. Жаль терять, очень неплохой скрипт.

Hаписал: Fatal1ti , 26.09.2012 Среда 11:34 Сообщение #3
Fatal1ti
Администратор
OFFLINE
+ 0 -

Проверил я его в IE8 - там почти все хорошо,
Только углы не скруглены..

Ну а в более ранних версиях там окно в одном месте, а сама надпись title в другом.
Ну от IE 6 или 7 нечего лучше не ожидать,
мне вообще всё равно на Internet Explorer -
ни один нормальный человек не станет им пользоваться..

И поэтому я сделал для этих людей гуманное решение,
Вставив этот код:
Code
<!--[if lte IE 7]>
  <script type="text/javascript">location.href = 'http:/ie/IE.html'</script>  
  <meta http-equiv="refresh" content="0; url=http:/ie/IE.html" />
  <![endif]-->


Если кто-нибудь зашёл через IE ниже 7, включая её
То его перебрасывает сюда: /ie/IE.html

Hаписал: shelest , 26.09.2012 Среда 08:13 Сообщение #2
shelest
OFFLINE
+ 1 -

Quote (shelest)
Установка:

После


Имелось в виду - после </head>.

Hаписал: shelest , 26.09.2012 Среда 15:24 Сообщение #4
shelest
OFFLINE
+ 0 -

Quote (Fatal1ti)
Проверил я его в IE8 - там почти все хорошо,
Только углы не скруглены..

С моим корявым восьмым ИЕ опять проблемы. Не схватывает фон подсказки.

Возможно какое-то решение, чтобы пользователи с ИЕ получали стандартную подсказку, а у тех, у кого другие браузеры - TipTip?

Hаписал: Fatal1ti , 26.09.2012 Среда 15:56 Сообщение #5
Fatal1ti
Администратор
OFFLINE
+ 0 -

Code
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="/css/tipTip.css">
<script src="/js/jquery.tipTip.js"></script>
<script>
$(function(){
$("a[title]").tipTip({maxWidth: "400px", edgeOffset: 10});
$("img[title]").tipTip({maxWidth: "400px", edgeOffset: 10});
$("span[title]").tipTip({maxWidth: "400px", edgeOffset: 10});
$("div[title]").tipTip({maxWidth: "400px", edgeOffset: 10});
$("*[alt]").tipTip({maxWidth: "400px", edgeOffset: 10});
});
</script>
<![endif]-->

Если так вставить то должно отображаться во всех браузерах,
кроме IE ниже 8..

Hаписал: shelest , 26.09.2012 Среда 17:17 Сообщение #6
shelest
OFFLINE
+ 0 -

Quote (Fatal1ti)
Если так вставить то должно отображаться во всех браузерах,
кроме IE ниже 8..

Не, не работает.

Кроме того, мне бы лучше вообще ИЕ исключить.

Hаписал: shelest , 27.09.2012 Четверг 08:16 Сообщение #7
shelest
OFFLINE
+ 0 -

Quote (shelest)
Не, не работает.

Кроме того, мне бы лучше вообще ИЕ исключить.

Нашёл в сети. Может кому пригодится. Нейтрализуем подключение скрипта для ИЕ, оставляем для всех остальных браузеров.
Code
<![if !IE]>
<link rel="stylesheet" type="text/css" href="/css/tipTip.css">  
  <script src="/js/jquery.tipTip.js"></script>  
  <script>  
  $(function(){  
  $("a[title]").tipTip({maxWidth: "400px", edgeOffset: 10});  
  $("img[title]").tipTip({maxWidth: "400px", edgeOffset: 10});  
  $("span[title]").tipTip({maxWidth: "400px", edgeOffset: 10});  
  $("div[title]").tipTip({maxWidth: "400px", edgeOffset: 10});  
  $("*[alt]").tipTip({maxWidth: "400px", edgeOffset: 10});  
  });  
  </script>
<![endif]>
Hаписал: shelest , 29.09.2012 Суббота 11:00 Сообщение #8
shelest
OFFLINE
+ 1 -

Quote
У нас нашли: tiptip не схватывает альт

Гг... Не нашли. Он действительно не схватывает альт, т.е. если внутри кода изображения нет атрибута title, а есть только альт - подсказка остаётся пустой.

Есть у меня куча картинок, у которых в коде только title. Хотел их махом переделать в альты (чтобы не прописывать туда эти альты дополнительно) и свалить всё это дело на типтип. Думал, ИЕ так и так покажет альт, а остальные браузеры описание будут выводить через TipTip. Облом.

Вот эта допись в коде:

$("*[alt]").tipTip({maxWidth: "400px", edgeOffset: 10});

не помогает. Нужно непосредственно как-то менять сам скрипт в файле jquery.tipTip.js А как его для этих целей менять - х.з.

Информация


Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.
Пожалуйста войдите на сайт как пользователь или зарегистрируйтесь.

Логотип сайта:
Навигация
Мини-чат
Витрина Активистов
Загрузка...
Топ Пользователей
Fatal1ti
1
bR[a]tko
2
matrix
3
Mihail
4
Kulac
5
vk996
6
Опрос
О чём не хватает материалов?

Результаты · Архив опросов
Всего ответов: 164
Последние комментарии
  • Fatal1ti
    Оставлен 05.02.2013
    50+ качественных анимированных иконок загрузки для сайта
    Автор комментария: Fatal1ti
    Оставлен 05.02.2013 в 16:19
    Тема: 50+ качественных анимированных иконок загрузки для сайта
    Это просто gif картинки,
    А чтобы при загрузке страницы крутилась анимация, нужен скрипт
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:43
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    С цветами разобрался, пришлось путь к файлу zvetaf.xml полностью писать.
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:32
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Что-то окно с цветами начинает открываться и сразу же пропадает.
    А как можно чат растянуть по высоте с 300рх до 500рх, где это меняется?
  • Mihail
    Оставлен 01.02.2013
    Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    Автор комментария: Mihail
    Оставлен 01.02.2013 в 17:12
    Тема: Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    А вот это супер )
  • Fatal1ti
    Оставлен 31.01.2013
    Форма добавления комментариев как на dle для uCoz
    Автор комментария: Fatal1ti
    Оставлен 31.01.2013 в 18:23
    Тема: Форма добавления комментариев как на dle для uCoz
    Должно работать, у некоторых файл zvetaf.xml
    Повреждается при загрузке, попробуй его перезалить

    Если ничего не изменяется, то ищи в коде такую строчку:
    Код
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="openLayerB('sda',0,'/bbcodes/zvetaf.xml','Выбор цвета',190,200,'1','','',0,'justify');return false;">


    И меняй на эту:
    Код
    <script type="text/javascript" src="http:/serv/zvet.js"></script>
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="viewzvet()">

    Должно заработать..
  • Fatal1ti
    Оставлен 27.01.2013
    Зелёное меню как на we-place для uCoz
    Автор комментария: Fatal1ti
    Оставлен 27.01.2013 в 15:05
    Тема: Зелёное меню как на we-place для uCoz
    DevilShadow, извини что сразу не ответил
    Чтобы счетчики были справа нужно в css найти такую строчку:
    Код
    .coole div {position: relative;margin-left: 173px;z-index: 1;}

    И заменить на эту
    Код
    .coole div {position: relative;margin-left: 219px;z-index: 1;}


    А чтобы и фото счетчик был, нужно после этой строчки:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/6"></script>

    Добавить эту:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/7"></script>


    И после скрипта, который находится снизу после меню, добавь ещё скрипт:
    Код
    <script type="text/javascript">  
      function setCatNumEnt(){  
      if(!window.uCatsOut)return;  
      $('div.naviglot a').each(function(){  
      var a=this,ah=a.href,cArr=window.uCatsOut;  
      if(!/\/photo\//.test(ah))return;  
      var t=ah.split('/'),id=t[t.length-1]||t[t.length-2],a=$(a).parent();  
      if(!isNaN(id)){  
      $.each(cArr,function(j){  
      if(cArr[j][0]==id){  
      a.prepend('</span><div class="coole"><div><span class="vnav-subnav2">'+cArr[j][6]+'</span></div></div>');  
      }  
      });  
      };  
      });  
      };setCatNumEnt();
      </script>
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня зашли на сайт
0 пользователя

Новых пользователей:
За месяц: 17
За неделю: 6
Вчера: 0
Сегодня: 0
У нас нашли
Загрузка...
Друзья сайта
Наш Баннер
Всё для новичков
 Всё для новичков
Получить Код
Всё для новичков.
Хостинг от uCoz

Яндекс.Метрика
Счетчик тИЦ и PR
© 2011-2013 Нови4ок
Дизайн сайта Fatal1ti