[Catalynx.]

Доброго времени суток всем, возникла проблема при написании js, исходник был взят из-за бугра и переделан под свои нужды (потратил ~3 часа для вникания в суть), изучаю html css около недели и только вчера начал js поэтому прошу не кидаться камнями

Это код 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;
}