forum.okis.ru
http://forum.okis.ru/

jQuery Skill Bar
http://forum.okis.ru/viewtopic.php?f=21&t=4566
Страница 1 из 2

Автор:  nade05 [ 30 июл 2014, 19:48 ]
Заголовок сообщения:  jQuery Skill Bar

Привет всем.
Интересует, почему вот такую наработку не получается полноценно реализовать?
Если установить вышеуказанный код через собственный шаблон (/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. Помогите, пожалуйста. =)

Автор:  Okis [ 31 июл 2014, 00:26 ]
Заголовок сообщения:  Re: jQuery Skill Bar

Попробуйте воспользоваться JS отладчиком в броузере.

Автор:  nade05 [ 31 июл 2014, 10:57 ]
Заголовок сообщения:  Re: jQuery Skill Bar

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

Автор:  Okis [ 31 июл 2014, 15:25 ]
Заголовок сообщения:  Re: jQuery Skill Bar

По ощущениям - проблема с jquery.

Автор:  13bnj [ 01 авг 2014, 10:16 ]
Заголовок сообщения:  Re: jQuery Skill Bar

Аналогичной проблемой мучался тоже несколько дней, но так и не решил через шаблон окис. Как вариант-поставил свой (пустой) шаблон - и все заработало. Думаю, что из-за конфликта квери окиса и квери сайта.

Автор:  Okis [ 01 авг 2014, 12:59 ]
Заголовок сообщения:  Re: jQuery Skill Bar

У окиса нету jquery по-умолчанию, насколько мне известно (могу ошибиться).

Автор:  nade05 [ 01 авг 2014, 13:05 ]
Заголовок сообщения:  Re: jQuery Skill Bar

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-скриптом шаблона я остановился (возможно он не адаптирован под эту систему; очень малое количество, но есть такие кода, что не срабатывают) и пошел дальше - потому как нет больше времени. Это не смертельно. ;)

Автор:  nade05 [ 01 авг 2014, 13:54 ]
Заголовок сообщения:  Okis.ru

Достоинства конструктора Okis.ru намного важнее и ценнее, чем любой код на JS.

Автор:  13bnj [ 01 авг 2014, 14:55 ]
Заголовок сообщения:  Re: jQuery Skill Bar

Okis писал(а):
У окиса нету jquery по-умолчанию, насколько мне известно (могу ошибиться).

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

Автор:  nade05 [ 01 авг 2014, 15:18 ]
Заголовок сообщения:  Re: jQuery Skill Bar

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

Страница 1 из 2 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/