1. <html>
  2. <style type="text/css">
  3. a.tooltip {
  4. outline: none;
  5. }
  7. a.tooltip strong {
  8. line-height: 30px;
  9. }
  11. a.tooltip:hover {
  12. text-decoration: none;
  13. }
  15. a.tooltip span {
  16. z-index: 10;
  17. display: none;
  18. padding: 14px 20px;
  19. margin-top: 60px;
  20. margin-left: -160px;
  21. width: 300px;
  22. line-height: 16px;
  23. }
  25. a.tooltip:hover span {
  26. margin-top: 180px;
  27. display: inline;
  28. position: absolute;
  29. border: 2px solid #FFF;
  30. color: #EEE;
  31. background: #333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
  32. }
  34. .callout {
  35. z-index: 20;
  36. position: absolute;
  37. border: 0;
  38. top: -14px;
  39. left: 120px;
  40. }
  41. /*CSS3 extras*/
  43. a.tooltip span {
  44. border-radius: 2px;
  45. box-shadow: 0px 0px 8px 4px #666;
  46. /*opacity: 0.8;*/
  47. }
  49. img.img-responsive.img-align {
  50. margin: 0 auto;
  51. width: 250px;
  52. height: 150px;
  53. margin-top: 20px;
  54. margin-bottom: 10px;
  55. }
  57. span.imp {
  58. font-size: 140%;
  59. color: ghostwhite;
  60. }
  62. table#tableEmployee {}
  64. .spacing-table {
  65. font-family: 'Helvetica', 'Arial', sans-serif;
  66. font-size: 15px;
  67. table-layout: fixed;
  68. width: 100%;
  69. border-spacing: 0 5px;
  70. /* this is the ultimate fix */
  71. }
  73. .spacing-table th {
  74. text-align: left;
  75. padding: 5px 15px;
  76. }
  78. .spacing-table td {
  79. padding-left: 25px;
  80. border-width: 3px 0;
  81. width: 50%;
  82. border-color: darkred;
  83. border-style: solid;
  84. background-color: rgba(109, 7, 7, 0.29);
  85. color: white;
  86. }
  88. .spacing-table td:first-child {
  89. border-left-width: 3px;
  90. border-radius: 50px 0 0 5px;
  91. }
  93. .spacing-table td:last-child {
  94. border-right-width: 3px;
  95. border-radius: 0 5px 5px 0;
  96. }
  98. .spacing-table thead {
  99. display: table;
  100. table-layout: fixed;
  101. width: 100%;
  102. }
  104. .spacing-table tbody {
  105. display: table;
  106. table-layout: fixed;
  107. width: 100%;
  108. border-spacing: 0 30px;
  109. border-collapse: separate;
  110. }
  112. div#PriceSlider {
  113. width: 22%;
  114. }
  115. </style>
  116. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  117. <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  118. <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  119. <script>
  120. $(document).ready(function() {
  121. $("#PriceSlider").slider({
  122. min: 5000,
  123. max: 100000,
  124. values: [5000, 20000],
  125. range: true,
  126. slide: function(event, ui) {
  127. $("#price").val("₹" + ui.values[0] + " - ₹" + ui.values[1]);
  128. }
  129. });
  130. $("#PriceSlider").on("slidestop", function(event, ui) {
  131. var pricefilterstring = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=((subcategory eq '" + name + "') and (price gt " + ui.values[0] + " and price lt " + ui.values[1] + "))";
  132. getitems(pricefilterstring);
  133. });
  134. var name = getParameterByName("itemid");
  136. function getParameterByName(name, url) {
  137. if (!url) url = window.location.href;
  138. name = name.replace(/[\[\]]/g, "\\$&");
  139. var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  140. results = regex.exec(url);
  141. if (!results) return null;
  142. if (!results[2]) return '';
  143. return decodeURIComponent(results[2].replace(/\+/g, " "));
  144. }
  145. var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=subcategory eq '" + name + "'";
  146. getitems(requestUri);
  148. function getitems(urlstring) {
  149. $.ajax({
  150. url: urlstring,
  151. type: "GET",
  152. headers: {
  153. "accept": "application/json; odata=verbose"
  154. },
  155. success: onSuccess,
  156. error: onError
  157. });
  159. function onSuccess(data) {
  160. var objItems = data.d.results;
  161. var tableContent = '<table id="tableEmployee" class="spacing-table" >';
  162. for (var i = 0; i < objItems.length; i++) {
  163. tableContent += '<tr>';
  164. console.log(objItems[i].ID);
  165. tableContent += "<td> <span class='imp'> " + objItems[i].Title + " </span></td>";
  166. tableContent += "<td><a href='#'class='tooltip'><img src='" + objItems[i].AttachmentFiles.results[0].ServerRelativeUrl + "'class='img-responsive img-align'alt='Responsive image'> <span><img class='callout' src='http://www.menucool.com/tooltip/cssttp/callout_black.gif' /> <strong>Details</strong><br />" + objItems[i].description + "<br />₹" + objItems[i].price + "</span></a></td>";
  167. tableContent += "<td><a href='UrUrl/SitePages/Ad%20Details%20View.aspx?itemid=" + objItems[i].ID + "'>Contact the owner</td>";
  168. tableContent += '</tr>';
  169. }
  170. tableContent += '</table>';
  171. $('#CustomerPanel').empty();
  172. $('#CustomerPanel').append(tableContent);
  173. }
  175. function onError(error) {
  176. alert('Error');
  177. }
  178. }
  179. });
  180. </script>
  181. <div id="PriceSlider"></div>
  182. <p> <label for="price">Price range:</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p>
  183. <div id="CustomerPanel"> </div>
  185. </html>