Edit fiddle - JSFiddle - Code Playground

HTML

xxxxxxxxxx
 
​
<!DOCTYPE html>
​
<html>
​
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
​
    <link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
    <title>tagger.site</title>
​
    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
​
    <!-- bootstrap css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
​
    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
​
</head>
​
<!-- Style -->
<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
​
​
body {
    font-family: 'Poppins', sans-serif;
}
​
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
​
p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}
​
.btn-info {
    color: #fff;
    background-color: #b81717;
    border-color: #52b817;
}
​
a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
​
.navbar {
    /*
    padding: 15px 10px;
    margin-right: 77px;
    */
    /* background: rgb(11, 223, 212); */
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-left:11px
}
​
.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}
​
.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}
​
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
​
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
​
#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*  background: #63c23e; NAVBAR BACKGROUND */
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}
​
#sidebar.active {
    margin-left: -250px;
}
​
#sidebar .sidebar-header {
    display: inline-flex;
    padding: 20px;
    /* background: #6d7fcc; */
    position: relative;
    width: 100%;
}
​
#sidebar ul.components {
    /* padding: 20px 0; */
    /* border-bottom: 1px solid #47748b; */
}
​
#sidebar ul p {
    color: #fff;
    padding: 10px;
}
​
#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
​
a[data-toggle="collapse"] {
    position: relative;
}
​
.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
​
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}
​
ul.CTAs {
    padding: 20px;
}
​
ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}
​
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
​
#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}
​
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
​
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        color: pink
        display: inline;
    }
}
​
#imageModal{
    z-index:3;
}
​
/* Sidebar expand/collapse button */
#sidebarCollapse{
    position: fixed;
    z-index: 2;
    
    margin-left: 84%;
    box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
}
​
/* Bottom of sidebar image stuff */
.responsive {
    width: 90%;
    bottom:20px;
    margin-left:5%;
    margin-right:5%;
}
​
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
​
/* image footer color boxes */
.colorBox {
  /*float: left;*/
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  vertical-align: middle;
  display: inline-block;
}
​
</style>
​
<!-- Image Source Popup Modal -->
<div id="imageModal" class="modal" >
    
​
  <!-- The Close Button -->
  <span class="close">×</span>
​
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01" src="static/assets/aesthetic-images/scan0025.jpg">
​
​
​
​
  <!-- Modal Caption (Image Text) -->
  
​
  <!-- YouTube vid (if possible)
  <iframe style="display:block; display: block; margin-right: auto; margin-left: auto;" width="420" height="345" src="https://www.youtube.com/embed/wNFaAn-AkPc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>  
     -->
</div>
​
​
​
<style>
​
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
​
#colorImageDisplay:hover {opacity: 0.7;}
​
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
​
/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
​
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
​
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}
​
@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}
​
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
​
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
​
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
​
<!-- Page Content -->
<div class="wrapper" class="toggled">
    
    <!-- Sidebar -->
    <nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
​
        <!-- sidenav top title -->
        <div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
            <!-- sidebar top title text -->
            <h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3> 
            <!-- sidebar expand/collapse button -->
            <button id='sidebarCollapse'>
                <img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
            </button> 
        </div>
​
        <!-- sidenav list of items -->
        <ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
            <!-- about page -->
            <li>
                <a href="#">About</a>
            </li>
         
        </ul>
​
     
    </nav>
​
    <!-- Page Content -->
    <div id="content" style='background: #cec5ac;'>
        
​
        <div class="col-sm-12">
​
            <div class="col" >
                <div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
                    <div class="col" style=''>
                        <h1 class="widgettitle"><strong>page title</strong></h1>
                    </div>
                    <div class="w-100"></div>
                    
                    <div class="col" style=''>
                        <a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v&#x3D;0df7k__KEHw'>Github</a>
                    </div>
                </div>
            </div>
            <div class="col" >
                <br>
                <br>
                <div class="row" style=' margin: auto;'>
                   <!-- page main content -->
<div class="container-fluid" style='color: #000000'>
​
    <div style="margin-top:-30px;">
​
        <!-- Header Text -->
​
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
            <div class='row'>
                <textarea  class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta  Song,Why,Mississippi Voodoo,Cool  Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,
                "></textarea>
                <button class="btn default" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
            </div>
        </div>
​
 <table class="fixed" align="left" style='width:73%' id="adjustments">
            <tbody>
                <!-- Columns -->
                <tr>
                    <th>Include</th>
                    <th>Tags Type</th>
                    <th>Depth</th>
                    <th># of Tags</th>
                </tr>
