Здравствуйте. Я уже 3й день пытаюсь заставить работать простейший jquery скриптик для прокрутки страницы к заданному блоку, перепробовал уже всё! И пихал его в отдельный файл потом подключал к шаблону, потом пихал его прямо в шаблон в тегах {literal} а он не хочет работать и всё тут! Немного пояснений: Вот сам скриптик
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
event.preventDefault();
});
});
</script>
Он у меня в отдельном js файлике. Подключаю я его к шаблону вот так
<script type="text/javascript" src="images/advokat/Js/inf.js"></script>
Сам HTML код для плавного перехода до заданного блока. начало
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
И в конце странички:
<div class="section white" id="section2">
<h2>Раздел №2</h2>
<p>
Текст раздела №2<br/>
Текст раздела №2<br/>
Текст раздела №2<br/>
Текст раздела №2<br/>
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
Немного грубовато и много лишнего, но не суть! У меня задача заставить работать, потом будем красоту наводить.
Создаю html страничку, прописываю в ней контент любой, подключаю скрипты и о чудо там всё работает! Как только я пытаюсь подключить непосредственно в CMSMS в шаблон, все не работает! При этом другие jquery скрипты работают ОТЛИЧНО!
Захожу в отладчик и вижу вот такую ошибку
Uncaught TypeError: Property '$' of object [object Object] is not a function
других ошибок и предупреждений нету.
И на последок, вот мой шаблон в этом шаблоне данный скрипт вставлен в теги {literal}
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{sitename} | {title}</title>
{metadata}
{stylesheet}
<script type="text/javascript" src="images/advokat/Js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="images/advokat/Js/jquery.feedback.js"></script>
<script type="text/javascript" src="images/advokat/Js/jquery.validate.js"></script>
<script type="text/javascript" src="images/advokat/Js/jquery.form.js"></script>
<script type="text/javascript" src="images/advokat/Js/jquery.tooltipster.js"></script>
{literal}
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
event.preventDefault();
});
});
</script>
{/literal}
</head>
<body>
<div class="container">
<div id="wrapper">
<div id="branding">
<div style="float: left;">
<h1 class="logo"><a href="#" title="< Magazine />">вовоааовововоао</a></h1>
<p class="intro"><span style="color: #666666;">ваовоаваоаооа </span><br /><br>воаоваваоваоовао</p>
</div>
<div style="width: 190px; display: inline-block;">
<img style="padding-left: 15px;" width="180" src="/images/advokat/pic-top-right.png"/>
</div>
<div id="branding1">
<div style="padding-left:100px;padding-top:30px">
<div id="branding2" >
<img src="images/advokat/111.png" alt="" width="40" >
</div>
<div id="branding3">
<span style="color:#666666;"><b>Контакты:</b></span>
<p><i><span style="color:#93b876;">534353</i>
<p><i><span style="color:#93b876;">53434</i></p>
<p><i><span style="color:#93b876;">248000,<span/></i></p>
</div>
</div>
</div>
{menu template='headmenu' number_of_levels='1'}
<br class="clear" />
</div>
<div id="contant">
<div class="contant_1">
<div class="contant_1_left">
<h2>{title}</h2>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
<p>{content}</p>
</div>
<div class="sideBar">
{content block='selfinfo'}
<div class="sideBarListBox">
<img src="/images/advokat/sideBarListBoxTop.png" alt="" width="240" height="10" />
{menu number_of_levels="2"}
<img src="/images/advokat/sideBarListBoxBottom.png" alt="" width="240" height="10" />
</div>
<div>
</div>
</div>
<br class="clear" />
</div>
</div>
<br />
<div id="footer">
<div id="inf"> </div>
<div class="feedback-form">
<div class="feedback-multi-column">
<div class="header">
<div class="column-full">
<h4><i class="icon-notebook"></i>Заказать обратный звонок</h4>
</div>
</div>
<div class="section">
<form method="post" action="php/form.php" id="feedback">
<fieldset>
<div class="column-full2">
<div id="feedback-message"></div>
</div>
<div class="column-half">
<div class="input-group">
<label for="firstname" name="firstname"><i class="icon-user-3"></i></label>
<input type="text" id="firstname" name="firstname" maxlength="30" placeholder="Ваше Имя">
</div>
</div>
<div class="column-half">
<div class="input-group">
<label for="lastname" name="lastname"><i class="icon-user-3"></i></label>
<input type="text" id="lastname" name="lastname" maxlength="30" placeholder="Ваша Фамилия">
</div>
</div>
<div class="column-half">
<div class="input-group">
<label for="useremail" name="useremail"><i class="icon-envelop-opened"></i></label>
<input type="email" id="useremail" name="useremail" maxlength="70" placeholder="Ваш E-mail адрес">
</div>
</div>
<div class="column-full">
<div class="input-group">
<label for="usermessage" name="usermessage"><i class="icon-bubble-10"></i></label>
<textarea style="resize: none; height: 85px;" id="usermessage" name="usermessage" maxlength="200" placeholder="Опишите пожалуйста вашу проблему"></textarea>
</div>
</div>
<div class="column-half">
<div class="input-group">
<label for="userphone" name="userphone"><i class="icon-phone"></i></label>
<input type="text" id="userphone" name="userphone" maxlength="70" placeholder="Ваш телефон для связи">
</div>
</div>
<div class="column-half">
<button type="reset" name="clear" class="button button-mini button-red">Сбросить</button>
<button type="submit" id="send" name="send" class="button button-mini button-green">Отправить заявку</button>
<div id="loader"></div>
</div>
</fieldset>
</form>
</div>
<div class="footer">
<div class="column-full">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section white" id="section2">
<h2>Раздел №2</h2>
<p>
Текст раздела №2<br/>
Текст раздела №2<br/>
Текст раздела №2<br/>
Текст раздела №2<br/>
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
Помогите пожалуйста, мб я чего всетаки не так делаю, или еще чего, какого фига он не работает именно в CMSMS везде в других CMS и в Джумле и т.п. все работает на УРА!
Версия CMS 1.7.1
Файл jquery.feedback.js из-за него конфликты.
jQuery.noConflict()(function($){
$(document).ready(function(){
$('#feedback input, textarea').tooltipster({
trigger: 'custom',
onlyOne: true,
position: 'top'
});
});
});
jQuery.noConflict()(function($){
$.validator.methods.equal = function(value, element, param) {
return value == param;
};
$(document).ready(function(){
$("#feedback").validate({
rules:{
firstname:{
required:true
},
lastname:{
required:false
},
useremail:{
required:true,
email:true
},
usermessage:{
required:true,
minlength:20
},
userphone:{
required:true,
},
},
messages: {
firstname:{
required: 'Пожалуйста введите своё Имя',
},
lastname:{
required: 'Пожалуйста введите свою Фамилию',
},
useremail:{
required: 'Пожалуйста введите свой E-mail адрес',
email: 'Пожалуйста введите корректный E-mail адрес'
},
usermessage:{
required: 'Пожалуйста введите ваше сообщение'
},
userphone:{
required: 'Пожалуйста введите свой телефон',
},
},
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
submitHandler:function(form) {
jQuery(form).ajaxSubmit({
target:'#feedback-message',
beforeSubmit:function(){
$('#loader').show();
},
success:function(){
$('#loader').hide();
$("#feedback-message").fadeIn(500);
$("#feedback").each(function(){
this.reset();
});
},
});
}
});
});
});