Skip to content

snippets

Простой скриптик для создания кнопки IMDB рейтинга на странице

Скрипт дает возможность создавать вот такую кнопку    одним тегом.

Скрипт можно подключать в любом месте страницы.

Пример кода вставки кнопки: <a id="thirdparty-imdb-rating-tt0245429" class="thirdparty-imdb-rating">  </a>

Дополнительный источник: https://gist.github.com/bogdan-nazar/86b241e4786b8d90cf40

/**
* Simple snippet to embed IMDB rating button to your web-page
* Author: Bogdan Nazar <me@bogdan-nazar.ru>
*
* USAGE: <div class="thirdparty-imdb-rating" id="thirdparty-imdb-rating-ttXXXXXXX"></div>
*        where "ttXXXXXXX" is the uniq IMDB title identifier
*
* IMPORTANT: Before using this snippet you must replace
*   var user = "urXXXXXXXX"
* with your real IMDB user id.
*  
*/
(function(){
  var user = "urXXXXXXXX";
  var $ = {d: document, h: document.getElementsByTagName("HEAD")[0], w: window},
    css = [...

Continue reading

События «mouseover» и «mouseout» для многослойных html-конструкций

Наверное многие программеры сталкивались с такой фигней, когда надо повесить, например, анимацию на кнопку, которая состоит из нескольких слоев (включая текстовый заголовок). Если слои вложены друг в друга по простому, без всяких position:relative и position:absolute, то делается это довольно-таки просто. Но как быть, если кнопка имеет неопределенную форму, и дочерние слои, например, вылазят за границы кнопки?

Самый простой метод, без выноса мозга, это перекрыть все слои одним верхним, прозрачным, и на него повесть все события. И в большинстве вариантов верстки таких кнопок это проходит на ура.. Но, все-таки, бывают случаи, когда «эстетическая» красота интерфейса очень важна. Например, ссылка под кнопкой должна откликаться отдельно (как ссылка), но в то же время подсвечивать всю кнопку.

Превью скрипта и полный исходник примера под катом.

Continue reading