93 lines
2.4 KiB
Plaintext
93 lines
2.4 KiB
Plaintext
<script>
|
|
(function ($) {
|
|
$.fn.episodeProgress = function (episodes, totalEpisodes) {
|
|
return this.each(
|
|
function () {
|
|
var div = $(this);
|
|
var innerdiv = div.find(".progress");
|
|
|
|
var width = Math.round(episodes / totalEpisodes * 100);
|
|
innerdiv.css("width", width + "%");
|
|
|
|
if (width > 97) {
|
|
innerdiv.css("-khtml-border-top-right-radius", "7px");
|
|
innerdiv.css("border-top-right-radius", "7px");
|
|
innerdiv.css("-moz-border-top-right-radius", "7px");
|
|
innerdiv.css("-webkit-border-top-right-radius", "7px");
|
|
|
|
innerdiv.css("-khtml-border-bottom-right-radius", "7px");
|
|
innerdiv.css("border-bottom-right-radius", "7px");
|
|
innerdiv.css("-moz-border-bottom-right-radius", "7px");
|
|
innerdiv.css("-webkit-border-bottom-right-radius", "7px");
|
|
}
|
|
|
|
div.find(".progressText").html(episodes + " / " + totalEpisodes);
|
|
}
|
|
);
|
|
};
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<style>
|
|
/* progress bar container */
|
|
.progressbar
|
|
{
|
|
border:1px solid grey;
|
|
-khtml-border-radius:8px;
|
|
border-radius:8px;
|
|
-moz-border-radius:8px;
|
|
-webkit-border-radius:8px;
|
|
width:125px;
|
|
height:20px;
|
|
position:relative;
|
|
color:black;
|
|
}
|
|
|
|
/* apply curves to the progress bar */
|
|
.progress
|
|
{
|
|
-khtml-border-top-left-radius:7px;
|
|
border-top-left-radius:7px;
|
|
-moz-border-top-left-radius:7px;
|
|
-webkit-border-top-left-radius:7px;
|
|
|
|
-khtml-border-bottom-left-radius:7px;
|
|
border-bottom-left-radius:7px;
|
|
-moz-border-bottom-left-radius:7px;
|
|
-webkit-border-bottom-left-radius:7px;
|
|
}
|
|
|
|
/* color bar */
|
|
.progressbar div.progress
|
|
{
|
|
position:absolute;
|
|
width:0;
|
|
height:100%;
|
|
overflow:hidden;
|
|
background-color:#065EFE;
|
|
}
|
|
/* text on bar */
|
|
.progressbar div.progress .progressText{
|
|
position:absolute;
|
|
text-align:center;
|
|
color:white;
|
|
}
|
|
/* text off bar */
|
|
.progressbar div.progressText{
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
text-align:center;
|
|
}
|
|
</style>
|
|
|
|
<div id="progressbar" class="progressbar">
|
|
<div class="progressText"></div>
|
|
<div class="progress">
|
|
<span class="progressText" style="width: 125px;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$("#progressbar").episodeProgress(100, 100);
|
|
</script> |