Skip to content

Instantly share code, notes, and snippets.

@minordv8

minordv8/index.html

Created August 14, 2014 22:38
Show Gist options
  • Save minordv8/8ce9415f835361c6d84b to your computer and use it in GitHub Desktop.
Save minordv8/8ce9415f835361c6d84b to your computer and use it in GitHub Desktop.
Download ZIP
loading data into select // source http://jsbin.com/qefod/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="loading data into select" />
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body, html {
background: none repeat scroll 0 0 #fff;
font-family: "Arial Narrow", Arial, sans-serif;
}
.sprite {
background-image: url(http://23.253.78.229/edu-mobile/assets/degree-council/sprite.png);
background-attachment: scroll;
background-repeat: no-repeat;
display: inline-block;
}
.dark-teal {
background-color: #39697f;
}
.text-center {
text-align: center;
}
/* Header Layout Styles */
nav {
background-color: #fff;
}
nav .top-logo {
background-position: 0 0;
width: 150px;
height: 65px;
}
nav .top-phone {
text-decoration: none;
font-size: 14px;
padding: 0px 20px;
margin: 20px 0px 0 0 !important;
line-height: 30px;
color: #000;
}
nav .top-phone:hover {
text-decoration: none;
}
/* Header Layout Styles */
/* Main Body Content Styles */
.body {
padding-top: 70px;
}
.body .top-lock {
width: 24px;
height: 24px;
text-align: center;
border-radius: 12px;
position: fixed;
top: 75px;
left: 5px;
border: 1px solid #fff;
z-index: 10;
}
.body .top-lock .fa-lock {
font-size: 16px;
color: #fff;
vertical-align: middle;
line-height: 20px;
}
.body .content {
background-color: #39697f;
min-height: 400px;
margin-left: 0 !important;
color: #fff;
}
.body .content a.caption {
color: #fff !important;
}
.body .content a.caption:visited {
color: #fff !important;
}
.body .content .center-block {
padding: 10px;
}
.body .content .center-block h2 {
margin: 0px auto;
font-size: 22px;
}
.body .content .center-block .caption {
font-size: 12px;
clear: both;
}
.body .content .center-block .single-step {
margin: 20px 0 150px 0;
}
.body #progress {
width: 100%;
margin: 0;
clear: both;
}
.body #progress .progress {
background-color: #000;
border-radius: 0 !important;
background-image: none;
}
.body #progress .progress.progress-solid {
margin: 0;
}
.body #progress .progress.progress-solid .bar {
background-color: #1aa79c;
background-image: linear-gradient(rgba(255, 255, 255, 0) 0%);
height: 100%;
}
.body #progress .progress.progress-solid.active .bar {
animation: 1s linear 0s normal none infinite progress-bar-color !important;
}
.body .lower {
margin: 0;
}
.body .lower .links {
margin: 10px auto;
}
.body .lower .links a {
display: inline-block;
padding: 0 5px;
color: #000;
text-decoration: underline;
}
.body .lower .copy {
margin: 10px auto;
}
/* Footer Layout Styles */
footer h4 {
font-weight: 200;
}
.row-fluid .span3 {
margin-left: 20px;
width: 24%;
}
.selectpicker li {
text-align: left;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="row">
<div class="col-md-12 col-xs-12 navbar-header">
<div class="col-md-6 col-xs-6">
<a class="top-logo sprite"></a>
</div>
<div class="col-md-6 col-xs-6">
<button class="btn btn-link btn-large top-phone pull-right">(855) 216-0165</button>
</div>
</div>
</div>
</nav>
<section class="body row">
<div class="ui-corner-all top-lock dark-teal"><i class="fa fa-lock"></i></div>
{{outlet}}
</section>
<footer class="row">
<div class="col-md-12 col-xs-12 text-center">
<h4 class="text-muted"><i class="fa fa-user"></i> Or call us (855) 216-0165</h4>
</div>
</footer>
</div>
</script>
<script type="text/x-handlebars" id="index">
<div class="col-md-12 col-xs-12 content">
<div class="text-center center-block">
<div class="col-md-12">
<span>Which of these</span>
<h2>Activities Appeal</h2>
<span>to you the most?</span>
<div class="form-group single-step">
{{view Ember.Select
prompt="Area of Study"
name="answer[3]"
id="answer_3"
class="form-control span12"
}}
</div>
</div>
</div>
<div class="text-center center-block">
<div class="form-group col-md-12 col-xs-12">
<input type="submit" value="Next" name="commit" class="btn-block btn btn-warning" {{action "step2"}}>
</div>
</div>
</div>
<div id="progress">
<div class="progress progress-solid active">
<div id="increase_status" class="bar" style="width:10%;"></div>
</div>
</div>
<div class="col-md-12 col-xs-12 lower text-center">
<button class="btn btn-link">Learn About Degree Council</button>
<h6>Schools in our network include:</h6>
<div class="col-md-3 col-xs-6">
<img src="http://23.253.78.229/edu-mobile/assets/degree-council/kaplan.gif" alt="" width="193" height="86" class="img-responsive" />
</div>
<div class="col-md-3 col-xs-6">
<img src="http://23.253.78.229/edu-mobile/assets/degree-council/everest.gif" alt="" width="193" height="86" class="img-responsive" />
</div>
<div class="col-md-3 col-xs-6">
<img src="http://23.253.78.229/edu-mobile/assets/degree-council/anthem.gif" alt="" width="193" height="86" class="img-responsive" />
</div>
<div class="col-md-3 col-xs-6">
<img src="http://23.253.78.229/edu-mobile/assets/degree-council/grand-canyon.gif" alt="" width="193" height="86" class="img-responsive" />
</div>
<div class="col-md-3 col-xs-6">
<img src="http://23.253.78.229/edu-mobile/assets/degree-council/grantham.gif" alt="" width="193" height="86" class="img-responsive" />
</div>
<div class="clearfix"></div>
<div class="links">
<a href="http://degreecouncil.org/privacy-policy/" title="Privacy Policy">Privacy Policy</a>
<a href="http://degreecouncil.org/about/" title="About Us">About Us</a>
<a href="http://degreecouncil.org/answer-center/" title="FAQs">FAQs</a>
<a href="" title="Your California Policy">Your California Policy</a>
<a href="" title="Rights">Rights</a>
<a href="http://degreecouncil.org/contact/" title="Contact Us">Contact Us</a>
<a href="" title="Unsubscribe">Unsubscribe</a>
</div>
<div class="copy">
&copy; Copyright 2014 Callsocket &ndash; All rights reserved
</div>
</div>
</script>
<script id="jsbin-javascript">
var Mobile = Ember.Application.create({
});
/** Setup the urls for the mobile screens **/
Mobile.Router.map(function(){
this.resource('index', { path: "/" });
});
</script>
</body>
</html>
Raw
jsbin.qefod.css
body, html {
background: none repeat scroll 0 0 #fff;
font-family: "Arial Narrow", Arial, sans-serif;
}
.sprite {
background-image: url(http://23.253.78.229/edu-mobile/assets/degree-council/sprite.png);
background-attachment: scroll;
background-repeat: no-repeat;
display: inline-block;
}
.dark-teal {
background-color: #39697f;
}
.text-center {
text-align: center;
}
/* Header Layout Styles */
nav {
background-color: #fff;
}
nav .top-logo {
background-position: 0 0;
width: 150px;
height: 65px;
}
nav .top-phone {
text-decoration: none;
font-size: 14px;
padding: 0px 20px;
margin: 20px 0px 0 0 !important;
line-height: 30px;
color: #000;
}
nav .top-phone:hover {
text-decoration: none;
}
/* Header Layout Styles */
/* Main Body Content Styles */
.body {
padding-top: 70px;
}
.body .top-lock {
width: 24px;
height: 24px;
text-align: center;
border-radius: 12px;
position: fixed;
top: 75px;
left: 5px;
border: 1px solid #fff;
z-index: 10;
}
.body .top-lock .fa-lock {
font-size: 16px;
color: #fff;
vertical-align: middle;
line-height: 20px;
}
.body .content {
background-color: #39697f;
min-height: 400px;
margin-left: 0 !important;
color: #fff;
}
.body .content a.caption {
color: #fff !important;
}
.body .content a.caption:visited {
color: #fff !important;
}
.body .content .center-block {
padding: 10px;
}
.body .content .center-block h2 {
margin: 0px auto;
font-size: 22px;
}
.body .content .center-block .caption {
font-size: 12px;
clear: both;
}
.body .content .center-block .single-step {
margin: 20px 0 150px 0;
}
.body #progress {
width: 100%;
margin: 0;
clear: both;
}
.body #progress .progress {
background-color: #000;
border-radius: 0 !important;
background-image: none;
}
.body #progress .progress.progress-solid {
margin: 0;
}
.body #progress .progress.progress-solid .bar {
background-color: #1aa79c;
background-image: linear-gradient(rgba(255, 255, 255, 0) 0%);
height: 100%;
}
.body #progress .progress.progress-solid.active .bar {
animation: 1s linear 0s normal none infinite progress-bar-color !important;
}
.body .lower {
margin: 0;
}
.body .lower .links {
margin: 10px auto;
}
.body .lower .links a {
display: inline-block;
padding: 0 5px;
color: #000;
text-decoration: underline;
}
.body .lower .copy {
margin: 10px auto;
}
/* Footer Layout Styles */
footer h4 {
font-weight: 200;
}
.row-fluid .span3 {
margin-left: 20px;
width: 24%;
}
.selectpicker li {
text-align: left;
}
Raw
jsbin.qefod.js
var Mobile = Ember.Application.create({
});
/** Setup the urls for the mobile screens **/
Mobile.Router.map(function(){
this.resource('index', { path: "/" });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment