ClickPanel

Developer
Uriuriuriu
Size
3,068 Kb
Views
6,072
  1. ClickPanel Previews
  2. ClickPanel HTML Codes
  3. ClickPanel CSS Codes
  4. ClickPanel JS Codes

How do I make an clickpanel?

What is a clickpanel? How do you make a clickpanel? This script and codes were developed by Uriuriuriu on 10 January 2023, Tuesday.

ClickPanel Previews
IQ Test

ClickPanel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>clickPanel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="ele"> <table id="tbl"></table>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ClickPanel - Script Codes CSS Codes

body { background-color: #313738;
}
#ele { margin: 0 auto; padding: 50px 0;
}
table { margin: 0 auto;
}
td { width: 40px; height: 40px; text-align: left; color: #757d5f; font-size: 8px; border: solid 1px #313738; background-color: #07889B; border-radius: 4px;
}
td:hover { background-color: rgba(255, 255, 255, 0.8);
}
@keyframes forActive { 0% { background-color: #07889B; border-color: #313738; } 50% { background-color: #EEAA7B; border-color: #e5e8e9; } 100% { background-color: #E37222; border-color: #313738; }
}
@keyframes forActiveNone { 0% { background-color: #E37222; border-color: #313738; } 50% { background-color: #EEAA7B; border-color: #e5e8e9; } 100% { background-color: #07889B; border-color: #313738; }
}
.activeOn { background-color: #E37222; animation: 1 forActive 1s 0s ease-out none;
}
.activeOff { background-color: #07889B; animation: 1 forActiveNone 1s 0s ease-out none;
}

ClickPanel - Script Codes JS Codes

var CELL_NUM_X = 15;
var CELL_NUM_Y = 20;
var ANIM_DURATION = 70;
var ON_CLASS_NAME = 'activeOn';
var OFF_CLASS_NAME = 'activeOff';
var DEBUG_FLG = false;
var ar = [];
for (var y = 0; y < CELL_NUM_Y; y++) { $tr = $("<tr></tr>"); $("#tbl").append($tr); for (var x = 0; x < CELL_NUM_X; x++) { var num = x + (CELL_NUM_X * y); var viewNum = (DEBUG_FLG)?num : ""; $ele = $("<td id='cell" + num + "' data-cell-num='" + num + "'>" + viewNum + "</td>"); $ele.click(function() { // nowIndex // var eleIndex = parseInt($(this).attr("id").slice(4, 10)); var eleIndex = $(this).data("cellNum"); // className var addClassName = ON_CLASS_NAME; var removeClassName = OFF_CLASS_NAME; if ($(this).hasClass(addClassName)){ addClassName = OFF_CLASS_NAME; removeClassName = ON_CLASS_NAME; } // draw all points for (var xIndex = 0; xIndex < CELL_NUM_X; xIndex++) { for (var yIndex = 0; yIndex < CELL_NUM_Y; yIndex++) { var selectIndex = xIndex + (yIndex * CELL_NUM_X); var xDistance = Math.abs((eleIndex % CELL_NUM_X) - xIndex); var yDistance = Math.abs(parseInt(eleIndex / CELL_NUM_X) - yIndex); var durationPoint = xDistance + yDistance; if(DEBUG_FLG)$('#cell' + selectIndex).text(durationPoint); ar[selectIndex].delay(ANIM_DURATION * durationPoint).queue(function() { $(this).removeClass(removeClassName).addClass(addClassName).dequeue(); }); } } }); $tr.append($ele); ar.push($ele); }
}
ClickPanel - Script Codes
ClickPanel - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 4.5
Size 3,068 Kb
Views 6,072
Do you need developer help for ClickPanel?

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!

Uriuriuriu (uriuriuriu) Script Codes
Name
Three.js ver.1 rotate camera
Three.js earth
Now
SANGETUKI separator
Masonry
Simple genetic algorithm
Enchant.js sample
Glitchicken
Glitch Video
Shuffle text word separator
Create amazing art & images 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!