SHARE
TWEET

Untitled

a guest Nov 18th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Statystyka</title>
  8.     <script src="js/jquery.js"></script>
  9.     <style>
  10. table {
  11.             font-size: 1.1em;
  12.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  13.             text-align: center;
  14.             width: 100px;
  15.         }
  16.  
  17.         td {
  18.             text-align: center;
  19.             padding: 4px;
  20.             border: 2px blue dotted;
  21.             min-height: 30px;
  22.             min-width: 100px;
  23.         }
  24.  
  25.         td:first-child {
  26.             text-align: left;
  27.         }
  28.  
  29.         .slider {
  30.             margin-top: 4px;
  31.             display: inline-block;
  32.             position: relative;
  33.             width: 500px;
  34.             background: lightgray;
  35.             border-radius: 15px;
  36.             height: 30px;
  37.             overflow: hidden;
  38.         }
  39.  
  40.         .colored {
  41.             border-radius: 15px;
  42.             height: 30px;
  43.             width: 100px;
  44.         }
  45.     .dot {
  46.             line-height: 1.8;
  47.             font-size: .9em;
  48.             font-weight: bold;
  49.             text-align: center;
  50.             cursor: pointer;
  51.             position: absolute;
  52.             top: 0;
  53.             border-radius: 15px;
  54.             height: 30px;
  55.             width: 30px;
  56.             user-select: none;
  57.             transition: box-shadow .3s, font-size .3s, line-height .3s;
  58.         }
  59.     #policja{
  60.         min-width: 250px !important;
  61.     }
  62.  
  63.     </style>
  64. </head>
  65. <body>
  66.     <table></table>
  67.     <script>
  68.     var tab = [
  69.                 { type: "komisariat 1 - dzielnica I", c1: "111111", c2: "f5aa00", start: 70 },
  70.                 { type: "komisariat 2 - dzielnica II", c1: "333333", c2: "f5bb00", start: 60 },
  71.                 { type: "komisariat 3 - dzielnice III i IV", c1: "555555", c2: "f5cc00", start: 50 },
  72.                 { type: "komisariat 4 - dzielnice V, VI i VII", c1: "777777", c2: "f5dd00", start: 40 },
  73.                 { type: "komisariat 5 - dzielnice VIII, IX, i XIII", c1: "999999", c2: "f5ee00", start: 50 },
  74.                 { type: "komisariat 6 - dzielnice X, XI i XII", c1: "777777", c2: "f5dd00", start: 60 },
  75.                 { type: "komisariat 7 - dzielnice XV, XVI i XVII", c1: "555555", c2: "f5cc00", start: 70 },
  76.                 { type: "komisariat 8 - dzielnice XIV i XVIII", c1: "333333", c2: "f5bb00", start: 80 },
  77.             ]
  78.    
  79.     const sliderWidth = 500
  80.     const dotSize = 30
  81.  
  82.     const table = $("table")
  83.     for (const elem of tab){
  84.         const row=$("<tr></tr>").appendTo(table)
  85.    
  86.         row.append($("<td id='policja'></td>").text(elem.type)).addClass("komisariat")
  87.         row.append($("<td id='start'></td>").text(elem.start))
  88.         const slider = $("<div></div>").addClass("slider")
  89.         row.append($("<td></td>").append(slider))
  90.         row.append($("<td></td>").text(100-elem.start))
  91.  
  92.         $('<div></div>')
  93.             .addClass('colored')
  94.             .width(sliderWidth)
  95.             .css('background-color', '#' + elem.c1)
  96.             .appendTo(slider)
  97.             .css('border-radius', '20px')
  98.        
  99.         $('<div></div>')
  100.             .addClass('dot')
  101.             .css('background-color', '#' + elem.c2)
  102.             .css('left', elem.start * (sliderWidth - dotSize) / 100)
  103.             .text(elem.start)
  104.             .appendTo(slider)
  105.             .mousedown(function () {
  106.                 $(this).addClass('dragging');
  107.             });
  108.    
  109.         }
  110.     const dane = $('<div style="max-height:100px !important;"></div>')
  111.         .addClass('dane').html("<p style='font-size:18px; position: relative; bottom: 20px;'>Średnia przestępczość w Krakowie:</p></br><p style='font-size:18px; position: relative; bottom: 60px;'>dzien - " + $(start/8) + "</p><br/><p style='font-size:18px; position: relative; bottom: 90px;'>noc - " + $(100-start/8) + " </p>")
  112.         .css("text-align", "center")
  113.         .width(1008)
  114.         .appendTo($('<td></td>')
  115.         .attr('colspan', 4)
  116.         .appendTo($('<tr></tr>').appendTo(table)))
  117.    
  118.     $(':root').mouseup(function () {
  119.         $('.dragging').removeClass('dragging');
  120.     })
  121.  
  122.     $(':root').mousemove(function (event) {
  123.         $('.dragging').each(function (i, el) {
  124.             const start = $("#start")
  125.             const maxValue = $(el).parent().children('.colored').width() / sliderWidth
  126.             const currentValue = Math.max(Math.min((event.pageX - 412 - dotSize / 2) / (sliderWidth - dotSize), maxValue), 0);
  127.             $(el).css('left', currentValue * (sliderWidth - dotSize) | 0)
  128.                 .text(currentValue * 100 | 0)
  129.                 .parent().parent().parent()
  130.                 .children('td:last-child').text(currentValue * 100 | 0)
  131.                 $(start).text(100-currentValue * 100 | 0)
  132.         })
  133.     })
  134.  
  135.  
  136.      
  137.    
  138.     </script>
  139. </body>
  140. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top