​
                <!-- Artists -->
                <tr>
                    <!-- Checkbox -->
                    <td>
                        <input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox"
                            checked="" onchange="prepUpdateTagsBox()">
                    </td>
                    <!-- Description -->
                    <td>Release Artist(s)</td>
                    <!-- Depth -->
                    <td>
                        <input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0"
                            max="100" value="100" onchange="prepUpdateTagsBox()">
                        <div id="releaseArtistsSliderValue">100%</div>
                    </td>
                    <!-- # of Tags -->
                    <td id='releaseArtistsNumber'>0</td>
                </tr>
​
                <!-- Release Info -->
                <tr>
                    <td>
                        <input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox"
                            checked="" onchange="prepUpdateTagsBox()">
                    </td>
                    <td>Release Info</td>
                    <td>
                        <input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0"
                            max="100" value="100" onchange="prepUpdateTagsBox()">
                        <div id="releaseInfoSliderValue">100%</div>
                    </td>
                    <!-- # of Tags -->
                    <td id='releaseInfoNumber'>0</td>
                </tr>
​
                <!-- Tracklist -->
                <tr>
                    <td>
                        <input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked=""
                            onchange="prepUpdateTagsBox()">
                    </td>
                    <td>Tracklist</td>
                    <td>
                        <input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100"
                            value="100" onchange="prepUpdateTagsBox()">
                        <div id="tracklistSliderValue">100%</div>
                    </td>
                    <!-- # of Tags -->
                    <td id='tracklistNumber'>0</td>
                </tr>
​
                <!-- Combinations -->
                <tr>
                    <td>
                        <input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox"
                            checked="" onchange="prepUpdateTagsBox()">
                    </td>
                    <td>Combinations</td>
                    <td>
                        <input type="range" class="combinationsSlider" id="combinationsSlider" min="0"
                            max="100" value="100" onchange="prepUpdateTagsBox()">
                        <div id="combinationsSliderValue">100%</div>
                    </td>
                    <!-- # of Tags -->
                    <td id='combinationsNumber'>0</td>
                </tr>
​
            </tbody>
        </table>
        
        <style>
  
        </style>
​
    </div>
​
  
</div>
                </div>
                
            </div>
​
        </div>
​
        
    </div>
</div>
​
<script type="text/javascript">
    setHoverColor();
    //setColors()
​
    async function setHoverColor(){
        var sheet = document.createElement('style')
        //create css style rule for on-hover tab and on hover github url
        let innerHTMLHoverColorStyle = `
            /* githubUrl hover */
            #githubUrl:hover{
                color:blue;
            }
​
            #sidebar ul li a:hover { 
                background: #8c743c; 
                color: #ffffff;
            } `;
        sheet.innerHTML = innerHTMLHoverColorStyle 
        document.head.appendChild(sheet);
    }
