Текущее время: 25 июн 2017, 12:49

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 14 ]  На страницу 1, 2  След.
Автор Сообщение
 Заголовок сообщения: jQuery Skill Bar
СообщениеДобавлено: 30 июл 2014, 19:48 
Не в сети

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18
Привет всем.
Интересует, почему вот такую наработку не получается полноценно реализовать?
Если установить вышеуказанный код через собственный шаблон (/admin/index.php?act=template) всё работает безупречно. Но если адаптировать абсолютно такой же код на любую шаблонную версию okis.ru, то анимация процентной загрузки не выполняется. Уже много способов попробовал, но проблема не решилась, к сожалению.

Нижеуказанный код Вы можете вставить прямо в раздел "Шаблон".
Код:
<html>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery('.skillbar').each(function(){
      jQuery(this).find('.skillbar-bar').animate({
         width:jQuery(this).attr('data-percent')
      },6000);
   });
});
</script>

<style>
.skillbar {
   position:relative;
   display:block;
   margin-bottom:15px;
   width:100%;
   background:#eee;
   height:35px;
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -webkit-transition:0.4s linear;
   -moz-transition:0.4s linear;
   -ms-transition:0.4s linear;
   -o-transition:0.4s linear;
   transition:0.4s linear;
   -webkit-transition-property:width, background-color;
   -moz-transition-property:width, background-color;
   -ms-transition-property:width, background-color;
   -o-transition-property:width, background-color;
   transition-property:width, background-color;
}

.skillbar-title {
   position:absolute;
   top:0;
   left:0;
   font-weight:bold;
   font-size:13px;
   color:#fff;
   background:#6adcfa;
   -webkit-border-top-left-radius:3px;
   -webkit-border-bottom-left-radius:4px;
   -moz-border-radius-topleft:3px;
   -moz-border-radius-bottomleft:3px;
   border-top-left-radius:3px;
   border-bottom-left-radius:3px;
}

.skillbar-title span {
   display:block;
   background:rgba(0, 0, 0, 0.1);
   padding:0 20px;
   height:35px;
   line-height:35px;
   -webkit-border-top-left-radius:3px;
   -webkit-border-bottom-left-radius:3px;
   -moz-border-radius-topleft:3px;
   -moz-border-radius-bottomleft:3px;
   border-top-left-radius:3px;
   border-bottom-left-radius:3px;
}

.skillbar-bar {
   height:35px;
   width:0px;
   background:#6adcfa;
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}

.skill-bar-percent {
   position:absolute;
   right:10px;
   top:0;
   font-size:11px;
   height:35px;
   line-height:35px;
   color:#444;
   color:rgba(0, 0, 0, 0.4);
}
</style>

<div class="skillbar clearfix " data-percent="65%">
<div class="skillbar-title" style="background: #88cd2a;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #88cd2a;"></div>
<div class="skill-bar-percent">65%</div>
</div>
<div class="skillbar clearfix " data-percent="90%">
<div class="skillbar-title" style="background: #f7a53b;"><span>CSS3</span></div>
<div class="skillbar-bar" style="background: #f7a53b;"></div>
<div class="skill-bar-percent">90%</div>
</div>
<div class="skillbar clearfix " data-percent="55%">
<div class="skillbar-title" style="background: #6adcfa;"><span>WordPress</span></div>
<div class="skillbar-bar" style="background: #6adcfa;"></div>
<div class="skill-bar-percent">55%</div>
</div>
<div class="skillbar clearfix " data-percent="85%">
<div class="skillbar-title" style="background: #fa6e6e;"><span>PHP</span></div>
<div class="skillbar-bar" style="background: #fa6e6e;"></div>
<div class="skill-bar-percent">85%</div>
</div>
<div class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #336699;"><span>jQuery</span></div>
<div class="skillbar-bar" style="background: #336699;"></div>
<div class="skill-bar-percent">100%</div>
</div>

