Текущее время: 26 мар 2017, 22:48

Часовой пояс: 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
Сообщения: 4177
Попробуйте воспользоваться 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
Сообщения: 4177
По ощущениям - проблема с jquery.

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


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

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


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

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4177
У окиса нету 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
Сообщения: 138
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 часа [ Летнее время ]


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

Сейчас этот форум просматривают: нет зарегистрированных пользователей


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

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