Skip to content

Instantly share code, notes, and snippets.

@mcmwhfy

mcmwhfy/index.html

Created May 19, 2015 09:57
Show Gist options
  • Save mcmwhfy/be25e788801f68e2ce8e to your computer and use it in GitHub Desktop.
Save mcmwhfy/be25e788801f68e2ce8e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/sahiru
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-1 .panel-body a{
background: #fffffe;
transform: rotateX(0deg);
transition: all 0.5s ease-in 0s;
}
.hover-1:hover .panel-body a {
background: #effefe ;
box-shadow: 0px 1px 0px 0px #158169 inset;
color: #0096a3;
transform: rotateX(-360deg);
transition: all 0.5s ease-in 0s;
}
</style>
</head>
<body>
<!-- Start your code here -->
<div class="panel panel-default hover-1">
<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-1 .panel-body a{
background: #fffffe;
transform: rotateX(0deg);
transition: all 0.5s ease-in 0s;
}
.hover-1:hover .panel-body a {
background: #effefe ;
box-shadow: 0px 1px 0px 0px #158169 inset;
color: #0096a3;
transform: rotateX(-360deg);
transition: all 0.5s ease-in 0s;
}
</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.sahiru.css
.hover-1 .panel-body a{
background: #fffffe;
transform: rotateX(0deg);
transition: all 0.5s ease-in 0s;
}
.hover-1:hover .panel-body a {
background: #effefe ;
box-shadow: 0px 1px 0px 0px #158169 inset;
color: #0096a3;
transform: rotateX(-360deg);
transition: all 0.5s ease-in 0s;
}
Raw
jsbin.sahiru.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