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> Вот пример нерабочей процентной загрузки: http://nade05.okis.ru. Помогите, пожалуйста. =)
<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> |
Автор: | 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"> Но на мысли, что код каким-то образом конфликтует с JS-скриптом шаблона я остановился (возможно он не адаптирован под эту систему; очень малое количество, но есть такие кода, что не срабатывают) и пошел дальше - потому как нет больше времени. Это не смертельно. ;)
jQuery(document).ready(function(){ jQuery('.skillbar').each(function(){ jQuery(this).find('.skillbar-bar').animate({ width:jQuery(this).attr('data-percent') },6000); }); }); </script> |
Автор: | 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 писал(а): В каждом шаблоне ОКИС есть В этих JS-файлах нет никакого посыла на библиотеку jQuery. Я думаю, если его убрать, то шаблоны не будут такими адаптивными, нежели сейчас. Некоторые элементы в дизайне могут перестать работать. Хотя через Chrome Developer Tools убрал вышеуказанную строчку - всё осталось стабильно работать...<script type="text/javascript" src="/shablons/417/script.js"></script> 417- это код (№) шаблона. Мой вопрос состоит в том, чтобы вообще убрать этот скрипт. Как это сделать? Вряд ли это можно убрать обычному пользователю. |
Страница 1 из 2 | Часовой пояс: UTC + 3 часа [ Летнее время ] |
Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/ |