forum.okis.ru • Просмотр темы

Сообщения без ответов | Активные темы

Список форумов » Корзина

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

jQuery Skill Bar

Страница 1 из 2

[ Сообщений: 14 ]

На страницу 1, 2 След.

Версия для печати

Пред. тема | След. тема

Автор

Сообщение

nade05

Заголовок сообщения: 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. Помогите, пожалуйста. =)

Вернуться к началу

Okis

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 31 июл 2014, 00:26

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4406

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

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

Вернуться к началу

nade05

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 31 июл 2014, 10:57

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18

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

Вернуться к началу

Okis

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 31 июл 2014, 15:25

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4406

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

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

Вернуться к началу

13bnj

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 01 авг 2014, 10:16

Зарегистрирован: 19 апр 2013, 14:26
Сообщения: 153

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

Вернуться к началу

Okis

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 01 авг 2014, 12:59

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4406

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

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

Вернуться к началу

nade05

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

Вернуться к началу

nade05

Заголовок сообщения: Okis.ru

Добавлено: 01 авг 2014, 13:54

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18

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

Вернуться к началу

13bnj

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 01 авг 2014, 14:55

Зарегистрирован: 19 апр 2013, 14:26
Сообщения: 153

Okis писал(а):

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

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

Вернуться к началу

nade05

Заголовок сообщения: Re: jQuery Skill Bar

Добавлено: 01 авг 2014, 15:18

Зарегистрирован: 08 июл 2014, 13:25
Сообщения: 18

13bnj писал(а):

В этих JS-файлах нет никакого посыла на библиотеку jQuery. Я думаю, если его убрать, то шаблоны не будут такими адаптивными, нежели сейчас. Некоторые элементы в дизайне могут перестать работать. Хотя через Chrome Developer Tools убрал вышеуказанную строчку - всё осталось стабильно работать...
Вряд ли это можно убрать обычному пользователю.

Вернуться к началу

Страница 1 из 2

[ Сообщений: 14 ]

На страницу 1, 2 След.

Список форумов » Корзина

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

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

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

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