Mark McDowall
14 years ago
parent
01425ac0da
commit
63e303af3b
@ -1,136 +1,94 @@
|
|||||||
<script>
|
<style>
|
||||||
/*
|
/*body{
|
||||||
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
|
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||||
* http://benalman.com/projects/jquery-dotimeout-plugin/
|
font-size:12px;
|
||||||
*
|
|
||||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
|
||||||
* Dual licensed under the MIT and GPL licenses.
|
|
||||||
* http://benalman.com/about/license/
|
|
||||||
*/
|
|
||||||
(function ($) { var a = {}, c = "doTimeout", d = Array.prototype.slice; $[c] = function () { return b.apply(window, [0].concat(d.call(arguments))) }; $.fn[c] = function () { var f = d.call(arguments), e = b.apply(this, [c + f[0]].concat(f)); return typeof f[0] === "number" || typeof f[1] === "number" ? this : e }; function b(l) { var m = this, h, k = {}, g = l ? $.fn : $, n = arguments, i = 4, f = n[1], j = n[2], p = n[3]; if (typeof f !== "string") { i--; f = l = 0; j = n[1]; p = n[2] } if (l) { h = m.eq(0); h.data(l, k = h.data(l) || {}) } else { if (f) { k = a[f] || (a[f] = {}) } } k.id && clearTimeout(k.id); delete k.id; function e() { if (l) { h.removeData(l) } else { if (f) { delete a[f] } } } function o() { k.id = setTimeout(function () { k.fn() }, j) } if (p) { k.fn = function (q) { if (typeof p === "string") { p = g[p] } p.apply(m, d.call(n, i)) === true && !q ? o() : e() }; o() } else { if (k.fn) { j === undefined ? e() : k.fn(j === false); return true } else { e() } } } })(jQuery);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function ($) {
|
|
||||||
$.fn.episodeProgress = function (episodes, totalEpisodes) {
|
|
||||||
return this.each(
|
|
||||||
function () {
|
|
||||||
var div = $(this);
|
|
||||||
var progressBar = div.find(".progress");
|
|
||||||
|
|
||||||
var width = Math.round(episodes / totalEpisodes * 100);
|
|
||||||
|
|
||||||
progressBar.css("width", width + "%");
|
|
||||||
|
|
||||||
if (width > 97) {
|
|
||||||
progressBar.css("-khtml-border-top-right-radius", "7px");
|
|
||||||
progressBar.css("border-top-right-radius", "7px");
|
|
||||||
progressBar.css("-moz-border-top-right-radius", "7px");
|
|
||||||
progressBar.css("-webkit-border-top-right-radius", "7px");
|
|
||||||
|
|
||||||
progressBar.css("-khtml-border-bottom-right-radius", "7px");
|
|
||||||
progressBar.css("border-bottom-right-radius", "7px");
|
|
||||||
progressBar.css("-moz-border-bottom-right-radius", "7px");
|
|
||||||
progressBar.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;
|
|
||||||
}
|
}
|
||||||
|
p, h1, form, button{border:0; margin:0; padding:0;}*/
|
||||||
/* apply curves to the progress bar */
|
.spacer{clear:both; height:1px;}
|
||||||
.progress
|
/* ----------- My Form ----------- */
|
||||||
{
|
.myform{
|
||||||
-khtml-border-top-left-radius:7px;
|
margin:0 auto;
|
||||||
border-top-left-radius:7px;
|
width:400px;
|
||||||
-moz-border-top-left-radius:7px;
|
padding:14px;
|
||||||
-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 */
|
/* ----------- stylized ----------- */
|
||||||
.progressbar div.progress
|
#stylized{
|
||||||
{
|
border:solid 2px #b7ddf2;
|
||||||
position:absolute;
|
background:#ebf4fb;
|
||||||
width:0;
|
|
||||||
height:100%;
|
|
||||||
overflow:hidden;
|
|
||||||
background-color:#065EFE;
|
|
||||||
}
|
}
|
||||||
/* text on bar */
|
#stylized h1 {
|
||||||
.progressbar div.progress .progressText{
|
font-size:14px;
|
||||||
position:absolute;
|
font-weight:bold;
|
||||||
text-align:center;
|
margin-bottom:8px;
|
||||||
color:white;
|
|
||||||
}
|
}
|
||||||
|
#stylized p{
|
||||||
/* text off bar */
|
font-size:11px;
|
||||||
.progressbar div.progressText{
|
color:#666666;
|
||||||
position:absolute;
|
margin-bottom:20px;
|
||||||
width:100%;
|
border-bottom:solid 1px #b7ddf2;
|
||||||
height:100%;
|
padding-bottom:10px;
|
||||||
text-align:center;
|
}
|
||||||
|
#stylized label{
|
||||||
|
display:block;
|
||||||
|
font-weight:bold;
|
||||||
|
text-align:right;
|
||||||
|
width:140px;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
#stylized .small{
|
||||||
|
color:#666666;
|
||||||
|
display:block;
|
||||||
|
font-size:11px;
|
||||||
|
font-weight:normal;
|
||||||
|
text-align:right;
|
||||||
|
width:140px;
|
||||||
|
}
|
||||||
|
#stylized input{
|
||||||
|
float:left;
|
||||||
|
font-size:12px;
|
||||||
|
padding:4px 2px;
|
||||||
|
border:solid 1px #aacfe4;
|
||||||
|
width:200px;
|
||||||
|
margin:2px 0 20px 10px;
|
||||||
|
}
|
||||||
|
#stylized button{
|
||||||
|
clear:both;
|
||||||
|
margin-left:150px;
|
||||||
|
width:125px;
|
||||||
|
height:31px;
|
||||||
|
background:#666666 url(img/button.png) no-repeat;
|
||||||
|
text-align:center;
|
||||||
|
line-height:31px;
|
||||||
|
color:#FFFFFF;
|
||||||
|
font-size:11px;
|
||||||
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="progressbar" class="progressbar">
|
<div id="stylized" class="myform">
|
||||||
<div class="progressText"></div>
|
<form id="form" name="form" method="post">
|
||||||
<div class="progress">
|
<fieldset>
|
||||||
<span class="progressText" style="width: 125px;"></span>
|
<h1>Sign-up form</h1>
|
||||||
</div>
|
<p>This is the basic look of my form without table</p>
|
||||||
</div>
|
|
||||||
|
<label>Name
|
||||||
<div id="progressbar2" class="progressbar">
|
<span class="small">Add your name</span>
|
||||||
<div class="progressText"></div>
|
</label>
|
||||||
<div class="progress">
|
<input type="text" name="name" id="name" />
|
||||||
<span class="progressText" style="width: 125px;"></span>
|
|
||||||
</div>
|
<label>Email
|
||||||
</div>
|
<span class="small">Add a valid address</span>
|
||||||
|
</label>
|
||||||
<script>
|
<input type="text" name="email" id="email" />
|
||||||
$(document).ready(function() {
|
|
||||||
|
<label>Password
|
||||||
progress(65, 100, 'progressbar');
|
<span class="small">Min. size 6 chars</span>
|
||||||
progress(22, 25, 'progressbar2');
|
</label>
|
||||||
|
<input type="text" name="password" id="password" />
|
||||||
});
|
|
||||||
|
<button type="submit">Sign-up</button>
|
||||||
function progress(episodes, episodeTotal, elementName) {
|
<div class="spacer"></div>
|
||||||
var counter = 0;
|
</fieldset>
|
||||||
var max = episodes + 1;
|
</form>
|
||||||
|
</div>
|
||||||
$.doTimeout(20, function () {
|
|
||||||
if (counter == max) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#" + elementName).episodeProgress(counter, episodeTotal);
|
|
||||||
counter++;
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in new issue