Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<title>Grab already added values</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
  <div class="box">
    <table class="valz2add">
      <tr>
        <td>
          <button class="addvalz">
            +
          </button>
        </td>
        <td>
          <input class="inputval" type="text" value="body">
        </td>
      </tr>
    </table>
​
    <hr />
    
    <table class="cssvalz">
      <tr>
        <td>
          padding:
        </td>
        <td>
          <input class="pad" type="text" value="0">
        </td>
      </tr>
      <tr>
        <td>
          bg-color:
        </td>
        <td>
          <input class="bg" type="text" value="rgb(0, 117, 214)">
        </td>
      </tr>
      <tr>
        <td>
          box-shadow:
        </td>
        <td>
          <input class="boxshadow" type="text" value="inset 0 0 30em #000">
        </td>
      </tr>
    </table>
    
    <p id="asc">
      <textarea id="testcode" placeholder="test code via keyup/change"></textarea>
      <div id="apply-test-code"></div>
    </p>
    
    <p>
      <textarea id="fullrencode" placeholder="All your css comes together here"></textarea>
      <div id="apply-full-code"></div>
    </p>
    
    <div class="val-nester"></div>
  </div>
</body>
</html>
 
.box {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  padding: 1em 2em 0 2em;
  background-color: rgb(68, 68, 68);
  color: rgb(255, 255, 255);
  font-family: helvetica;
  font-size: 12px;
  width: 230px;
  overflow: auto;
}
.box button {
  background-color: transparent;
  border-style: none;
  border-top-width: 0px;
  border-left-width: 0px;
  border-bottom-width: 0px;
  border-right-width: 0px;
  font-family: sans;
  color: rgb(181, 181, 181);
  font-size: 19px;
  font-weight: bold;
  padding: 0;
  cursor: pointer;
}
.box button:hover {
  color: rgb(255, 255, 255);
}
.box input[type=text] {
  background-color: rgb(79, 79, 79);
  border-style: solid;
  border-color: rgb(28, 28, 28);
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  font-family: helvetica;
  color: rgb(181, 181, 181);
}
.box table, .box table * {
  padding: 0;
}
.box table tr td:nth-child(1) {
  padding: 0 .5em 0 0;
}
.box hr {
  opacity: .75;
}
.box textarea {
  padding: 0;
  border: 0;
  width: 100%;
  height: 150px;
  resize: vertical;
}
.box .val-nester {
  border: 2px dotted #999;
}
 
$(document).ready(function() {
  $(".addvalz").on('click', function() {
​
    // Refresh render before add
    $("#testcode").val($(".inputval").val() +" {"+ ( $(".pad").val() === "" ? "" : "\n  padding: " + $(".pad").val() + ";" ) + ( $(".bg").val() === "" ? "" : "\n  background-color: " + $(".bg").val() + ";" ) + ( $(".boxshadow").val() === "" ? "" : "\n  box-shadow: " + $(".boxshadow").val() + ";" ) +"\n}");
​
    // Adds value
    $(".val-nester").append($("<div class='holddezvalz'>")
                            .append("<button class='deldizval'>x</button>")
                            .append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>").append($("#asc #testcode:first-of-type").clone()).append($(".valz2add .inputval:first-of-type").clone()).append($(".cssvalz .pad:first-of-type").clone()).append($(".cssvalz .bg:first-of-type").clone()).append($(".cssvalz .boxshadow:first-of-type").clone())
                           );
    $("#apply-test-code").html("<style type='text/css'>"+ $("#testcode").val() +"</style>");
​
    // Can't add same value twice. Replace?
    var $cssselbtn = $(".val-nester > .holddezvalz button:contains(" + $(".inputval").val() + ")");
    if($cssselbtn.length > 1) {
      var x = window.confirm("Selector already exists. Want to replace it?");
      if (x) {
        $cssselbtn.first().parent().remove();
      } else {
        $cssselbtn.last().parent().remove();
        return false;
      }
    }
​
    // Grabs selector value
    $(".grabdezvalz").on('click', function() {
      $(".valz2add .inputval:first-of-type").val($(this).next().next().val());
      $(".cssvalz .pad:first-of-type").val($(this).next().next().next().val());
      $(".cssvalz .bg:first-of-type").val($(this).next().next().next().next().val());
      $(".cssvalz .boxshadow:first-of-type").val($(this).next().next().next().next().next().val());
    });
​
    $("#fullrencode").val($(".val-nester").html());
​
    // Delete a value
    $(".deldizval").on('click', function() {
      $(this).parent().remove();
    });
​
    // Clear selector name when added
    $(".valz2add input[type=text], .cssvalz  input[type=text], #asc #testcode:first-of-type").val("");
​
  });
​
  $(".inputval, .pad, .bg, .boxshadow").on('keyup change', function() {
    $("#testcode").val($(".inputval").val() +" {"+ ( $(".pad").val() === "" ? "" : "\n  padding: " + $(".pad").val() + ";" ) + ( $(".bg").val() === "" ? "" : "\n  background-color: " + $(".bg").val() + ";" ) + ( $(".boxshadow").val() === "" ? "" : "\n  box-shadow: " + $(".boxshadow").val() + ";" ) +"\n}");
    $("#apply-test-code").html("<style type='text/css'>"+ $("#testcode").val() +"</style>");
  });
​
  $("#testcode").val($(".inputval").val() +" {"+ ( $(".pad").val() === "" ? "" : "\n  padding: " + $(".pad").val() + ";" ) + ( $(".bg").val() === "" ? "" : "\n  background-color: " + $(".bg").val() + ";" ) + ( $(".boxshadow").val() === "" ? "" : "\n  box-shadow: " + $(".boxshadow").val() + ";" ) +"\n}");
  $("#apply-test-code").html("<style type='text/css'>"+ $("#testcode").val() +"</style>");
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers