Skip to content

Instantly share code, notes, and snippets.

@mcmwhfy

mcmwhfy/index.html

Created May 19, 2015 09:56
Show Gist options
  • Save mcmwhfy/74b221c7660a6ea314ca to your computer and use it in GitHub Desktop.
Save mcmwhfy/74b221c7660a6ea314ca to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kipefa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.hover-3 .panel-body a:nth-child(1) {
transition: all 0.2s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(2) {
transition: all 0.3s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(3) {
transition: all 0.4s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(4) {
transition: all 0.5s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(5) {
transition: all 0.6s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(6) {
transition: all 0.7s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(7) {
transition: all 0.8s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(8) {
transition: all 0.9s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(9) {
transition: all 1s ease-in 0s;
}
.hover-3 .panel-body a {
background: #00ffff;
color: #ff0000;
border-color: red;
}
.hover-3:hover .panel-body a:nth-child(1), .hover-3:hover .panel-body a:nth-child(2), .hover-3:hover .panel-body a:nth-child(3), .hover-3:hover .panel-body a:nth-child(4), .hover-3:hover .panel-body a:nth-child(5), .hover-3:hover .panel-body a:nth-child(6), .hover-3:hover .panel-body a:nth-child(7), .hover-3:hover .panel-body a:nth-child(8), .hover-3:hover .panel-body a:nth-child(9), .hover-3:hover .panel-body a:nth-child(10) {
background: lime;
color: #fff
border-color: lime !important;
}
</style>
</head>
<body>
<!-- Start your code here -->
<div class="panel panel-default hover-3">
<div class="panel-heading">
<h2 class="panel-title">Dealer columns</h2>
</div>
<div id="list_container130" class="panel-body no-padding">
<div class="list-group">
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="linkfc" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Dealer Code
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="linkfd" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Dealer HQ
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="linkfe" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;DCM
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="linkff" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Dealer name
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="link100" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Dealer SSN
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="link101" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Dealer Phone No
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="link102" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Dealer Creation Date
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
<a list-group-item-default="" list-group-item-danger="" href="javascript:;" id="link103" class="list-group-item"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-check"></i>&nbsp;Closed Date
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
</div>
</div>
<div class="panel-footer">
<a href="javascript:;" id="select_allfb" class="btn btn-link"><!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink BEGIN -->
<i class="glyphicon glyphicon-unchecked"></i>Select all
<!-- MARKUP FOR de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink END --></a>
</div>
</div>
<script id="jsbin-javascript">
var selector = document.querySelectorAll("textarea");
for(i = 0; i < selector.length; i++){
console.log(selector[i]);
var allsel = selector[i];
allsel.style.background = "yellow";
}
</script>
<script id="jsbin-source-css" type="text/css">
.hover-3 .panel-body a:nth-child(1) {
transition: all 0.2s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(2) {
transition: all 0.3s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(3) {
transition: all 0.4s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(4) {
transition: all 0.5s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(5) {
transition: all 0.6s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(6) {
transition: all 0.7s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(7) {
transition: all 0.8s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(8) {
transition: all 0.9s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(9) {
transition: all 1s ease-in 0s;
}
.hover-3 .panel-body a {
background: #00ffff;
color: #ff0000;
border-color: red;
}
.hover-3:hover .panel-body a:nth-child(1), .hover-3:hover .panel-body a:nth-child(2), .hover-3:hover .panel-body a:nth-child(3), .hover-3:hover .panel-body a:nth-child(4), .hover-3:hover .panel-body a:nth-child(5), .hover-3:hover .panel-body a:nth-child(6), .hover-3:hover .panel-body a:nth-child(7), .hover-3:hover .panel-body a:nth-child(8), .hover-3:hover .panel-body a:nth-child(9), .hover-3:hover .panel-body a:nth-child(10) {
background: lime;
color: #fff
border-color: lime !important;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var selector = document.querySelectorAll("textarea");
for(i = 0; i < selector.length; i++){
console.log(selector[i]);
var allsel = selector[i];
allsel.style.background = "yellow";
}</script></body>
</html>
Raw
jsbin.kipefa.css
.hover-3 .panel-body a:nth-child(1) {
transition: all 0.2s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(2) {
transition: all 0.3s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(3) {
transition: all 0.4s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(4) {
transition: all 0.5s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(5) {
transition: all 0.6s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(6) {
transition: all 0.7s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(7) {
transition: all 0.8s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(8) {
transition: all 0.9s ease-in 0s;
}
.hover-3 .panel-body a:nth-child(9) {
transition: all 1s ease-in 0s;
}
.hover-3 .panel-body a {
background: #00ffff;
color: #ff0000;
border-color: red;
}
.hover-3:hover .panel-body a:nth-child(1), .hover-3:hover .panel-body a:nth-child(2), .hover-3:hover .panel-body a:nth-child(3), .hover-3:hover .panel-body a:nth-child(4), .hover-3:hover .panel-body a:nth-child(5), .hover-3:hover .panel-body a:nth-child(6), .hover-3:hover .panel-body a:nth-child(7), .hover-3:hover .panel-body a:nth-child(8), .hover-3:hover .panel-body a:nth-child(9), .hover-3:hover .panel-body a:nth-child(10) {
background: lime;
color: #fff
border-color: lime !important;
}
Raw
jsbin.kipefa.js
var selector = document.querySelectorAll("textarea");
for(i = 0; i < selector.length; i++){
console.log(selector[i]);
var allsel = selector[i];
allsel.style.background = "yellow";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment