Сен 06

Сортировка записей в таблицах без перезагрузки страницы

Часто в промышленных web-задачах требуется организовать сортировку таблиц по любому из имеющихся полей. Для того чтобы не изобретать велосипед, категорически рекомендую использовать уже готовое решение - tablesorter. Удобный и практичный jQuery plugin, с документацией на русском языке и двойной лицензией - MIT и GPL.

Сен 03

Переход по гиперссылке при клике на флеш-баннер. Улучшенное решение!

Я уже касался этой темы в посте http://blog.codething.ru/posts/69, но решение через jQuery.SWFObject Plugin оказалось не универсальным и, в частности, совсем не работает в браузере Google Chrome. В остальных браузерах тоже работает не очень хорошо, так, например, при наведении на баннер курсор мыши не становится активным, как при наведении на гиперссылку.

Что же делать?

После долгих поисков и изучения данной проблемы задача была решена! Правда для удобства, решение все же использует библиотеку jQuery.

<div id='b1' style='overflow: hidden; width: 200px; height: 200px;'>
	<object type="application/x-shockwave-flash" data="filename.swf" width="200" height="200">
		<param name="wmode" value="opaque">
		<param name="movie" value="filename.swf" />
	</object>
	<div id="b2" style="z-index: 100; position: absolute;" width="200" height="200">
		<a href="http://blog.codething.ru/"><img src="x.gif" width="200" height="200"/></a>
	</div>
</div>
<script>
	$(document).ready(function(){
		p = $('#b1').position();
		$('#b2').css("left", p.left+'px');
		$('#b2').css("top", p.top+'px');
	});
</script>

Теперь баннер отображается корректно, курсор активируется как положено.

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

В приведенном коде размещается баннер filename.swf размером 200x200 px. Прозрачная картинка x.gif - однопиксельный gif-файл с прозрачностью.