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