Ready to Launch

Developer
James Barnett
Size
10,309 Kb
Views
34,408
  1. Ready to Launch Previews
  2. Ready to Launch HTML Codes
  3. Ready to Launch CSS Codes
  4. Ready to Launch JS Codes

How do I make an ready to launch?

What is a ready to launch? How do you make a ready to launch? This script and codes were developed by James Barnett on 12 June 2022, Sunday.

Ready to Launch Previews
IQ Test

Ready to Launch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ready to Launch</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://yui.yahooapis.com/pure/0.3.0/buttons-min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*************** Resets ***************/
ul, li { list-style: none; }
h1, h2, div, ul, li, a, input, label, textarea, fieldset { margin: 0; padding: 0;
}
/*************** Containers ***************/
body { background: url(http://subtlepatterns.com/patterns/paper_fibers.png); }
/* container has an ID instead of a class has a hack in case extra specificity is needed in a selector */
#container { margin: auto; padding-left: 75px; padding-top: 0px; width: 900px;
}
.details { margin-left: 150px; }
fieldset.list { border: none; }
.footer { height: 70px; padding-top: 20px; clear: both;
}
/*************** Lined Paper ***************/
.pad { color: #444; background-color: #e1e9a0; width: 775px; box-shadow: 10px 3px 20px #999;
}
.pad-header { margin-top: 20px; height: 70px; width: 775px; background-color: #623B18; box-shadow: 10px 3px 20px #999;
}
.page { float: left; width: 775px; box-shadow: 10px 3px 20px #999;
}
/* add extra line to top of pad*/
h2 ~ ul, h2, .pad-container { background: -webkit-linear-gradient(#6496b9, #e1e9a0 2px); background: -moz-linear-gradient(#6496b9, #e1e9a0 2px); background: linear-gradient(#6496b9, #e1e9a0 2px); background-size: 90px 30px;
}
h2 + ul { padding-bottom: 30px; }
.top { padding-top: 30px; }
.pad-container { min-height: 900px; padding-bottom: 30px;
}
/* lines for list items */
h2 { padding-left: 50px; }
h2 ~ ul { padding-left: 10px; padding-right: 30px;
}
input[type=checkbox] + label:hover { background-color: #E4F9AC; opacity: 0.6;
}
/*************** Arrow Icons **************/
/* expand click target for toggle to include arrow icon */
[class*="icon"].arrow-down { margin-right: 12px; }
[class*="toggle"] { padding-left: 4px; }
.arrow-right { width: 20px; }
.arrow-right { display:inline-block; position: relative; top: -2px; left: 0px; border-bottom: 9px solid transparent; border-top: 9px solid transparent; border-left: 9px solid #383838;
}
.arrow-down { display:inline-block; position: relative; top: -5px; left: -3px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #383838;
}
/*************** Checkboxes ***************/
/* to hide the checkbox itself */
input[type=checkbox] { display:none; position: relative;
}
input[type=checkbox] + label { padding: 0 10px; border-radius: 5px;
}
input[type=checkbox] + label:before, input[type=checkbox]:checked + label:before { font-family: FontAwesome; display: inline-block; vertical-align: middle; line-height: 1em; font-size: 24px;
}
/* checkbox w/ space for the checkbox */
input[type=checkbox] + label:before { content: "\f096 "; letter-spacing: 20px;
}
input[type=checkbox]:checked + label:before { content: "\f046"; letter-spacing: 7px;
}
/*************** Mark as N/A **************/
h2 + ul li { position: relative; padding-left: 65px;
}
span[class*="na"] { visibility: hidden; }
input:disabled + label, h2 + ul li:hover > span[class*="na"], .icon-comment { color: rgba(71,71,71,0.5); }
/* postion & style N/A button */
h2 + ul li:hover > span[class*="na"] { visibility: visible; position: absolute; left: 25px; top: 4px; padding: 0 5px; line-height: 1.5em; font-size: 0.75em; cursor: pointer;
}
/* replace checkbox w/ "n/a" */
input:disabled + label:before { display: inline-block; margin: 3px 15px 5px -3px; font-size: 16px; letter-spacing: -2px; content:"N/A";
}
/*************** Comment Box **************/
.comment-box { display: none; }
div[class*="comment"] label { margin-left: 10px;}
[class*="comment"] textarea {	width: 600px;	height: 90px; margin: 13px 0 13px 25px; background: #E0E0E0;
}
.icon-comment { display: none; }
.comment-present .icon-comment { color: rgba(71,71,71,1); }
h2 + ul li:hover .icon-comment, .comment-present .icon-comment { display: inline-block; position: absolute; left: 3px; top: 4px; padding: 0 5px; line-height: 1.5em; font-size: 0.75em; cursor: pointer;
}
[class*='comment-characterLeft'] { display: inline-block; margin: 0 0 30px 25px;
}
/*************** Section Complete Check **************/
h2 { position: relative; }
.top .complete:before { top: 34px;}
.complete:before { position: absolute; top: 5px; left: 15px; font-family: FontAwesome; font-size: 24px; line-height: 1em; content: "\f058"; color: green; opacity: 0.5;
}
/*************** Progress Bar ***************/
.ui-progressbar-value { background: #6496b9; }
.progressbar-container { position: fixed; bottom: 0; left: 0; width: 100%; border-radius: 0;
}
.progressbar-bar { height: 25px; background: #ccc; opacity: .8; background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); border: none;
}
.progressbar-label { position: absolute; top: 0px; left: 45%; z-index: 2;
}
/* reset button */
.footer .reset { position: fixed; bottom: 40px; right: 25px; font-size: 22px; padding: 3px 15px; background: #ABC6D9;
}
/*************** Typography ***************/
h1 { font-size: 75px; color: #6496b9;
}
h1 ~ div { font-size: 26px; line-height: 26px;
}
body { font-size: 22px; }
h2, a:link, a:visited { font-size: 30px; }
h2, a:link, a:visited, li { line-height: 30px; }
h1, h2 { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
h2, a:link, a:visited, body { color: #474747; }
a:link, a:visited { text-decoration: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id = "container"> <div class = "header"> <h1>Ready to Launch</h1> <div>A checklist of launching your next website</div> </div> <form> <div class = "pad-header"></div> <div class = "pad"> <div class = "page"> <fieldset class = "list"> <ul class = "pad-container"> <li> <h2 class = "top"><span class = "exp-complete complete"></span><a href="#" class="toggle_exp"><span class = "exp-icon"></span>Experience Related</a></h2> <ul class = "exp"> <li> <input id="exp1" name="exp1" type="checkbox" /> <label for = "exp1">Images have appropriate alt text</label> <span class = "exp1-na">N/A</span> <div class = "exp1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="exp1-comment-textbox" maxlength="250"></textarea>	<span class="exp1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="exp2" name="exp2" type="checkbox" /> <label for = "exp2">No Instances of "click here" for links</label> <span class = "exp2-na">N/A</span> <div class = "exp2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="exp2-comment-textbox" maxlength="250"></textarea>	<span class="exp2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="exp3" name="exp3" type="checkbox" /> <label for = "exp3">All delete actions require confirmation</label> <span class = "exp3-na">N/A</span> <div class = "exp3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="exp3-comment-textbox" maxlength="250"></textarea>	<span class="exp3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="exp4" name="exp4" type="checkbox" /> <label for = "exp4">Touch targets are a minimum of 45 pixels wide</label> <span class = "exp4-na">N/A</span> <div class = "exp4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="exp4-comment-textbox" maxlength="250"></textarea>	<span class="exp4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "content-complete complete"></span><a href="#" class="toggle_content"><span class = "content-icon"></span>Content</a></h2> <ul class = "content"> <li> <input id="content1" name="content1" type="checkbox" /> <label for = "content1">Site content has been proofread for typos</label> <span class = "content1-na">N/A</span> <div class = "content1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="comment1-comment-textbox" maxlength="250"></textarea>	<span class="comment1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="content2" name="content2" type="checkbox" /> <label for = "content2">There is no test copy remaining on the site</label> <span class = "content2-na">N/A</span> <div class = "content2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="content2-comment-textbox" maxlength="250"></textarea>	<span class="content2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="content3" name="content3" type="checkbox" /> <label for = "content3">Phone numbers & addresses have been verified</label> <span class = "content3-na">N/A</span> <div class = "content3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="content3-comment-textbox" maxlength="250"></textarea>	<span class="content3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "brand-complete complete"></span><a href="#" class="toggle_brand"><span class = "brand-icon"></span>Branding</a></h2> <ul class = "brand"> <li> <input id="brand1" name="brand1" type="checkbox" /> <label for = "brand1">The site has a working favicon</label> <span class = "brand1-na">N/A</span> <div class = "brand1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="brand1-comment-textbox" maxlength="250"></textarea>	<span class="brand1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="brand2" name="brand2" type="checkbox" /> <label for = "brand2">The footer section has legal info</label> <span class = "brand2-na">N/A</span> <div class = "brand2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="brand2-comment-textbox" maxlength="250"></textarea>	<span class="brand2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="brand3" name="brand3" type="checkbox" /> <label for = "brand3">Title includes domain at the end (e.g. - domain.com)</label> <span class = "brand3-na">N/A</span> <div class = "brand3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="rand3-comment-textbox" maxlength="250"></textarea>	<span class="brand3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "seo-complete complete"></span><a href="#" class="toggle_seo"><span class = "seo-icon"></span>SEO</a></h2> <ul class ="seo"> <li> <input id="seo1" name="seo1" type="checkbox" /> <label for = "seo1">Setup on traffic analysis package</label> <span class = "seo1-na">N/A</span> <div class = "seo1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="seo1-comment-textbox" maxlength="250"></textarea>	<span class="seo1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="seo2" name="seo2" type="checkbox" /> <label for = "seo2">Up-to-date sitemap submitted to Google</label> <span class = "seo2-na">N/A</span> <div class = "seo2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="seo2-comment-textbox" maxlength="250"></textarea>	<span class="seo2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="seo3" name="seo3" type="checkbox" /> <label for = "seo3">H1 & Meta title attributes are descriptive and SEO friendly</label> <span class = "seo3-na">N/A</span> <div class = "seo3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="seo3-comment-textbox" maxlength="250"></textarea>	<span class="seo3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="seo4" name="seo4" type="checkbox" /> <label for = "seo4">Meta descriptions attributes are SEO friendly</label> <span class = "seo4-na">N/A</span> <div class = "seo4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="seo4-comment-textbox" maxlength="250"></textarea>	<span class="seo4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "val-complete complete"></span><a href="#" class="toggle_val"><span class = "val-icon"></span>Validation</a></h2> <ul class = "val"> <li> <input id="val1" name="val1" type="checkbox" /> <label for = "val1">W3C Markup validated</label> <span class = "val1-na">N/A</span> <div class = "val1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="val1-comment-textbox" maxlength="250"></textarea>	<span class="val1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="val2" name="val2" type="checkbox" /> <label for = "val2">CSS files linted</label> <span class = "val2-na">N/A</span> <div class = "val2-comment"> <span class = "icon-comment"></span> <div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div> </div> </li> <li> <input id="val3" name="val3" type="checkbox" /> <label for = "val3">No broken links found</label> <span class = "val3-na">N/A</span> <div class = "val3-comment"> <span class = "icon-comment"></span> <div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div> </div> </li> <li> <input id="val4" name="val4" type="checkbox" /> <label for = "val4">JavaScript is error-free</label> <span class = "val4-na">N/A</span> <div class = "val4-comment"> <span class = "icon-comment"></span> <div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div> </div> </li> </ul> <h2><span class = "testing-complete complete"></span><a href="#" class="toggle_testing"><span class = "testing-icon"></span>Cross Browser Testing</a></h2> <ul class = "testing"> <li> <input id="testing1" name="testing1" type="checkbox" /> <label for = "testing1">Chrome (on Windows & OS X)</label> <span class = "testing1-na">N/A</span> <div class = "testing1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing1-comment-textbox" maxlength="250"></textarea>	<span class="testing1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="testing2" name="testing2" type="checkbox" /> <label for = "testing2">Firefox (on Windows & OS X)</label> <span class = "testing2-na">N/A</span> <div class = "testing2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing2-comment-textbox" maxlength="250"></textarea>	<span class="testing2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="testing3" name="testing3" type="checkbox" /> <label for = "testing3">Safari (on OS X)</label> <span class = "testing3-na">N/A</span> <div class = "testing3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing3-comment-textbox" maxlength="250"></textarea>	<span class="testing3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="testing4" name="testing4" type="checkbox" /> <label for = "testing4">Internet Explorer 9</label> <span class = "testing4-na">N/A</span> <div class = "testing4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing4-comment-textbox" maxlength="250"></textarea>	<span class="testing4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="testing5" name="testing5" type="checkbox" /> <label for = "testing5">Internet Explorer 8</label> <span class = "testing5-na">N/A</span> <div class = "testing5-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing5-comment-textbox" maxlength="250"></textarea>	<span class="testing5-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="testing6" name="testing6" type="checkbox" /> <label for = "testing6">Internet Explorer 7</label> <span class = "testing6-na">N/A</span> <div class = "testing6-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing6-comment-textbox" maxlength="250"></textarea>	<span class="testing6-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="testing7" name="testing7" type="checkbox" /> <label for = "testing7">Font stack has been tested on Windows & OS X</label> <span class = "testing7-na">N/A</span> <div class = "testing7-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="testing7-comment-textbox" maxlength="250"></textarea>	<span class="testing7-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "rwd-complete complete"></span><a href="#" class="toggle_rwd"><span class = "rwd-icon"></span>Responsive Design Testing</a></h2> <ul class = "rwd"> <li> <input id="rwd1" name="rwd1" type="checkbox" /> <label for = "rwd1">Tested at 1366 x 768</label> <span class = "rwd1-na">N/A</span> <div class = "rwd1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="rwd1-comment-textbox" maxlength="250"></textarea>	<span class="rwd1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="rwd2" name="rwd2" type="checkbox" /> <label for = "rwd2">Tested at 1024 x 768</label> <span class = "rwd2-na">N/A</span> <div class = "rwd2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="rwd2-comment-textbox" maxlength="250"></textarea>	<span class="rwd2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="rwd3" name="rwd3" type="checkbox" /> <label for = "rwd3">Tested at 320 x 480</label> <span class = "rwd3-na">N/A</span> <div class = "rwd3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="rwd3-comment-textbox" maxlength="250"></textarea>	<span class="rwd3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="rwd4" name="rwd4" type="checkbox" /> <label for = "rwd4">Test your design at the most common resolutions</label> <span class = "rwd4-na">N/A</span> <div class = "rwd4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="rwd4-comment-textbox" maxlength="250"></textarea>	<span class="rwd4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "perf-complete complete"></span><a href="#" class="toggle_perf"><span class = "perf-icon"></span>Performance</a></h2> <ul class = "perf"> <li> <input id="perf1" name="perf1" type="checkbox" /> <label for="perf1">Page load time has been tested</label> <span class = "perf1-na">N/A</span> <div class = "perf1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="perf1-comment-textbox" maxlength="250"></textarea>	<span class="perf1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="perf2" name="perf2" type="checkbox" /> <label for="perf2">Site images are optimize for the web</label> <span class = "perf2-na">N/A</span> <div class = "perf2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="perf2-comment-textbox" maxlength="250"></textarea>	<span class="perf2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="perf3" name="perf3" type="checkbox" /> <label for="perf3">JavaScript, CSS, HTML files are minified</label> <span class = "perf3-na">N/A</span> <div class = "perf3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="perf3-comment-textbox" maxlength="250"></textarea>	<span class="perf3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "worst-complete complete"></span><a href="#" class="toggle_worst"><span class = "worst-icon"></span>Testing for the worst case scenario</a></h2> <ul class = "worst"> <li> <input id="worst1" name="worst1" type="checkbox" /> <label for="worst1">JavaScript turned off</label> <span class = "worst1-na">N/A</span> <div class = "worst1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="worst1-comment-textbox" maxlength="250"></textarea>	<span class="worst1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="worst2" name="worst2" type="checkbox" /> <label for="worst2">Images turned off</label> <span class = "worst2-na">N/A</span> <div class = "worst2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="worst2-comment-textbox" maxlength="250"></textarea>	<span class="worst2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="worst3" name="worst3" type="checkbox" /> <label for="worst3">CSS turned off</label> <span class = "worst3-na">N/A</span> <div class = "worst3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="worst3-comment-textbox" maxlength="250"></textarea>	<span class="worst3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="worst4" name="worst4" type="checkbox" /> <label for="worst4">Flash turned off</label> <span class = "worst4-na">N/A</span> <div class = "worst4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="worst4-comment-textbox" maxlength="250"></textarea>	<span class="worst4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="worst5" name="worst5" type="checkbox" /> <label for="worst5">QuickTime and other plugins turned off</label> <span class = "worst5-na">N/A</span> <div class = "worst5-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="worst5-comment-textbox" maxlength="250"></textarea>	<span class="worst5-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="worst6" name="worst6" type="checkbox" /> <label for="worst6">Fallback style sheet is setup</label> <span class = "worst6-na">N/A</span> <div class = "worst6-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="worst6-comment-textbox" maxlength="250"></textarea>	<span class="worst6-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "forms-complete complete"></span><a href="#" class="toggle_forms"><span class = "forms-icon"></span>Forms</a></h2> <ul class = "forms"> <li> <input id="forms1" name="forms1" type="checkbox" /> <label for="forms1">Inline help has been added where needed</label> <span class = "forms1-na">N/A</span> <div class = "forms1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="forms1-comment-textbox" maxlength="250"></textarea>	<span class="forms1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="forms2" name="forms2" type="checkbox" /> <label for="forms2">Forms use HTML5 validation to highlight invalid fields</label> <span class = "forms2-na">N/A</span> <div class = "forms2-comment"> <span class = "icon-comment"></span> <<div class = "comment-box">	<label>Comments:</label>	<textarea class="forms2-comment-textbox" maxlength="250"></textarea>	<span class="forms2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="forms3" name="forms3" type="checkbox" /> <label for="forms3">Forms data is checked via server-side validation</label> <span class = "forms3-na">N/A</span> <div class = "forms3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="forms3-comment-textbox" maxlength="250"></textarea>	<span class="forms3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="forms4" name="forms4" type="checkbox" /> <label for="forms4">All submit functions redirect to a thank you page</label> <span class = "forms4-na">N/A</span> <div class = "forms4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="forms4-comment-textbox" maxlength="250"></textarea>	<span class="forms4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "contact-complete complete"></span><a href="#" class="toggle_contact"><span class = "contact-icon"></span>Contact the admins</a></h2> <ul class = "contact"> <li> <input id="contact1" name="contact1" type="checkbox" /> <label for="contact1">A test message has been sent and a reply received</label> <span class = "contact1-na">N/A</span> <div class = "contact1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="contact1-comment-textbox" maxlength="250"></textarea>	<span class="contact1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="contact2" name="contact2" type="checkbox" /> <label for="contact2">Setup an email address for <i>[email protected]</i></label> <span class = "contact2-na">N/A</span> <div class = "contact2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="contact2-comment-textbox" maxlength="250"></textarea>	<span class="contact2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "error-complete complete"></span><a href="#" class="toggle_error"><span class = "error-icon"></span>Error Messages</a></h2> <ul class = "error"> <li> <input id="error1" name="error1" type="checkbox" /> <label for = "error1">Error pages are setup that are both helpful and branded</label> <span class = "error1-na">N/A</span> <div class = "error1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="error1-comment-textbox" maxlength="250"></textarea>	<span class="error1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="error2" name="error2" type="checkbox" /> <label for = "error2">Include pages: 402, 404, 500</label> <span class = "error2-na">N/A</span> <div class = "error2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="error2-comment-textbox" maxlength="250"></textarea>	<span class="error2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="error3" name="error5" type="checkbox" /> <label for = "error3">Server-side code serves branded error pages</label> <span class = "error3-na">N/A</span> <div class = "error3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="error3-comment-textbox" maxlength="250"></textarea>	<span class="error3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> <h2><span class = "prod-complete complete"></span><a href="#" class="toggle_prod"><span class = "prod-icon"></span>Production Ready</a></h2> <ul class = "prod"> <li> <input id="prod1" name="prod1" type="checkbox" /> <label for = "prod1">The site is backed up</label> <span class = "prod1-na">N/A</span> <div class = "prod1-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod1-comment-textbox" maxlength="250"></textarea>	<span class="prod1-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="prod2" name="prod2" type="checkbox" /> <label for = "prod2">Server-side reporting has been turned off</label> <span class = "prod2-na">N/A</span> <div class = "prod2-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod2-comment-textbox" maxlength="250"></textarea>	<span class="prod2-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="prod3" name="prod3" type="checkbox" /> <label for = "prod3">Indexes are disabled via .htaccess file</label> <span class = "prod3-na">N/A</span> <div class = "prod3-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod3-comment-textbox" maxlength="250"></textarea>	<span class="prod3-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="prod4" name="prod4" type="checkbox" /> <label for = "prod4">Robots.txt has been setup</label> <span class = "prod4-na">N/A</span> <div class = "prod4-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod4-comment-textbox" maxlength="250"></textarea>	<span class="prod4-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="prod5" name="prod5" type="checkbox" /> <label for = "prod5">Site is setup on a monitoring service</label> <span class = "prod5-na">N/A</span> <div class = "prod5-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod5-comment-textbox" maxlength="250"></textarea>	<span class="prod5-comment-characterLeft">250 Characters Max</span>	</div><div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div> </div> </li> <li> <input id="prod6" name="prod6" type="checkbox" /> <label for = "prod6">Site is setup Website defender</label> <span class = "prod6-na">N/A</span> <div class = "prod6-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod6-comment-textbox" maxlength="250"></textarea>	<span class="prod6-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> <li> <input id="prod7" name="prod7" type="checkbox" /> <label for = "prod7">All site-related accounts have complex passwords</label> <span class = "prod7-na">N/A</span> <div class = "prod7-comment"> <span class = "icon-comment"></span> <div class = "comment-box">	<label>Comments:</label>	<textarea class="prod7-comment-textbox" maxlength="250"></textarea>	<span class="prod7-comment-characterLeft">250 Characters Max</span>	</div> </div> </li> </ul> </li> </ul> </fieldset> </div> </div> </form> <div class = "footer"> <a class="pure-button reset" href="#">Reset</a> <div class = "ready"></div> <div class="progressbar-container"> <div class="progressbar-bar"></div> <div class="progressbar-label"></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ready to Launch - Script Codes CSS Codes

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*************** Resets ***************/
ul, li { list-style: none; }
h1, h2, div, ul, li, a, input, label, textarea, fieldset { margin: 0; padding: 0;
}
/*************** Containers ***************/
body { background: url(http://subtlepatterns.com/patterns/paper_fibers.png); }
/* container has an ID instead of a class has a hack in case extra specificity is needed in a selector */
#container { margin: auto; padding-left: 75px; padding-top: 0px; width: 900px;
}
.details { margin-left: 150px; }
fieldset.list { border: none; }
.footer { height: 70px; padding-top: 20px; clear: both;
}
/*************** Lined Paper ***************/
.pad { color: #444; background-color: #e1e9a0; width: 775px; box-shadow: 10px 3px 20px #999;
}
.pad-header { margin-top: 20px; height: 70px; width: 775px; background-color: #623B18; box-shadow: 10px 3px 20px #999;
}
.page { float: left; width: 775px; box-shadow: 10px 3px 20px #999;
}
/* add extra line to top of pad*/
h2 ~ ul, h2, .pad-container { background: -webkit-linear-gradient(#6496b9, #e1e9a0 2px); background: -moz-linear-gradient(#6496b9, #e1e9a0 2px); background: linear-gradient(#6496b9, #e1e9a0 2px); background-size: 90px 30px;
}
h2 + ul { padding-bottom: 30px; }
.top { padding-top: 30px; }
.pad-container { min-height: 900px; padding-bottom: 30px;
}
/* lines for list items */
h2 { padding-left: 50px; }
h2 ~ ul { padding-left: 10px; padding-right: 30px;
}
input[type=checkbox] + label:hover { background-color: #E4F9AC; opacity: 0.6;
}
/*************** Arrow Icons **************/
/* expand click target for toggle to include arrow icon */
[class*="icon"].arrow-down { margin-right: 12px; }
[class*="toggle"] { padding-left: 4px; }
.arrow-right { width: 20px; }
.arrow-right { display:inline-block; position: relative; top: -2px; left: 0px; border-bottom: 9px solid transparent; border-top: 9px solid transparent; border-left: 9px solid #383838;
}
.arrow-down { display:inline-block; position: relative; top: -5px; left: -3px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #383838;
}
/*************** Checkboxes ***************/
/* to hide the checkbox itself */
input[type=checkbox] { display:none; position: relative;
}
input[type=checkbox] + label { padding: 0 10px; border-radius: 5px;
}
input[type=checkbox] + label:before, input[type=checkbox]:checked + label:before { font-family: FontAwesome; display: inline-block; vertical-align: middle; line-height: 1em; font-size: 24px;
}
/* checkbox w/ space for the checkbox */
input[type=checkbox] + label:before { content: "\f096 "; letter-spacing: 20px;
}
input[type=checkbox]:checked + label:before { content: "\f046"; letter-spacing: 7px;
}
/*************** Mark as N/A **************/
h2 + ul li { position: relative; padding-left: 65px;
}
span[class*="na"] { visibility: hidden; }
input:disabled + label, h2 + ul li:hover > span[class*="na"], .icon-comment { color: rgba(71,71,71,0.5); }
/* postion & style N/A button */
h2 + ul li:hover > span[class*="na"] { visibility: visible; position: absolute; left: 25px; top: 4px; padding: 0 5px; line-height: 1.5em; font-size: 0.75em; cursor: pointer;
}
/* replace checkbox w/ "n/a" */
input:disabled + label:before { display: inline-block; margin: 3px 15px 5px -3px; font-size: 16px; letter-spacing: -2px; content:"N/A";
}
/*************** Comment Box **************/
.comment-box { display: none; }
div[class*="comment"] label { margin-left: 10px;}
[class*="comment"] textarea {	width: 600px;	height: 90px; margin: 13px 0 13px 25px; background: #E0E0E0;
}
.icon-comment { display: none; }
.comment-present .icon-comment { color: rgba(71,71,71,1); }
h2 + ul li:hover .icon-comment, .comment-present .icon-comment { display: inline-block; position: absolute; left: 3px; top: 4px; padding: 0 5px; line-height: 1.5em; font-size: 0.75em; cursor: pointer;
}
[class*='comment-characterLeft'] { display: inline-block; margin: 0 0 30px 25px;
}
/*************** Section Complete Check **************/
h2 { position: relative; }
.top .complete:before { top: 34px;}
.complete:before { position: absolute; top: 5px; left: 15px; font-family: FontAwesome; font-size: 24px; line-height: 1em; content: "\f058"; color: green; opacity: 0.5;
}
/*************** Progress Bar ***************/
.ui-progressbar-value { background: #6496b9; }
.progressbar-container { position: fixed; bottom: 0; left: 0; width: 100%; border-radius: 0;
}
.progressbar-bar { height: 25px; background: #ccc; opacity: .8; background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); border: none;
}
.progressbar-label { position: absolute; top: 0px; left: 45%; z-index: 2;
}
/* reset button */
.footer .reset { position: fixed; bottom: 40px; right: 25px; font-size: 22px; padding: 3px 15px; background: #ABC6D9;
}
/*************** Typography ***************/
h1 { font-size: 75px; color: #6496b9;
}
h1 ~ div { font-size: 26px; line-height: 26px;
}
body { font-size: 22px; }
h2, a:link, a:visited { font-size: 30px; }
h2, a:link, a:visited, li { line-height: 30px; }
h1, h2 { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
h2, a:link, a:visited, body { color: #474747; }
a:link, a:visited { text-decoration: none; }

Ready to Launch - Script Codes JS Codes

$(document).ready(function(){ /* for testing purposes only */ /*$('input[id*=exp], input[id*=content]').attr('checked', true); $('input').attr('checked', true);*/ $(".content, .brand, .seo, .val, .testing, .rwd, .perf, .worst, .forms, .contact, .error, .prod").hide(); /* intialize icons */ $(".content-icon, .brand-icon, .seo-icon, .val-icon, .testing-icon, .rwd-icon, .perf-icon, .worst-icon, .forms-icon, .contact-icon, .error-icon, .prod-icon").toggleClass("arrow-right"); $(".exp-icon").toggleClass("arrow-down"); /*************** toggle sections ***************/ function toggleSection(sectionChoice){ var action = ".toggle_" + sectionChoice; var icon = "." + sectionChoice + "-icon"; var section = "." + sectionChoice; $(action).click(function(){ $(icon).toggleClass("arrow-right"); $(icon).toggleClass("arrow-down"); $(section).slideToggle(); return false; }); } toggleSection("exp"); toggleSection("content"); toggleSection("brand"); toggleSection("seo"); toggleSection("val"); toggleSection("testing"); toggleSection("rwd"); toggleSection("perf"); toggleSection("worst"); toggleSection("forms"); toggleSection("contact"); toggleSection("error"); toggleSection("prod"); /*************** count sections ***************/ var count = 0; var checked = 0; function countBoxes() { return $("input[type='checkbox']:enabled").length; } function countChecked() { checked = $("input[type='checkbox']:checked").length; count = countBoxes(); console.log("boxes: " + count); console.log("checked: " + checked); var percentage = parseInt(((checked / count) * 100), 10); $(".progressbar-bar").progressbar({ value: percentage }); $(".progressbar-label").text(percentage + "% Complete"); if (count === checked) { $(".ready").text('Ready to Launch!'); } else { $(".ready").text(''); } markComplete("exp"); markComplete("content"); markComplete("brand"); markComplete("seo"); markComplete("val"); markComplete("testing"); markComplete("rwd"); markComplete("perf"); markComplete("worst"); markComplete("forms"); markComplete("contact"); markComplete("error"); markComplete("prod"); } $(":checkbox").click(countBoxes); countChecked(); $(":checkbox").click(countChecked); /* mark section completed */ function countBoxesInSection(section) { answer = $("input[type='checkbox'][name*='" + section + "']:enabled").length; console.log("boxes in section: " + answer); return answer; } function countCheckedInSection(section) { answer = $("input:checked[name*='" + section + "']").length; console.log("checked in section: " + answer); return answer; } function markComplete(section) { if (countBoxesInSection(section) === countCheckedInSection(section)) { $("." + section +"-complete").addClass("complete"); } else { $("." + section +"-complete").removeClass("complete"); } } /* reset all checks*/ $( ".reset" ).click(function() { $('input').attr('checked', false); $('input').attr('disabled', false); countChecked(); }); /* mark as N/A */ /* If checkbox doesn't have class "na" then disable checkbox and add the class. If checkbox currently has class "na" then checkbox is currently disabled, re-enable it and remove the class */ $( "span[class*='na']" ).click(function() { if ($( this ).hasClass( "na" ) !== true) { $(this).addClass("na"); $(this).siblings( "input" ).attr("disabled", true); $(this).siblings( "input" ).attr("checked", false); } else { $(this).siblings( "input" ).attr("disabled", false); $(this).removeClass("na"); } countChecked(); }); /* comment box */ $( "div[class*='comment'] .icon-comment" ).click(function() { $( this ).siblings(".comment-box").slideToggle(); }); /* comment box character count */ /* based on: http://www.findsourcecode.com/jquery/how-to-count-number-of-characters-in-textarea-jquery/ */ var charMax = 250; $("[class*='comment-textbox']").keyup(function () { var textLength = $(this).val().length; var charLeft = $(this).siblings("[class*='characterLeft']"); if (textLength >= charMax) { $(charLeft).text('You have reached the limit of ' + charMax + ' characters'); } else { var count = charMax - textLength; $(charLeft).text(count + ' Characters Left'); } /* show comment icon when comment is present */ var currentComment = $(this).parents("div[class*='-comment']"); if (textLength > 0 ) { $(currentComment).addClass("comment-present"); } else { $(currentComment).removeClass("comment-present"); } });
});
Ready to Launch - Script Codes
Ready to Launch - Script Codes
Home Page Home
Developer James Barnett
Username jamesbarnett
Uploaded June 12, 2022
Rating 3
Size 10,309 Kb
Views 34,408
Do you need developer help for Ready to Launch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Barnett (jamesbarnett) Script Codes
Name
Simple JSON Example
Demo of the US Map jQuery plugin
Github-style Daily Activity Chart
Change font size using JQuery
Browser hack for Firefox
Extremely simple loading animation
Pure CSS Star Rating Widget
List.js Demo
Progress bar for counting checkboxes
Piet Mondrian Composition II
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!