Бегущая строка в длинных названиях

[alinalessioYandex]

В демо шаблоне увидел, что длинное название подкатегорий сокращается, добавляются троеточие, а при наведении на ссылку название бегущей строкой показывается целиком.

Посмотрите как здесь.

http://demo.xds.by/default2/index.php?route=product/category&path=20

 

css удалось это сделать, но какой скрипт высчитывает ширину текста, чтобы добавить mergin-left при ховере?

Как это реализовать помогите пожалуйста.

[localhost]

Посмотри код страницы.. увидешь скрипт = scrollname.js он то и отвечает за это)))...

 

код скрипта на всякий случай

function run_scroll() {
	var $link = $(this),
	    target = $link.width() - $link.parent().width();
	if (target > 0) {
		$link.stop().animate({
				'margin-left': -target
			},
			20 * target, 'linear'
		);
	}
}

function reset_scroll() {
	var $link = $(this);
	$link.stop().animate({
			'margin-left': 0
		},
		250
	);
}

function name_scroll() {

	$('.name a').hover(run_scroll,reset_scroll);
	$('.category-list ul li a').hover(run_scroll,reset_scroll);
	
}

[alinalessioYandex]

Я пробовал использовать этот скрипт, но почему-то маргин не применяется. Вот мой пример с этим скриптом. http://jsfiddle.net/uyj4jjgn/5/

[localhost]

Я пробовал использовать этот скрипт, но почему-то маргин не применяется. Вот мой пример с этим скриптом. http://jsfiddle.net/uyj4jjgn/5/

 

Молодец что пробывал)))..

 

Поставь это в конец BODY... и будет тебе счастье)))...

<script type="text/javascript">
$(document).ready(name_scroll);
</script>

[localhost]

Полный КОД...

<script type="text/javascript" src="jquery.min.js"></script>

<style type="text/css">

.block {
	overflow: auto;
}
.block {
	background: #fff;
	display: block;
	width: 181px;
}
.block span{
	display:block;
	width: 90%;
	height:30px;
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 5%;
	overflow: hidden;
}
.block span:hover{
	text-overflow: clip;
}
.block a:hover{
	text-decoration: underline;
}
</style>

<script type="text/javascript">

function run_scroll() {
	var $link = $(this),
	    target = $link.width() - $link.parent().width();
	if (target > 0) {
		$link.stop().animate({
				'margin-left': -target
			},
			20 * target, 'linear'
		);
	}
}

function reset_scroll() {
	var $link = $(this);
	$link.stop().animate({
			'margin-left': 0
		},
		250
	);
}

function name_scroll() {
	$('.block a').hover(run_scroll,reset_scroll);	
}
</script>



<div class="block">
<span><a href="111">Винтажные компьютеры Винтажные компьютеры</a></span>
</div>


<script type="text/javascript">
$(document).ready(name_scroll);
</script>

[alinalessioYandex]

Спасибо, добрый человек! Побольше бы таких! )))

[alinalessioYandex]

Еще одну проблему помогите решить пожалуйста.
Когда обновляешь страницу, находясь на grid, то бегущая строка работает, но стоит перейти в list и снова вернуться в grid, то эффект бегущей строки перестает срабатывать.
Как можно решить эту проблему?

 

Вот ссылка на страницу: http://ooomsk72.ru/index.php?route=product/category&path=59