Jquery Dynamic background-colours

Developer
Size
4,488 Kb
Views
24,288

How do I make an jquery dynamic background-colours?

Click the boxes!Using HSL instead of RGB and whatnot, you can create dynamic colour patterns by shifting the Hue slider via an expression. . What is a jquery dynamic background-colours? How do you make a jquery dynamic background-colours? This script and codes were developed by Wafs on 12 September 2022, Monday.

Jquery Dynamic background-colours Previews

Jquery Dynamic background-colours - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jquery Dynamic background-colours</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div class="buttonbox"><h1>Using H<span style="color:hsl(0,0%,20%)">S</span><span style="color:hsl(0,0%,35%)">L</span> in Jquery</h1> <p> HSL is another way to set colours in CSS3, however you will need a fallback to support ancient browsers. Jquery on the other hand automatically converts these into RGB, eliminating the fallback. Yay!<br/>By default a pure colour has 100% Saturation and 50% lightness. Example : <span style="color:red;background-color:black;padding:0px 5px">"red"</span> or <span style="color:#F00;background-color:black;padding:0px 5px">"#F00"</span> is done like this : <span style="color:hsl(0,100%,50%);background-color:black;padding:0px 5px">hsl(0,100%,50%)</p> <h2>Dynamically coloured boxes : (Click a box!)</h2> <div class="button fades">1</div> <div class="button fades">2</div> <div class="button fades">3</div> <div class="button fades">4</div> <div class="button fades">5</div> <div class="button fades">6</div> <div class="button fades">7</div> <div class="button fades">8</div> <div class="button fades">9</div> <div class="button fades">10</div> </div> <div class="slidercontainer"> Saturation <input type="range" id="saturation" min="0" max="100" value="50"/> <output id="sat-output"></output><br/> Lightness <input type="range" id="lightness" min="0" max="100" value="50"/> <output id="light-output"></output> </div> <p>The key to this is using <strong>HSL</strong> <em>(Hue, Saturation, Lightness)</em> instead of rgb or hex. If you use HSL, you set the saturation/lightness of the colour and then use an expression to drive the "H" - the hue. The hue will then shift colour according to whatever you feed it. In this demo I just used the text of the div, you can use the array count or whatever magic number system you'd like. </p> <div> <h2>Less hassle on setting up mouseover colours</h2> <p>Why not set your un-mouseovered colour to 15% Saturation of the element?</p> <div class="hoverelement fades"></div> <div class="hoverelement fades"></div> <div class="hoverelement fades"></div> <br/><p>(Note : These are using HSL in pure CSS, so if you inspect the element it won't be converted to RGB like the rest of the Jquery elements)</p> </div> <div class="buttonbox grayscale"> <h2>9 shades of gray</h2> <div class="button fades">1</div> <div class="button fades">2</div> <div class="button fades">3</div> <div class="button fades">4</div> <div class="button fades">5</div> <div class="button fades">6</div> <div class="button fades">7</div> <div class="button fades">8</div> <div class="button fades">9</div> <div class="button fades">10</div> <p><strong>Easy Grayscale :</strong><br/>Setting H & S to 0, adjusting the lightness can give you the grayscale accurately to the percent. If you're after a colour gradient, all you have to do is set the saturation to 50% on top.<br/><br/><b>Example :</b><br/> H : 0, S : 0%, L : 0% = Black.<br/> H : 0, S : 0%, L : 20% = Charcoal. <br/> H : 0, S : 0%, L : 100% = white</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery Dynamic background-colours - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
*
{
font-family: 'Roboto Slab', serif;
}
body
{ background-color: #D1D1CF;
}
#wrapper
{ padding-left: 15px;
}
.button
{ width: 65px; height: 65px; background-color: #444; font-weight: bold; font-size: 2.85em; font-family: arial; color: #555; display:table-cell; text-align:center; vertical-align:middle;
}
h1
{
font-size: 1.72em;
}
p
{ width: 600px;
}
.selected
{ background-color: blue;
}
.hover
{ color: #fff; text-shadow:0px 0px 15px #faa;
}
.fades
{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition:all 0.3s ease; transition: all 0.3s ease;
}
.slidercontainer
{ display:block; position: relative; width: 250px; height: 100%; background-color: skyblue; margin-top: 10px;
}
.buttonbox.grayscale
{ margin-top: 50px;
}
.hoverelement
{ display:inline-block; width: 65px; height: 65px; background-color: hsl(0,15%,50%);
}
.hoverelement:last-of-type
{ background-color: hsl(120,15%,50%) ;
}
.hoverelement:hover:last-of-type
{ background-color: hsl(120,100%,50%) ;
}
.hoverelement:first-of-type
{ background-color: hsl(240,15%,50%) ;
}
.hoverelement:hover:first-of-type
{ background-color: hsl(240,100%,50%) ;
}
.hoverelement:hover
{ width: 65px; height: 65px; background-color: hsl(0,100%,50%);
}

