Вертикальный 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:03. |