Reply to thread

Message

<blockquote data-quote="vRice" data-source="post: 25630" data-attributes="member: 33111">I&#039;d like to begin by crediting <a href="https://cabconmodding.com/members/thahitcrew.1392/" target="_blank">thahitcrew</a> for the original idea. The only reason I created one myself is because I need to learn a lot of jQuery before I go back to uni in September. I&#039;ve tried to make it look relatively decent and formatted the back-end to make sure it&#039;s readable.Preview:[spoiler]<a href="https://my.mixtape.moe/jfoxsa.webm" target="_blank">https://my.mixtape.moe/jfoxsa.webm</a>[/spoiler]Source Files:[spoiler]HTML &amp; jQuery[html]&lt;!DOCTYPE html&gt;&lt;!--&nbsp; &nbsp; &nbsp; &nbsp; RGBA Generator by vRice&nbsp; &nbsp; &nbsp; &nbsp; Original Idea by thahitcrew--&gt;&lt;html&gt;&nbsp; &nbsp; &lt;title&gt;RGB Slider&lt;/title&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;&nbsp; &nbsp; &lt;link href=&quot;https://fonts.googleapis.com/css?family=Raleway&quot; rel=&quot;stylesheet&quot;&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;!-- Importing the jQuery file for scripts --&gt;&nbsp; &nbsp; &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script&gt;&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set some variables to be used throughout&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [0] = Slider&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1] = Value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [2] = Border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [3] = Preview&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [4] = Header&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var element = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[0] = document.getElementsByClassName(&#039;slider&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[1] = document.getElementsByClassName(&#039;value&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[2] = document.getElementsByClassName(&#039;colour-container&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[3] = document.getElementById(&#039;preview&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[4] = document.getElementById(&#039;header&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Credit to Onur Yildirim from StackOverflow&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function invertColor(hex, bw) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hex.indexOf(&#039;#&#039;) === 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hex = hex.slice(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hex.length === 3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hex.length !== 6) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throw new Error(&#039;Invalid HEX color.&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var r = parseInt(hex.slice(0, 2), 16),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; g = parseInt(hex.slice(2, 4), 16),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b = parseInt(hex.slice(4, 6), 16);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (bw) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (r * 0.299 + g * 0.587 + b * 0.114) &gt; 186&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? &#039;#000000&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : &#039;#FFFFFF&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r = (255 - r).toString(16);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; g = (255 - g).toString(16);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b = (255 - b).toString(16);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return &quot;#&quot; + padZero(r) + padZero(g) + padZero(b);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sets the colours and changes the HTML to display the information&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function setColour(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newVal = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var RGB = &quot;RGB&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var hexVal = &quot;#&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tempVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0; i &lt; 3; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tempVal = element[0][i].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newVal[i] = parseFloat((tempVal / 255).toFixed(2));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hexVal += fillSpace(parseInt(element[0][i].value, 10).toString(16));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[1][i].value = RGB[i] + &quot; &quot; + element[0][i].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#preview h5:nth-child(1)&#039;).text(&#039;RGB (&#039; + newVal[0] + &#039;, &#039; + newVal[1] + &#039;, &#039; + newVal[2] + &#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[3].style.color = invertColor(hexVal, true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0; i &lt; 4; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[2][i].style.borderColor = hexVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[3].style.backgroundColor = hexVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[3].style.borderColor = hexVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[4].style.backgroundColor = hexVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[4].style.color = invertColor(hexVal, true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sets the alpha and changes the HTML to display the information&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function setAlpha(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var value = element[0][3].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tempVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tempVal = element[0][3].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[3].style.opacity = tempVal / 100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[1][3].value = &quot;A &quot; + tempVal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#preview h5:nth-child(2)&#039;).text(&#039;ALPHA (&#039; + (value / 100) + &#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; When the page loads, generate a random colour to make it funky&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[0][3].value = Math.floor(Math.random() * 100);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0; i &lt; 3; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[0][i].value = Math.floor(Math.random() * 255);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Pad out the RGB value to make the HEX code valid&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function fillSpace(int){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ((int.length &lt; 2) ? (&quot;0&quot; + int) : int);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Add events for all of the RGBa sliders&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[0][3].addEventListener(&#039;mousemove&#039;, function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAlpha();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0; i &lt; 3; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[0][i].addEventListener(&#039;mousemove&#039;, function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setColour();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setColour();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAlpha();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &lt;/script&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;GSC RGBA GENERATOR&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;red-container&quot; class=&quot;colour-container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;colour-info&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;output class=&quot;value&quot;&gt;R 0&lt;/output&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class=&quot;slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;255&quot; id=&quot;b&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;green-container&quot; class=&quot;colour-container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;colour-info&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;output class=&quot;value&quot;&gt;G 0&lt;/output&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class=&quot;slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;255&quot; id=&quot;b&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;blue-container&quot; class=&quot;colour-container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;colour-info&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;output class=&quot;value&quot;&gt;B 0&lt;/output&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class=&quot;slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;255&quot; id=&quot;b&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;alpha-container&quot; class=&quot;colour-container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;colour-info&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;output class=&quot;value&quot;&gt;A 0&lt;/output&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class=&quot;slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; id=&quot;b&quot; step=&quot;1&quot; value=&quot;100&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;preview&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Preview windoe for the colour&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;info&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;&lt;a href=&quot;http://kyleminto.uk/portfolio&quot;&gt;by Kyle Minto&lt;/a&gt;&lt;/h5&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/html]CSS[code]*{&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; font-family: &quot;Raleway&quot;;&nbsp; &nbsp; font-feature-settings: &quot;lnum&quot; 1;}* p, * h5{&nbsp; &nbsp; transition: 1s;}body{&nbsp; &nbsp; background-color: #ececec;}#header{&nbsp; &nbsp; padding: 15px;&nbsp; &nbsp; color: white;&nbsp; &nbsp; background-color: rgb(25, 125, 150);}#header p{&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; margin-left: 50px;}#preview{&nbsp; &nbsp; width: 315px;&nbsp; &nbsp; height: 70px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; border: 1px solid;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; color: white;}#preview h5{&nbsp; &nbsp; margin-top: 11px;}.colour-container{&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin: 5px 0px;&nbsp; &nbsp; border: 1px solid rgb(25, 125, 150);}#container{&nbsp; &nbsp; margin: 50px auto;&nbsp; &nbsp; width: 315px;}#info a{&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: black;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; transition: .5s;}#info a:hover{&nbsp; &nbsp; padding: 0px 15px;}.colour-info{&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; padding: 30px 15px;}.slider{&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; float: right;&nbsp; &nbsp; padding: 27px 0px;&nbsp; &nbsp; margin-right: 15px;&nbsp; &nbsp; width: 70%;}#red-container{&nbsp; &nbsp; color: red;}#green-container{&nbsp; &nbsp; color: green;}#blue-container{&nbsp; &nbsp; color: blue;}[/code][/spoiler]<a href="http://rgbgenerator.kyleminto.uk/" target="_blank">Website Link</a></blockquote>

