Как правильно подключить JS?

Question

[Kejin]

Не работают JavaScript в PHP. Хочу сделать карусель на сайте в виде прокрутки новостей и еще, чтобы менялся вид товаров, но JS ни в какую не работает. Вот код подключения скриптов:

<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="/js/jcarousellite_1.0.1.js"></script> 
    <script type="text/javascript" src="/js/shop-script.js"></script>

и JS скрипт

$("#newsticker").jCarouselLite({
        vertical: true;
        hoverPause:true;
        btnPrev: "#news-prev",
        btnNext: "#news-next",
        visible: 3,
        auto:3000,
        speed:500    
    }); 
    
$("#style-grid").click(function(){
    
    
    




});
$("#style-list").click(function(){
    
$("#block-tovar-grid").hide();    
    
    
});

});

Comments

[display: block]

Причём здесь PHP? Без PHP работает?

[Kejin]

qork: Код рабочий. Ибо делаю по видео уроку, все как там. Chrome выдает ошибки: Uncaught SyntaxError: Unexpected token ;

[Sergej]

я вот и строчки php не увидел...
Больше так не задавайте вопросы, буду чистить.

[Kejin]

vertical: true;
hoverPause:true;


Убрал в этих строка ";" ибо должны быть запятые, сейчас никаких ошибок нет. Но все равно ни карусель ни изменение списка товаров не работает

Сейчас выдает такие ошибки Chrome
Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
at height (jcarousellite_1.0.1.js:361)
at HTMLDivElement. (jcarousellite_1.0.1.js:244)
at Function.each (jquery-1.8.2.min.js:2)
at init.each (jquery-1.8.2.min.js:2)
at init.$.fn.jCarouselLite (jcarousellite_1.0.1.js:226)
at shop-script.js:1

Answer 1

[Falseclock]

});

последняя строка лишняя

Comments

[Kejin]

Все исправил ошибки, но код по прежнему не работает

[Falseclock]

Kejin: убрать hoverPause:true; , так нет такого параметра и после vertical: true; вместо точки с запятой поставить запятую

[Kejin]

Нурлан Муханов: С кодом проблем нет, у меня JS находится в отдельном файле и видимо он не подключается к моему index.php.
JS включен, код рабочий

[Falseclock]

Kejin: Uncaught TypeError: Cannot read property 'offsetHeight' of undefined означает, что жаваскрипт не может найти поле с id newsticker и еще раз повторю: hoverPause - нет такого параметра в указанной библиотеке

[Kejin]

Нурлан Муханов:

<div id="block-news">
<center><img id="news-prev" src="/images/img-prev.png" /></center>
<div id="newsticker">

<li>
<span>01.02.2017</span>
<a href="">Новая мебель от Carpet House</a>
<p>Каждый вид мебели имеет свою иSсторию и особенности изготовления, применения и дизайна! </p>
</li>

<li>
<span>01.02.2017</span>
<a href="">Новая мебель от Carpet House</a>
<p>Каждый вид мебели имеет сSвою историю и особенности изготовления, применения и дизайна! </p>
</li>

<li>
<span>01.02.2017</span>
<a href="">Новая мебель от Carpet House</a>
<p>Каждый вид мебели иSмеет свою историю и особенности изготовления, применения и дизайна! </p>
</li>
</ul>

</div>
<center><img id="news-next" src="/images/img-next.png" /></center>
</div>

Вот сам исходник php, в нем же есть это значение "newsticker"

[Falseclock]

Kejin: не в курсе где у вас загружается код, то нужно его обернуть, чтобы он срабатывал, когда страница полностью загрузилась

document.observe
(
	"dom:loaded", 
	function()
	{
		$("#newsticker").jCarouselLite({
				vertical: true,
				btnPrev: "#news-prev",
				btnNext: "#news-next",
				visible: 3,
				auto:3000,
				speed:500    
			}); 
			
		$("#style-grid").click(function(){

		});
		$("#style-list").click(function(){
			
		$("#block-tovar-grid").hide();    
			
			
		});
	} 
);

[Kejin]

Нурлан Муханов: Спасибо!

Answer 2

[Сергей Мельников]

При чем тут PHP? Вы просто не знаете как работать с JS.

<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="/js/jcarousellite_1.0.1.js"></script> 
<script type="text/javascript" src="/js/shop-script.js"></script>
<script>
$(function() {
  $("#newsticker").jCarouselLite({
    vertical: true;
    hoverPause:true;
    btnPrev: "#news-prev",
    btnNext: "#news-next",
    visible: 3,
    auto:3000,
    speed:500    
  }); 
      
  $("#style-grid").click(function() {});
  $("#style-list").click(function() {    
    $("#block-tovar-grid").hide();
  });
})
</script>

И, когда выкладываете код, будьте добры его форматировать