<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- profile: 300x300 -->
<!-- poster: 136x190 -->
<!-- thumbnail: 320x240 -->
<div class="l-nav">
<div class="l-nav__container">
<button class="l-nav__button"> Submit </button>
</div>
</div>
<div class="l-container">
<ul>
<li class="list" data-name="JoeBrown">
<!-- Profile Section -->
<div class="list__profile">
<div> <img src="https://tinyurl.com/glz9lv7"> </div>
<div class="list__label">
<div class="list__label--header"> Name </div>
<div class="list__label--value"> JoeBrown </div>
</div>
</div>
<!-- Photo Thumbnail Section -->
<div class="list__photos">
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
</div>
</li>
<li class="list" data-name="JaneBrown">
<!-- Profile Section -->
<div class="list__profile">
<div> <img src="https://tinyurl.com/hbr9l7v"> </div>
<div class="list__label">
<div class="list__label--header"> Name </div>
<div class="list__label--value"> JaneBrown </div>
</div>
</div>
<!-- Photo Thumbnail Section -->
<div class="list__photos">
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
</div>
</li>
<li class="list" data-name="JoeyBlack123">
<!-- Profile Section -->
<div class="list__profile">
<div> <img src="https://tinyurl.com/glz9lv7"> </div>
<div class="list__label">
<div class="list__label--header"> Name </div>
<div class="list__label--value"> JoeyBlack123 </div>
</div>
</div>
<!-- Photo Thumbnail Section -->
<div class="list__photos">
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
</div>
</li>
<li class="list" data-name="BobbyBlack444">
<!-- Profile Section -->
<div class="list__profile">
<div> <img src="https://tinyurl.com/glz9lv7"> </div>
<div class="list__label">
<div class="list__label--header"> Name </div>
<div class="list__label--value"> BobbyBlack444 </div>
</div>
</div>
<!-- Photo Thumbnail Section -->
<div class="list__photos">
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
<span> <img src="http://placehold.it/320x240"> </span>
</div>
</li>
</ul>
</div>
/* VARIABLES ==================== */
/* BASE ==================== */
@import "https://fonts.googleapis.com/css?family=Open+Sans";
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
background-color: #e0e0e0;
}
body ul {
padding: 0;
list-style-type: none;
}
img {
width: 75px;
margin: 7px 5px 5px 5px;
border-radius: 5px;
}
button {
border: none;
font-size: 1em;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: pointer;
}
button:focus {
outline: 0;
}
/* LAYOUT ==================== */
.l-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
width: 100%;
height: 100px;
background-color: #242D33;
}
.l-nav__container, .l-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
@media screen and (max-width: 1050px) {
.l-nav__container, .l-container {
width: 95%;
}
}
.l-nav__button {
color: #e0e0e0;
background-color: #3392CC;
padding: 10px;
text-align: center;
width: 30%;
border-radius: 5px;
}
.l-nav__button:hover {
background-color: #2e83b8;
color: white;
}
.l-container {
display: block;
padding-top: 115px;
}
/* MODULE ==================== */
.list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: white;
margin: 10px;
padding: 5px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.list:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 5px 8px rgba(0, 0, 0, 0.22);
cursor: pointer;
}
.list__profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: left;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.list__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: right;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.list__photos img {
width: 100px;
}
@media screen and (max-width: 400px) {
.list__photos img {
width: 75px;
}
}
.list__label {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 15px;
}
.list__label--header {
color: #9a9a9a;
}
.list__label--value {
font-size: 1.3em;
}
@media screen and (max-width: 650px) {
.list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.list__profile {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 10px;
}
.list__label {
width: 170px;
}
.list__photos {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
/* STATE ==================== */
.is-list-selected {
background: #cb2d3e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #cb2d3e, #ef473a);
background: -webkit-linear-gradient(left, #cb2d3e, #ef473a);
background: linear-gradient(to right, #cb2d3e, #ef473a);
color: white;
}
// Add state class for selected
$(".list").click(function() {
$(this).toggleClass("is-list-selected");
});
// Iterate through list and find selected
$('.l-nav__button').click(function(){
var marked = [];
var not_marked = [];
$('.list').each(function(){
var has_selected = $(this).hasClass("is-list-selected");
if (has_selected == true) {
value = $(this).data("name");
marked.push(value);
}
else {
value = $(this).data("name");
not_marked.push(value);
}
});
console.log(marked);
console.log(not_marked);
});