[QUOTE="vRice, post: 25630, member: 33111"] I'd like to begin by crediting [URL='https://cabconmodding.com/members/thahitcrew.1392/']thahitcrew[/URL] for the original idea. The only reason I created one myself is because I need to learn a lot of jQuery before I go back to uni in September. I've tried to make it look relatively decent and formatted the back-end to make sure it's readable. Preview: [spoiler] [URL]https://my.mixtape.moe/jfoxsa.webm[/URL] [/spoiler] Source Files: [spoiler] HTML & jQuery [html] <!DOCTYPE html>  <html> <title>RGB Slider</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(e) { /* Set some variables to be used throughout [0] = Slider [1] = Value [2] = Border [3] = Preview [4] = Header */ var element = []; element[0] = document.getElementsByClassName('slider'); element[1] = document.getElementsByClassName('value'); element[2] = document.getElementsByClassName('colour-container'); element[3] = document.getElementById('preview'); element[4] = document.getElementById('header'); /* Credit to Onur Yildirim from StackOverflow https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color */ function invertColor(hex, bw) { if (hex.indexOf('#') === 0) { hex = hex.slice(1); } if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } if (hex.length !== 6) { throw new Error('Invalid HEX color.'); } var r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16); if (bw) { return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#FFFFFF'; } r = (255 - r).toString(16); g = (255 - g).toString(16); b = (255 - b).toString(16); return "#" + padZero(r) + padZero(g) + padZero(b); } /* Sets the colours and changes the HTML to display the information */ function setColour(){ var newVal = []; var RGB = "RGB"; var hexVal = "#"; var tempVal; for(i = 0; i < 3; i++){ tempVal = element[0][i].value; newVal[i] = parseFloat((tempVal / 255).toFixed(2)); hexVal += fillSpace(parseInt(element[0][i].value, 10).toString(16)); element[1][i].value = RGB[i] + " " + element[0][i].value; } $('#preview h5:nth-child(1)').text('RGB (' + newVal[0] + ', ' + newVal[1] + ', ' + newVal[2] + ')'); element[3].style.color = invertColor(hexVal, true); for(i = 0; i < 4; i++){ element[2][i].style.borderColor = hexVal; } element[3].style.backgroundColor = hexVal; element[3].style.borderColor = hexVal; element[4].style.backgroundColor = hexVal; element[4].style.color = invertColor(hexVal, true); } /* Sets the alpha and changes the HTML to display the information */ function setAlpha(){ var value = element[0][3].value; var tempVal; tempVal = element[0][3].value; element[3].style.opacity = tempVal / 100; element[1][3].value = "A " + tempVal; $('#preview h5:nth-child(2)').text('ALPHA (' + (value / 100) + ')'); } /* When the page loads, generate a random colour to make it funky */ element[0][3].value = Math.floor(Math.random() * 100); for(i = 0; i < 3; i++){ element[0][i].value = Math.floor(Math.random() * 255); } /* Pad out the RGB value to make the HEX code valid */ function fillSpace(int){ return ((int.length < 2) ? ("0" + int) : int); } /* Add events for all of the RGBa sliders */ element[0][3].addEventListener('mousemove', function(){ setAlpha(); }, false); for(i = 0; i < 3; i++){ element[0][i].addEventListener('mousemove', function(){ setColour(); }, false); } setColour(); setAlpha(); }); </script> <body> <div id="header"> GSC RGBA GENERATOR </div> <div id="container"> <div id="red-container" class="colour-container"> <div class="colour-info"> <h5> <output class="value">R 0</output> </h5> </div> <input class="slider" type="range" min="0" max="255" id="b" step="1" value="0"> </div> <div id="green-container" class="colour-container"> <div class="colour-info"> <h5> <output class="value">G 0</output> </h5> </div> <input class="slider" type="range" min="0" max="255" id="b" step="1" value="0"> </div> <div id="blue-container" class="colour-container"> <div class="colour-info"> <h5> <output class="value">B 0</output> </h5> </div> <input class="slider" type="range" min="0" max="255" id="b" step="1" value="0"> </div> <div id="alpha-container" class="colour-container"> <div class="colour-info"> <h5> <output class="value">A 0</output> </h5> </div> <input class="slider" type="range" min="0" max="100" id="b" step="1" value="100"> </div> <div id="preview">  <h5></h5> <h5></h5> </div> <div id="info"> <h5><a href="http://kyleminto.uk/portfolio">by Kyle Minto</a></h5> </div> </div> </body> </html> [/html] CSS [code] *{ padding: 0px; margin: 0px; font-family: "Raleway"; font-feature-settings: "lnum" 1; } * p, * h5{ transition: 1s; } body{ background-color: #ececec; } #header{ padding: 15px; color: white; background-color: rgb(25, 125, 150); } #header p{ font-weight: bold; margin-left: 50px; } #preview{ width: 315px; height: 70px; display: inline-block; border: 1px solid; text-align: center; vertical-align: middle; color: white; } #preview h5{ margin-top: 11px; } .colour-container{ background-color: white; width: 100%; margin: 5px 0px; border: 1px solid rgb(25, 125, 150); } #container{ margin: 50px auto; width: 315px; } #info a{ text-decoration: none; color: black; padding: 0px; transition: .5s; } #info a:hover{ padding: 0px 15px; } .colour-info{ display: inline-block; padding: 30px 15px; } .slider{ display: inline-block; float: right; padding: 27px 0px; margin-right: 15px; width: 70%; } #red-container{ color: red; } #green-container{ color: green; } #blue-container{ color: blue; } [/code] [/spoiler] [URL='http://rgbgenerator.kyleminto.uk/']Website Link[/URL] [/QUOTE]

Verification

Reply to thread

Forum statistics

Share this page