Перейти к содержанию
alinalessioYandex

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

Рекомендуемые сообщения

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

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Посмотри код страницы.. увидешь скрипт = 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);
	
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.