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 lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example7-production</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
​
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  
  <script src="app.js"></script>
  <link rel="stylesheet" href="styles.css">
  
</head>
<body ng-app="test">
  <div ng-controller="testCtrl">
  <!-- popover -->
    <div id="popOverHtml" ng-show="isOpen">
        <div class="col-md-3 feedback-popover">
            <div class="methods">
                <div style="width:12%;padding:10px;float:left;">
                    <button type="button" class=" toggle-updown-buttons" ng-click="goUp()">
                        <i class="fa fa-caret-up"></i>
                    </button>
                    <button type="button" class="toggle-updown-buttons" style="margin-top: 10px;" ng-click="goDown()">
                        <i class="fa fa-caret-down"></i>
                    </button>
                </div>
                <div style="width: 100%%; padding: 10px;">
                    <p ng-repeat="slot in slots" ng-class="[{'active-slot': (index === slot)}, 'slot']" >{{items[slot].name}} </p>
                </div>
​
            </div>
​
            <div class="inline-checks">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /> Yes
                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> No
                </label>
            </div>
​
            <hr style="margin-top:8px;margin-bottom:10px;" />
            <p>How could we improve this article (Optional)</p>
            <textarea class="form-control" rows="3"></textarea>
            <div style="padding:10px;">
                <button class="btn btn-default" ng-click="showPopover=0">Cancel</button>
                <button class="btn btn-default">Submit</button>
            </div>
​
        </div>
    </div>
    
     <!-- popover end -->
    
     <button id="feedback-button" type="button" class="label label-danger floating-feedback" ng-click="toggleMenu()">Helpful?
                    </button>
 <div class="container" id="container">
   <div ng-repeat="item in items">
 <h2>{{item.name}}</h2>
   <p>test {{item.name}} test {{item.name}}test {{item.name}}test {{item.name}}test {{item.name}}test {{item.name}}test {{item.name}}test {{item.name}}</p>
   </div>
   </div>
</div>
</body>
</html>
 
.floating-feedback {
        background-color: #d1222b;
        /* display: block; */
        position: fixed;
        z-index: 999;
        right: 32px;
        margin-top: 45px;
        color: #fff;
        border: 0px;
        font-weight: 300;
        padding: 0.4em;
        font-size: 80%;
        padding-top: 0.5em;
    }
    
.feedback-popover {
    position: fixed;
    width: 50%;
    border:1px solid;
    right: 32px;
    background-color: #fff;
    z-index: 1030;
    top: 66px;
    max-height: 350px;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
​
.feedback-popover-collapse {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    max-height: 0px;
    position: fixed;
    right: 32px;
    background-color: #fff;
    z-index: 1030;
    top: 181px;
}
​
.inline-checks {
    margin-left: auto;
    margin-right: auto;
    width: 43%;
}
​
.toggle-updown-buttons {
    color: #000;
    background-color: #dcdcdc;
    display: block;
    width: 16px;
    height: 30px;
    padding: 0px;
    border-radius: 4px;
    border: 0px;
}
  
.slot {
  margin: 0;
}
​
.active-slot{
  color: blue;
}
Output

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

Dismiss x
public
Bin info
jeantroianipro
0viewers