Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Thanks towr for your help - see the last comment above</p> <p>HTML </p> <pre><code>&lt;script type="text/ng-template" id="cmpbpopin.html"&gt; &lt;button class="btn btn-mini btn-info"&gt;&lt;i class="icon-info-sign"&gt;&lt;/i&gt;&lt;/button&gt; &lt;div class="popin grey-border"&gt; &lt;button class="close-button"&gt;&amp;times;&lt;/button&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/script&gt; &lt;table style="float: right;"&gt; &lt;tr ng-repeat="d in data" id="{{$index}}"&gt; &lt;td&gt;{{ d.id }}&lt;/td&gt; &lt;td&gt; &lt;div cm-pb-popup="d.html"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; </code></pre> <p>SCRIPT</p> <pre><code>var app = angular.module('app', []); app.controller('Ctrl', function ($scope, $compile, $http) { var template = "&lt;table class='pblist table table-condensed table-hover'&gt;" + "&lt;tr ng-click='go()'&gt;&lt;td&gt;1...&lt;/td&gt;&lt;td&gt;1...&lt;/td&gt;&lt;/tr&gt;" + "&lt;tr ng-click='go()'&gt;&lt;td&gt;1...&lt;/td&gt;&lt;td&gt;1...&lt;/td&gt;&lt;/tr&gt;" + "&lt;tr ng-click='go()'&gt;&lt;td&gt;1...&lt;/td&gt;&lt;td&gt;1...&lt;/td&gt;&lt;/tr&gt;" + "&lt;/table&gt;"; $scope.data = [ {"id": 1, "html": template}, {"id": 2, "html": template} ]; }); app.directive("cmPbPopup", function ($compile, $timeout) { return{ templateUrl: "cmpbpopin.html", scope: { cmPbPopup: "=" }, link: function (scope, elem, attrs) { elem.bind("click", function (e) { var popupDiv = elem.find('div'); var innerDiv = popupDiv.find('div'); var closeButton = popupDiv.find('.close-button') if (e.srcElement.nodeName != 'DIV') { if (e.srcElement.className == 'close-button') { closePopup(); } else if(e.srcElement.nodeName == 'TR' || e.srcElement.nodeName == 'TD'){ // set values in scope closePopup(); } else { innerDiv.html(scope.cmPbPopup); $compile(innerDiv)(scope); popupDiv.css({ 'top': e.pageY - e.offsetY + 20, 'left': e.pageX - e.offsetX -10, 'height': 100, 'width': 500, 'marginLeft': -500}); $timeout(function (){ closeButton.css('display', 'block'); },500); } } function closePopup(){ popupDiv.css({ 'height': 0, 'width': 0, 'marginLeft': 0}); $timeout(function (){ popupDiv.css({ 'top': -500, 'left': -500 }); },500); } }); } } }) </code></pre> <p>CSS</p> <pre><code> div.popin { position: absolute; width: 0; height: 0; top: -500px; left: -500px; background-color: #ffffff; transition: width 0.5s, height 0.5s, margin-left 0.5s; -webkit-transition: width 0.5s, height 0.5s, margin-left 0.5s; /* Safari */ overflow: hidden; } div.popin div { position: absolute; top: 0 !important; left: 500px !important; width: 470px !important; transition: width 0.2s, height 0.2s, margin-left 0.2s; -webkit-transition: width 0.2s, height 0.2s, margin-left 0.2s; } .close-button{ width: 20px; height: 20px; float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .pblist{ margin-left: 10px !important; margin-top: 10px; width: 470px; float: left; } .grey-border { border: 1px #d3d3d3 solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 3px; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload