LINUX.ORG.RU

Атрибуты объекта javascript

 


0

1

Доброго времени суток. Имеются: чудо-программист, не знающий яваскриптов, яваскрипт и дедлайн. Если подробнее - есть слайдер контента, у него внизу буллеты — точки-ссылки на слайд. Проблема в том, что точка активного слайда отображается также, как неактивного. HTML:

<div id="wrapper">
			<div id="slider">
				<div class="inslider">
				<!-- Контейнер контента  -->
					<div class="contentholder">
						<div class="contentslider">

							<div class="content">
								<img src="/img/slide1.JPG">
							</div>

							<div class="content">
								<img src="/img/slide2.JPG">
							</div>

							<div class="content">
								<img src="/img/slide3.JPG">
							</div>
		        
						</div>
				</div>
css:
#wrapper {
	width:630px;
	height:290px;
	overflow:visible;
	margin-left:20px;
	padding-bottom:30px;
}

#slider {
	position:relative;
	overflow:hidden;

}
.content {
	width:630px;
	height:290px;
	float: left;
	position: relative;
	background-color:#FFF;
}
.inslider a {
	text-decoration:none;
}
.contentholder {
	height:290px;
	width: 630px;
	overflow: hidden;
	position: relative;
	background-color:#FFF;
}
.contentslider {
	position: absolute;
	top: 0; left: 0;
}
.imgslider img {
	float: left;
}
.contentnav {
	margin-top:10px;
	height:18px;
	z-index: 100;
	text-align: center;

}
.contentnav a{
	height:11px;
	width:11px;
	padding: 0px;
	margin:5px;
	text-decoration: none;
	background-image:url(/img/bul.png) repeat:norepeat;
}
.contentnav a.active {
	height:11px;
	width:11px;
	font-weight: bold;
	background-image:url(/img/bul_a.png) repeat:norepeat;
}

скрипт:
$(document).ready(function() {
//Активизируем первую ссылку
$(".contentnav a:first").addClass("active");
//Ширина площади одной страницы
var contentwidth = $(".contentholder").width();
//Обще количество страниц
var totalcontent = $(".content").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider").css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var slideid = $active.attr("rel") - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(".contentnav a").removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(".contentslider").animate({
        left: -slidedistance
    }, 500 );
}; 
 
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 5000);
};
//Запускаем функцию вращения
rotation();
$(".contentnav a").click(function() {
$active = $(this);

clearInterval(play);
rotate();
rotation();
return false;
});
});
Куда копать?

Перемещено mono из job


Ответ на: комментарий от staseg

В Development

тады уж в Web-development
А в жоб я его послал, потому что 'чудо программист'(они должны страдать) и 'дедлайн'(пахнет деньгами) и ещё исходников какой-то жалкий кусок.

Bad_ptr ★★★★★
()

я сделал следующим образом: HTML

<!-- Навигация  -->
					<div class="contentnav">
						<a rel="1" href="#"><div style="width:11px; height:11px; float:left">&nbsp;</div></a>
						<a rel="2" href="#"><div style="width:11px; height:11px; float:left">&nbsp;</div></a>
						<a rel="3" href="#"><div style="width:11px; height:11px; float:left">&nbsp;</div></a>
					</div>

В CSS внес изменения:

.contentnav a div{
	height:11px;
	width:11px;
	padding: 0px;
	margin:5px;
	line-height:11px;
	text-decoration: none;
	background-image:url(bul.JPG);
	background-color:#000;
}
.contentnav a.active div{
	height:11px;
	width:11px;
	padding: 0px;
	line-height:11px;
	margin:5px;
	font-weight: bold;
	background-image:url(bul_a.JPG);
	background-color:red;
}

Всё бы хорошо, но цвет фона работает, а картинка фона - нет.

sudo-s
() автор топика

Это проблема подсветки активной странице. Решений куча. Начни, например, с css current page highlight. Потом с js current page highlight. Я остановился на js-варианте.

true_admin ★★★★★
()
Ответ на: комментарий от sudo-s

Наверное как-то так... Короче выставляй стили в функции click

$(".contentnav a").click(function() {
$(".contentnav a").each( function(id, el) {
    el.setAttribute('style', 	'height:11px;
	width:11px;
	padding: 0px;
	margin:5px;
	line-height:11px;
	text-decoration: none;
	background-image:url(bul.JPG);
	background-color:#000;')
})

$active = $(this);

active.setAttribute('style', 	'height:11px;
	width:11px;
	padding: 0px;
	margin:5px;
	line-height:11px;
	text-decoration: none;
	background-image:url(bul.JPG);
	background-color:#000;')

clearInterval(play);
rotate();
rotation();
return false;
});

Bad_ptr ★★★★★
()
Ответ на: комментарий от Bad_ptr

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

sudo-s
() автор топика
Ответ на: комментарий от sudo-s

Молодец, что сам разобрался. Пара советов вдогонку: не надо вкладывать блочные элементы в инлайновые, к тому же, в твоём примере <div> внутри <a> не несёт никакого смысла, он лишний; инлайновые стили в 95 % случаев — зло; стилизация элементов по имени — зло.

Apple-ch ★★
()
Ответ на: комментарий от Apple-ch

в противном случае текст ссылки имеет высоту в 11 пикселей, а ширину - ариаловского пробела, что не подходит.

sudo-s
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.