0 Пользователей и 1 Гость просматривают эту тему.
  • 32 Ответов
  • 4547 Просмотров
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
Форумчане, сверстал тут для одного проекта шаблон, посадил на jooml'у 3.2 все работает отлично, за исключением одного НО. Если кто знаком с библиотекой стилей анимации CSS animations.css, то проблема именно в ее подключении. По подробнее, для того что бы прикрутить к желаемому элементу сайта анимацию нужно поместить данную CSS библиотеку в шаблон, естественно подключить ее, далее, что бы анимация срабатывала при скроле страницы(в момент появления анимируемого блока в поле зрения), подключается jquery 1.10.1 и перед body выводится простенькая функция
Код
<script>
   $(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
(думаю функция всем понятна), ну так вот, сама анимация работает, но не работает функция js , не понятно почему, у Joomla какие то проблемы с js или что? понять не могу. По возможности, кто знает в чем может крыться беда, подскажите решение?
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

JLang

  • Захожу иногда
  • 103
  • 19 / 0
Кстати да, что-то начиная с версии 3.2 в Joomla пакостит загрузку скриптов. Есть похожая проблема. Смотрел - пишет, "скрипт не загружен, хотя и присутствует" Что-то вроде этого. Или не все скрипты загружены - ошибка. А до 3.2 всё работало отлично и тоже jquery. Грешу на новый js тултип подсказки, но не факт
*

zomby6888

  • Завсегдатай
  • 1473
  • 171 / 3
А если в консоль заглянуть? Наверняка какие нибудь ошибки вылазят..
интернет-блог: http://websiteprog.ru
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
Консоль никаких ошибок связанных именно с jquery не выдает, по доктайпу, конкретнее вопрос если можно. Вроде и ноу конфликт плагины ставил но все в пустую...если кто сталкивался поддержите темку, а то уже голову поломал решая что да как
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Ну просто надо попробовать сменить доктайп. Какой сейчас стоит?
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
HTML 5 доктайп стоит...ну то есть
Код
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/alex-its/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/alex-its/css/blocks.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/alex-its/css/animations.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<jdoc:include type="head" />
</head>
<script>
    $(window).scroll(function() {
        $('.work').each(function(){
        var imagePos = $(this).offset().top;
 
        var topOfWindow = $(window).scrollTop();
            if (imagePos > topOfWindow+200) {
                $(this).addClass("fadeIn");
            }
        });
    });
</script>
так что подсказывайте что дальше то...или что не так...это можно сказать первый серьезный опыт в построении шаблонов на Joomla...раньше тоже делал но совсем простенькие
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Доктайп сделайте заглавными буквами <!DOCTYPE html>
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
Доктайп сделайте заглавными буквами <!DOCTYPE html>
Попробовал ваш метод, но он абсолютно ничего не изменил...
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
alex_next , ссылка на сайт?
Цитировать
Консоль никаких ошибок связанных именно с jquery не выдает
Сомневаюсь. Вы свой скрипт вставили после <jdoc:include type="head" /> , в котором мутулз подключен +хз что еще. А в скрипте используете "$" без .noConflict().
Оберните ваш код:
Код
<script type="text/javascript">
jQuery(function($) {
   //ваш код
});
</script>
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
Код: javascript
      jQuery(document).ready(function (f) {
        f(window).scroll(function () {
          f('.work').each(function () {
            var imagePos = f(this).offset().top,
              topOfWindow = f(window).scrollTop();
            if (imagePos > topOfWindow + 200) {
              f(this).addClass("fadeIn");
            }
          });
        });
      });
Почему - f?
First letter of my name  :laugh:
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
jQuery(document).ready(function (f) {...}); == jQuery(function($) {...});
Только писАть меньше; .ready() в коде учтено.
Почему - $? => First letter of my name
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
fsv, Шучу <!doctype html> (кстати пофиг какими буквами)
<script type="text/javascript">
В HTML5 атрибут type можно опустить, он является необязательным и принимает значение text/javascript, если не указан явно. В предыдущих версиях HTML атрибут type необходим
еще немножко и код урежем до 0 байт  :laugh:
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
alex_next , ссылка на сайт?Сомневаюсь. Вы свой скрипт вставили после <jdoc:include type="head" /> , в котором мутулз подключен +хз что еще. А в скрипте используете "$" без .noConflict().
Оберните ваш код:
Код
<script type="text/javascript">
jQuery(function($) {
   //ваш код
});
</script>
Не помогло, обернул но все так же...как решать конфликты скриптов в Joomla 3.2 подскажите...может какой плагин есть или еще чего
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
так же...как решать конфликты скриптов
Внимательно читать и смотреть в консоль обозревателя. Все ваши ошибки там
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
Внимательно читать и смотреть в консоль обозревателя. Все ваши ошибки там
Порылся еще немного и вот что пишет консоль
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.....что подскажите в этом случае?
*

capricorn

  • Завсегдатай
  • 1949
  • 118 / 3
Может так обернуть?
Код
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
   $j(window).scroll(function() {
$j('#animatedElement').each(function(){
var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$j(this).addClass("slideUp");
}
});
});
});
</script>
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
<!doctype html> (кстати пофиг какими буквами)
Пофиг, пока не встречаются XML-нотации (XHTML5). Там обязательно в верхнем регистре.
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
Может так обернуть?
Код
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
   $j(window).scroll(function() {
$j('#animatedElement').each(function(){
var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$j(this).addClass("slideUp");
}
});
});
});
</script>
И такой вариант к сожалению не помог...может кто знает вариант реализации анимации при прокрутке без использования jquery, или с ним но другим методом?
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Вот у меня закладочка есть, сам не пробовал.
http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