Jquery Dynamic background-colours - Script Codes JS Codes

// Hi there! Welcome to the HSL slider.
// I know the interface is borked as hell in Internet Explorer, it seems like that browser can't render a proper inut~range slider.
//I'm new to webdev and am still learning. If you see any code that can be fixed up to be nicer , or perhaps even some hints in new concepts, please let me know.
$(document).ready(function(){ var button = $(".buttonbox").find(".button"); var dance = $("#dance"); //The Magic (function($){ $.fn.colourOn = function(btn){ //Dynamically get Hue based on element text var h = Math.floor((btn.text() * 0.1) * 360); var s = satSlider.val(); var l = lightSlider.val(); //Set CSS properties based on HSL values // H - hue from text element // S - Saturation from slider // L - Lightness from slider if(btn.closest(".buttonbox").hasClass("grayscale")) { btn.css( //For the grayscale box, using the value of h/360 to use as lightness. Dividing so you can get the number from 0 - 100, further dividing in half for sake of presentation {"background-color":"hsl(" + 0 + "," + 0 + "%," + h/3.6 / 2 +"%)", //This part is to "stick" the white number colour on click "color" : "#fff", "text-shadow":"0px 0px 15px #faa" }) } else { btn.css( {"background-color":"hsl(" + h + "," + s + "%," + l +"%)", //This part is to "stick" the white number colour on click "color" : "#fff", "text-shadow":"0px 0px 15px #faa" }) }; }; })(jQuery); (function($){ $.fn.colourOff = function(btn){ //clears all JS applied CSS btn.css({"background-color":"" , "color":"" , "text-shadow":""}); }; })(jQuery); button.on('click',function(){ //If already coloured, remove colour on click. if($(this).hasClass("selected")) {if($(this).closest(".buttonbox").hasClass("grayscale")){} else{$(this).colourOff($(this))}; } else { $(this).colourOn($(this)); } $(this).toggleClass("selected"); }) .on('mouseenter',function(){ $(this).toggleClass("hover"); }) .on('mouseleave',function(){ $(this).toggleClass("hover"); }); // THE html5 range input slider var satSlider = $("#saturation"); var saturationOutput = $("#sat-output")[0]; saturationOutput.innerHTML = satSlider.val(); var lightSlider = $("#lightness"); var lightnessOutput = $("#light-output")[0]; lightnessOutput.innerHTML = lightSlider.val(); //When the slider is changed, it will trigger the box colour function on any box that has been selected. satSlider.change(function(){ saturationOutput.innerHTML = $(this).val(); for(var i = 0;i < button.length; i++) { if(button.eq(i).hasClass("selected")) { button.eq(i).colourOn(button.eq(i)); } } }); lightSlider.change(function(e){ lightnessOutput.innerHTML = $(e.target).val(); for(var i = 0;i < button.length; i++) { if(button.eq(i).hasClass("selected")) { button.eq(i).colourOn(button.eq(i)); } } }); //Simulate initial click on grayscale boxes $(function(){ $(".grayscale").find(".button").click(); });
});
Jquery Dynamic background-colours - Script Codes
Jquery Dynamic background-colours - Script Codes
Home Page Home
Developer Wafs
Username wafs
Uploaded September 12, 2022
Rating 3
Size 4,488 Kb
Views 24,288
Do you need developer help for Jquery Dynamic background-colours?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wafs (wafs) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!