​
    async function setColors(){
        console.log('setcolors()')
        let colors = await getColors()
        let imgPath = colors.imgPath
        //6 possible colors: 
        //Vibrant
        //LightVibrant
        //DarkVibrant
        //Muted
        //LightMuted
        //DarkMuted
        
        //get high contrast colors for text
        /*
        let sidebarColorBackground = colors.colors['DarkVibrant']
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground = sidebarColorBackground.split(',');
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground_hex = rgbToHex(213, 23, 36)
        console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
        let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
        console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
        */
        
        //change color display text and set color box hex value
        //make all colors visible 
        //document.getElementById('pageColorsText').style.display = "block";
        /*
        //color 1
        var color1 = colors.colors['Vibrant']
        var color1_hex = rgbToHex(color1)
        document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
        //color 2
        var color2 = colors.colors['LightVibrant']
        var color2_hex = rgbToHex(color2)
        document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
        //color 3
        var color3 = colors.colors['DarkVibrant']
        var color3_hex = rgbToHex(color3)
        document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
        //color 4
        var color4 = colors.colors['Muted']
        var color4_hex = rgbToHex(color4)
        document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
        //color 5
        var color5 = colors.colors['LightMuted']
        var color5_hex = rgbToHex(color5)
        document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
        //color 6
        var color6 = colors.colors['DarkMuted']
        var color6_hex = rgbToHex(color6)
        document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
        */ 
​
        //change display image source
        //document.getElementById('colorImageDisplay').src=`${imgPath}`
​
        //setup image modal popup
        //imageModalSetup()
​
        //change colors
        var sheet = document.createElement('style')
​
        let hoverColor = `#8c743c`;
​
        let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
        sheet.innerHTML = innerHTMLHoverColorStyle 
        document.head.appendChild(sheet);
​
        let innerHTMLStyle = `
​
        /* main page body background color solid
        body { background: red; } */
​
        /* sidebar_header_background_color 
        #sidebarTop {background: ${colors.colors['LightMuted']};}   */ 
​
        /* sidebar_background_color 
        #sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
​
        /* active tab color 
        #currentPage { background: ${colors.colors['LightVibrant']}; } */
​
        /* main page body background color gradient 
        body { background: linear-gradient(2deg, color3_hex, color6_hex);} */ 
​
        /* ul ul a { expanded tab background color 
        .sideBarOption { background: ${colors.colors['Muted']}; }  */
​
        /* sidebar hover color */
        #sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
​
        //console.log("innerHTMLStyle = ", innerHTMLStyle)
        //sheet.innerHTML = innerHTMLStyle 
        //document.head.appendChild(sheet);
    }
​
    function invertColor(hex) {
        if (hex.indexOf('#') === 0) {
            hex = hex.slice(1);
        }
        // convert 3-digit hex to 6-digits.
        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.');
        }
        // invert color components
        var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
            g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
            b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
        // pad each with zeros and return
        return '#' + padZero(r) + padZero(g) + padZero(b);
    }
​
    function padZero(str, len) {
        len = len || 2;
        var zeros = new Array(len).join('0');
        return (zeros + str).slice(-len);
    }
    
    //rgb to hex 
    function componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }
​
    function rgbToHex(color) {
        //color = string like rgb(a,b,c)
        //remove string parts
        color = color.substring(4, color.length-1);
        //turn into arr
        color = color.split(',');
        
        return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
    }
​
    //setup image modal popup
    imageModalSetup()
​
    async function imageModalSetup(){
      
        // Get the modal
        var modal = document.getElementById("imageModal");
​
        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById("colorImageDisplay");
        
        //make image visible
        img.style.display = "block";
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            //captionText.innerHTML = this.alt;
        }
       
​
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
​
        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            $('#imageModal').fadeOut(500);
        }
    }
​
    $(document).ready(function () {
​
        //refresh button 
        const refreshButton = document.getElementById('refreshButton');
        const refreshPage = () => {
            location.reload();
        }
        refreshButton.addEventListener('click', refreshPage)
​
        
​
        //if clicking outside modal, close modal
        $(document).click(function (e) {
            console.log('close modal')
            if ($(e.target).is('#imageModal')) {
                $('#imageModal').fadeOut(500);
            }
        });
​
        //on escape key click, close modal
        $(document).keydown(function(event) { 
            if (event.keyCode == 27) { 
                $('#imageModal').fadeOut(500);
            }
        });
​
        //side bar collapse event
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
​
    });
​
    //make request to colors backend
    function getColors(){
        return new Promise(async function (resolve, reject) {
            $.ajax({
                type: 'POST',
                url: '/getColors',
                data: {
                    type: "varValue",
                },
            }).then((data) => {
                resolve(data)
            }).catch((err) => {
                reject(err)
            });
        })
    }
​
</script>
​
</html>

JavaScript

Module

xxxxxxxxxx
 
​

CSS

xxxxxxxxxx
 
       
table{
    table-layout: fixed;
    width: 100px;
}
            button {
                border: 2px solid black;
            }
            table, th, td {
                border: 2px solid black;
                background: white;
                color:black;
            }

1832px

JSFiddle Console. Turn on/off in Editor settings.
☁️ "Running fiddle"
"jQuery.Deferred exception: Cannot read properties of null (reading 'addEventListener')", "TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument.<anonymous> (https://fiddle.jshell.net/martinradio/b4z735tk/18/show/?editor_console=:837:23) at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29568) at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882)", undefined
"Script error."

Console

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console

Console

Language

Doctype

Language

Extensions

script attribute

Language

Reset CSS

Keep JSFiddle running.Whitelist us in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console

Tabs:

Visual:

Embed snippet Prefer iframe?:

Behavior

General

Console

New Automatically expiring fiddles

Ability to download a fiddle

Your recent fiddles when logged out

Tailwind CSS

Code linting and formatting

JSFiddle 3.0

Import fiddles as modules

Fiddle listing shows latest version

Evaluate code into the console

`script` attribute

Keep JSFiddle running.
Whitelist us in your content blocker.