zomby6888

  • Завсегдатай
  • 1473
  • 171 / 3
А у вас вообще элемент с id 'animatedElement' наличествует? Посмотрите в исходном коде страницы..
« Последнее редактирование: 11.01.2014, 12:46:52 от zomby6888 »
интернет-блог: http://websiteprog.ru
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
А у вас вообще элемент с id 'animatedElement' наличествует? Посмотрите в исходном коде страницы..
точно в точку попал. Причем это не ид должен  быть а класс по коду. Иначе зачем одно значение циклом, а и ид должны быть оригинаьные
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
точно в точку попал. Причем это не ид должен  быть а класс по коду. Иначе зачем одно значение циклом, а и ид должны быть оригинаьные
animatedElement - это пример, вместо него подставляете ID, класс - что удобнее, того элемента который хотите анимировать...так что вопрос ваш по поводу того наличествует или нет был не совсем уместен, я не настолько криворукий новичок что бы так опростоволоситься....)
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
я не настолько криворукий новичок что бы так опростоволоситься....)
Выполняет функцию для каждого элемента набора, #animatedElement - ?
http://jquery-docs.ru/core/each/
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
вот ссыль на руководство по тому примеру который я использую...http://www.justinaguilar.com/animations/index.html# - так вот если исходить из этого руководства то вместо #animatedElement вставляется класс или ID желаемого элемента
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
Цитировать
"Эта музыка будет вечной"
  , пока не
Цитировать
alex_next , ссылка на сайт?
Вопросы по ошибкам в js без ссылки на сайт не имеют смысла.
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
alex_next, вы думаете за бугром г-код не пишут. Пишут как и везде.
Вот ваш пример переделанный
http://jsfiddle.net/vlasenkofedor/6PWWu/
он также не идеален, но гораздо лучше
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
  , пока не Вопросы по ошибкам в js без ссылки на сайт не имеют смысла.
сайт на локальном сервере...в процессе разработки
*

alex_next

  • Захожу иногда
  • 137
  • 2 / 0
alex_next, вы думаете за бугром г-код не пишут. Пишут как и везде.
Вот ваш пример переделанный
http://jsfiddle.net/vlasenkofedor/6PWWu/
он также не идеален, но гораздо лучше
и тут ничего не работает
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
сайт на локальном сервере...в процессе разработки
Да не, я ж не уговариваю вас. Как хотите. Кому надо, тот найдет способ показать. И бесплатные хостинги для демо никто не отменял.
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Проблема с отображением на устройствах apple

Автор o_fedor

Ответов: 0
Просмотров: 1417
Последний ответ 02.04.2021, 21:31:50
от o_fedor
Проблема с offcanvas для меню

Автор dr.red

Ответов: 5
Просмотров: 10331
Последний ответ 31.01.2021, 21:51:08
от Rimo
Заготовка болванки - BlankTemplate для Joomla 3.x

Автор buyanov

Ответов: 83
Просмотров: 34061
Последний ответ 20.02.2019, 10:27:16
от jem777
Шаблон не видит переменные локализации кроме глобальных (Joomla 3.8)

Автор s.elena133

Ответов: 10
Просмотров: 3076
Последний ответ 09.12.2017, 18:27:18
от Ilhom666
Навигационный бар (Navbar) Bootstrap, Joomla 3.2

Автор wfedin

Ответов: 31
Просмотров: 20670
Последний ответ 06.01.2017, 21:07:31
от slon777