<tr>
    <td colspan="3" align="center">
      %bottom_menu%
      %copyright%
      %counters%
    </td>
  </tr>

</html>
Вот пример нерабочей процентной загрузки: http://nade05.okis.ru. Помогите, пожалуйста. =)


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 31 июл 2014, 00:26 
Не в сети
Аватара пользователя

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4208
Попробуйте воспользоваться JS отладчиком в броузере.

_________________
Уроки и полезные советы про okis


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 31 июл 2014, 10:57 
Не в сети

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18
Попробовал в хроме - ошибок нет. Код абсолютно верный.
Феномен просто. Точно такой же код, но в своей версии шаблона работает.
Ещё какие-то предложения будут? :)


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 31 июл 2014, 15:25 
Не в сети
Аватара пользователя

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4208
По ощущениям - проблема с jquery.

_________________
Уроки и полезные советы про okis


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 01 авг 2014, 10:16 
Не в сети
Аватара пользователя

Зарегистрирован: 19 апр 2013, 14:26
Сообщения: 142
Аналогичной проблемой мучался тоже несколько дней, но так и не решил через шаблон окис. Как вариант-поставил свой (пустой) шаблон - и все заработало. Думаю, что из-за конфликта квери окиса и квери сайта.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 01 авг 2014, 12:59 
Не в сети
Аватара пользователя

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4208
У окиса нету jquery по-умолчанию, насколько мне известно (могу ошибиться).

_________________
Уроки и полезные советы про okis


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 01 авг 2014, 13:05 
Не в сети

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18
13bnj писал(а):
Аналогичной проблемой мучался тоже несколько дней, но так и не решил через шаблон окис. Как вариант-поставил свой (пустой) шаблон - и все заработало. Думаю, что из-за конфликта квери окиса и квери сайта.
В том примере, что я предоставил не было никакого другого jQuery (то есть, от okis).
Код:
<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery('.skillbar').each(function(){
      jQuery(this).find('.skillbar-bar').animate({
         width:jQuery(this).attr('data-percent')
      },6000);
   });
});
</script>
Но на мысли, что код каким-то образом конфликтует с JS-скриптом шаблона я остановился (возможно он не адаптирован под эту систему; очень малое количество, но есть такие кода, что не срабатывают) и пошел дальше - потому как нет больше времени. Это не смертельно. ;)


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Okis.ru
СообщениеДобавлено: 01 авг 2014, 13:54 
Не в сети

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18
Достоинства конструктора Okis.ru намного важнее и ценнее, чем любой код на JS.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 01 авг 2014, 14:55 
Не в сети
Аватара пользователя

Зарегистрирован: 19 апр 2013, 14:26
Сообщения: 142
Okis писал(а):
У окиса нету jquery по-умолчанию, насколько мне известно (могу ошибиться).

В каждом шаблоне ОКИС есть
<script type="text/javascript" src="/shablons/417/script.js"></script>
417- это код (№) шаблона.
Мой вопрос состоит в том, чтобы вообще убрать этот скрипт.
Как это сделать?


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: jQuery Skill Bar
СообщениеДобавлено: 01 авг 2014, 15:18 
Не в сети

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18
13bnj писал(а):
В каждом шаблоне ОКИС есть
<script type="text/javascript" src="/shablons/417/script.js"></script>
417- это код (№) шаблона.
Мой вопрос состоит в том, чтобы вообще убрать этот скрипт.
Как это сделать?
В этих JS-файлах нет никакого посыла на библиотеку jQuery. Я думаю, если его убрать, то шаблоны не будут такими адаптивными, нежели сейчас. Некоторые элементы в дизайне могут перестать работать. Хотя через Chrome Developer Tools убрал вышеуказанную строчку - всё осталось стабильно работать...
Вряд ли это можно убрать обычному пользователю.


Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 14 ]  На страницу 1, 2  След.

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: Yahoo [Bot]


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron