Вертикальный magic line, скрипт указывает на a:hover, помогите сделать a:active
Доброго времени суток всем, возникла проблема при написании js, исходник был взят из-за бугра и переделан под свои нужды (потратил ~3 часа для вникания в суть), изучаю html css около недели и только вчера начал js поэтому прошу не кидаться камнями :no:
Это код HTML, в нем есть дыры, но они никак не влияют на работу самого скрипта, писал в спешке, да и опыта как такового нет.
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Buy Tickets</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">The Show</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Magic Shop</a></li>
</ul>
</div>
Вот сам скрипт и в комментариях я указал как я понимаю суть работы(учу 2 дня буквально, разбирался в скрипте благодаря хорошему логическому мышлению, ну и немного метода тыка, поэтому что то я мог не правильно откомментить :)) А теперь сама суть вопроса: 1. Почему на локальном компьютере все отображается корректно, линия появляется и следует за a:hover, так же возвращается в исходное положение, а на бесплатном хостинге нет. 2. В этом же js я добавил свойство которого не было в исходнике, а именно чтобы magic line оставался в a:active, но он не работает, подскажите пожалуйста, либо просто направление дайте.
$(function() {
var $el, topPos, newHeight; //Записали переменные
$("#example-one").append("<li id='magic-line'></li>"); //Добавили элемент списка <li> в <ul>, по id#example-one
var $magicLine = $("#magic-line"); //Записали его/Дали ему атрибуты "<li>"
$magicLine
.width($("#magic-line").width()) //Задали ему ширину из файла css style.css
.height($("#magic-line").height()) //Задали ему высоту из файла css style.css
.css("top", $("#magic-line").position().top) //Взяли его положение относительно top из style.css
.data("origTop", $magicLine.position().top) //Запомнили это положение и дали ему имя origTop
.data("origHeight", $magicLine.height()); //Запомнили высоту магической линии дали имя origHeight
$("#example-one li").find("a").hover(function() { //В селекторе #exapmle-one li нашли дескриптор <a> задали ему функцию при наведении
$el = $(this); //Присвоили переменной $el значения фунции (родителя)
topPos = $el.position().top; //задали переменной topPos позицию описанную в style.css от селектора #magic-line
newHeight = $el.parent().height(); //тоже самое что и с topPos только по высоте, запись .parent() не понимаю, ведь у $el и так родитель селектор из css - #magic-line
$magicLine.stop().animate({ //останавливает анимацию в том положении в котором сейчас находится созданный дескриптор <li> (я так вижу)
top: topPos,
height: newHeight //это просто данные высоты и положения от верха дескриптора <ul> (как я понимаю)
});
}, function() {
$magicLine.stop().animate({ //
top: $magicLine.data("origTop"), //Функция возвращает слайдер в исходное положение, координаты которого заданны
height: $magicLine.data("origHeight") //
});
});
$("#example-one li").find("a").active(function() {
$magicLine.stop().animate({ //ВОПРОС ТУТ: как указать координаты активной ссылки
top: topPos,
height: newHeight
});
});
});
Это css, он скорее всего не понадобится(более чем уверен) так как a:active никак не зависит от него, я так думаю.
* { margin: 0; padding: 0; }
header { padding: 100px 0 0 0; display: block; }
header h1 { width: 960px; margin: 0 auto; }
a { color: #eee; }
a:hover { color: white; }
.nav-wrap {
width:110px;
background-color: rgba(0,0,0,0.6);
border:2px solid black;
}
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 300px; }
*:first-child+html .group { zoom: 1; } /* IE7 */
#example-one {
list-style: none;
position: relative;
width: 110px;
height:300px;
}
#example-one li {
display: inline-block;
}
#example-one a {
width:110px;
color: #bbb;
top:0;
font-size: 14px;
display: block;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#example-one a:active {
color: red;
}
#magic-line{
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 26px;
background: #fe4902;
}
|
Вот бесплатный хостинг - работает.
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
header { padding: 100px 0 0 0; display: block; }
header h1 { width: 960px; margin: 0 auto; }
a { color: #eee; }
a:hover { color: white; }
.nav-wrap {
width:110px;
background-color: rgba(0,0,0,0.6);
border:2px solid black;
}
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 300px; }
*:first-child+html .group { zoom: 1; } /* IE7 */
#example-one {
list-style: none;
position: relative;
width: 110px;
height:300px;
}
#example-one li {
display: inline-block;
}
#example-one a {
width:110px;
color: #bbb;
top:0;
font-size: 14px;
display: block;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#example-one a:active {
color: red;
}
#magic-line{
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 26px;
background: #fe4902;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $el, topPos, newHeight; //Записали переменные
$("#example-one").append("<li id='magic-line'></li>"); //Добавили элемент списка <li> в <ul>, по id#example-one
var $magicLine = $("#magic-line"); //Записали его/Дали ему атрибуты "<li>"
$magicLine
.width($("#magic-line").width()) //Задали ему ширину из файла css style.css
.height($("#magic-line").height()) //Задали ему высоту из файла css style.css
.css("top", $("#magic-line").position().top) //Взяли его положение относительно top из style.css
.data("origTop", $magicLine.position().top) //Запомнили это положение и дали ему имя origTop
.data("origHeight", $magicLine.height()); //Запомнили высоту магической линии дали имя origHeight
$("#example-one li").find("a").hover(function() { //В селекторе #exapmle-one li нашли дескриптор <a> задали ему функцию при наведении
$el = $(this); //Присвоили переменной $el значения фунции (родителя)
topPos = $el.position().top; //задали переменной topPos позицию описанную в style.css от селектора #magic-line
newHeight = $el.parent().height(); //тоже самое что и с topPos только по высоте, запись .parent() не понимаю, ведь у $el и так родитель селектор из css - #magic-line
$magicLine.stop().animate({ //останавливает анимацию в том положении в котором сейчас находится созданный дескриптор <li> (я так вижу)
top: topPos,
height: newHeight //это просто данные высоты и положения от верха дескриптора <ul> (как я понимаю)
});
}, function() {
$magicLine.stop().animate({ //
top: $magicLine.data("origTop"), //Функция возвращает слайдер в исходное положение, координаты которого заданны
height: $magicLine.data("origHeight") //
});
});
$("#example-one li").find("a").click(function() {
topPos = $(this).position().top;
newHeight = $(this).parent().height();
$magicLine.stop().animate({ //ВОПРОС ТУТ: как указать координаты активной ссылки
top: topPos,
height: newHeight
});
});
});
</script>
</head>
<body>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#bt">Buy Tickets</a></li>
<li><a href="#gs">Group Sales</a></li>
<li><a href="#rv">Reviews</a></li>
<li><a href="#ts">The Show</a></li>
<li><a href="#vo">Videos</a></li>
<li><a href="#ph">Photos</a></li>
<li><a href="#ms">Magic Shop</a></li>
</ul>
</div>
<div id="bt" class="selected_div"></div>
</body>
</html>
|
Цитата:
|
Catalynx.,
Учтите, что нет события active, и, соответственно, для него нельзя написать обработчик. |
| Часовой пояс GMT +3, время: 22:47. |