Tag: JavaScript

IE7-8, jQuery и XFBML

Development31 may 2012

Столкнулся с тем, что jQuery не умеет создавать DOM-элементы с составными именами, вроде <fb:like> в старых версиях IE. Решение - document.createElement( ‘<fb:like>’ ). Пусть вас не смущает, что elem.tagName === ‘like’, на самом деле он нормальный.

Мне все эти шаманства понадобились для динамического встраивания соц. кнопок “мне нравится” и таких же лент комментариев. Посему поделюсь некоторым опытом. Для того. чтобы в нужный момент заставить браузер подготовить плагин к использованию, нужно заранее загрузить все необходимые скрипты а после выполнить:

Для mail.ru и одноклассников - mailru.loader.require( ‘api’, function(){ mailru.plugin.init(); } );
Для vKontakte - VK.Widgets.НужныйВиджет( id_dom_элемента, { настройки плагина } )
Для Twitter - twttr.widgets.load();
Для Google+ - gapi.plusone.render( id_dom_элемента );
Для Facebook - FB.XFBML.parse();

При этом для facebook-а и g+ обязательно нужно задать все <meta property=“og:*” content=“…” /> теги и дополнительные аттрибуты к тегу <html>:

xmlns:fb="www.facebook.com/2008/fbml“
xmlns:og=”ogp.me/ns#“
itemscope=“itemscope"
itemtype=”schema.org/Product”

вКонтакте - кнопка «мне нравится» и pageImage

Development30 may 2012

Подключил на сайте заказчика кнопку “мне нравится” от вконтакте, однако в ней не заработала опция pageImage, в виду чего ссылка шарилась просто как “сопроводительный текст + ссылка”, что непособствует появлению дополнительных лайков(уже из самой соц.сети). Гугл подсказал мне, что я такой не один, и что никто не знает как сию проблему решить. Написал в support — ответили ~ через сутки. Сказали сменить расширение изображения с jpeg на jpg . Сразу не помогло. Оказалось - кеш. Сменил page_id - заработало.

UPD 1. Ответили из vk, пишут:

К сожалению, пока обновление кэша не предусмотрено. Возможно, в скором будущем ситуация будет исправлена.

Значит у разработчиков нет права на ошибку (к тому же, если я не ошибаюсь, незадокументированную)? о_О

Пишем простое Opera-расширение

Development14 apr 2012

Эта статья посвящена написанию простого расширения для браузера Opera. Наше расширение будет примитивным, т.к. весь его функционал будет заключаться в user-JS для habrahabr.ru. Лента комментариев оснащена блоком, который отображает количество новых комментариев в топику и кнопку, позволяющую эту ленту обновить. Давайте добавим туда стрелки для навигации по новым комментариям.

C чего начнём?

Создадим новую директорию для файлов расширения
В ней создадим файл config.xml

onKeyDown для DIV

Development22 oct 2011

Эта маленькая заметка посвящена небольшому трюку, который позволяет добиться работоспособности события onkeydown для тега <div>. Дело в том, что код вроде:

$('#test').keydown( function(e){ console.log( e.keyCode ); } );

Не сработает для HTML аля <div id=“test”>test</div>, а всё потому, что <div> не может получить focus. Простое добавление аттрибута tabindex=“0” проблему решает.

Внедрение CSS на лету

Development19 oct 2011

Столкнулся с задачей — внедрить “на лету”, при помощи javascript, CSS-код на страницу. Простое решение “в лоб” не заработало в IE:

$('head').append( $( '<style>', { type: 'text/css' } ).html( 'css код' ) );

Оказалось, что IE ищет в теге <style/> свойство styleSheet.cssText, откуда и берёт код. Решение:

var style = $('<style>', { type: 'text/css' } ).get(0);
if( style.styleSheet ) // IE
{
    style.styleSheet.cssText = css_code;
}
else
{
    $( style ).html( css_code );
}
$('head').append( style );