Pythagoras

Developer
Bramus
Size
3,197 Kb
Views
50,600
  1. Pythagoras Previews
  2. Pythagoras HTML Codes
  3. Pythagoras CSS Codes
  4. Pythagoras JS Codes

How do I make an pythagoras?

Well I'm gonna build my own grid layout system! With blackjack! And hookers! #futurama. What is a pythagoras? How do you make a pythagoras? This script and codes were developed by Bramus on 23 July 2022, Saturday.

Pythagoras Previews
IQ Test

Pythagoras - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pythagoras</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container"> <div class="box" data-width="1" data-height="3">A</div>	<div class="box" data-width="2" data-height="3">B</div>	<div class="box" data-width="5" data-height="3">C</div>	<div class="box" data-width="1" data-height="3">D</div>	<div class="box" data-width="3" data-height="4">E</div>	<div class="box" data-width="3" data-height="5">F</div>	<div class="box" data-width="6" data-height="2">G</div>	<div class="box" data-width="3" data-height="3">H</div>	<div class="box" data-width="1" data-height="4">I</div>	<div class="box" data-width="3" data-height="4">J</div>	<div class="box" data-width="2" data-height="3">K</div>	<div class="box" data-width="3" data-height="6">L</div>	<div class="box" data-width="2" data-height="5">M</div>	<div class="box" data-width="1" data-height="1">N</div>	<div class="box" data-width="5" data-height="4">O</div>	<div class="box" data-width="2" data-height="5">P</div>	</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>

Pythagoras - Script Codes CSS Codes

body, html {	margin: 0;	padding: 0;	background: #353234;	min-width: 1024px;
}
.container {	position: relative;	width: 100%;	background: lime;	/*top: 50%;	-webkit-transform: translateY(-50%);	-ms-transform: translateY(-50%);	transform: translateY(-50%);*/	min-width: 1024px;
}
.box {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	position: absolute;	border: 1px solid black;	background: rgba(0,0,0,0.25);	opacity: 0;
}
.box--shown {	transition: opacity 1s;	opacity: 1;
}

Pythagoras - Script Codes JS Codes

var pythagoras = {	/** * Position all boxes in the container */	positionBoxes : function($container, $boxes, numCols, numRows, heightFactor) {	// Define width and height of boxes	var boxSizeWidth = 100 / numCols;	// var boxSizeHeight = 100 / numRows;	var boxSizeHeight = ((boxSizeWidth * heightFactor) / 100 * $(window).width());	// Build empty grid to work on	var grid = [];	for (var i = 0; i < numRows; i++) {	grid.push(new Array(numCols+1).join('0').split(''));	}	// Loop all boxes	$boxes.each(function() {	// Get the box along with it's (proportional) height and width	var $box = $(this),	width = $box.data('width') || 1,	height = $box.data('height') || 1;	// Find a place in the grid for the box and inject it there	yLoop:	for (var y = 0; y < numRows; y++) {	xLoop:	for (var x = 0; x < numCols; x++) {	// Extract the cell	var cell = grid[y][x];	console.log('checking cell ' + x + ',' + y + ' with value ' + cell);	// Cell isn't taken yet	if (cell == 0) {	// Check if there's enough space on the X-axis	for (var i = 0; i < width; i++) {	if (grid[y][x+i] != 0) {	continue xLoop;	}	}	// Check if there's enough space on the Y-axis	for (var j = 0; j < height; j++) {	if (grid[y+j][x] != 0) {	continue yLoop;	}	}	// All seems ok: lock it in the grid	for (var i = 0; i < width; i++) {	for (var j = 0; j < height; j++) {	grid[y+j][x+i] = 'X';	}	}	$box.css({	width: (boxSizeWidth * width) + '%',	height: (boxSizeHeight * height) + 'px',	left: (boxSizeWidth * x) + '%',	top: (boxSizeHeight * y) + 'px'	}).addClass('box--shown');	// store X and Y on box	$box.data('x', x);	$box.data('y', y);	break yLoop;	}	}	}	});	pythagoras._fixContainerHeight($container, numCols, numRows, heightFactor);	},	fixHeights: function($container, $boxes, numCols, numRows, heightFactor) {	pythagoras._fixBoxesHeight($container, $boxes, numCols, numRows, heightFactor);	pythagoras._fixContainerHeight($container, numCols, numRows, heightFactor);	},	_fixBoxesHeight: function($container, $boxes, numCols, numRows, heightFactor) {	var windowWidth = Math.max($(window).width(), $container.width());	// Fix all box heights (width goes automatically via CSS %)	$boxes.each(function() {	var $box = $(this),	height = $box.data('height') || 1,	y = $box.data('y');	var boxSizeWidth = 100 / numCols;	var boxSizeHeight = ((boxSizeWidth * heightFactor) / 100 * windowWidth);	$box.css({	height: (boxSizeHeight * height) + 'px',	top: (boxSizeHeight * y) + 'px',	});	});	},	/** * Fix the height of the container when all boxes are positioned inside it * Because we use absolute positioning, we need to do this. * @param jQuery $container The element wrapping all boxes * @param int numCols [description] * @param int numRows [description] * @param double heightFactor [description] * @return void */	_fixContainerHeight : function($container, numCols, numRows, heightFactor) {	var windowWidth = Math.max($(window).width(), $container.width());	// Fix container height	$('.container').css({	height: windowWidth * heightFactor * numRows / numCols + 'px'	});	}
};
// Thunderbirds are go!
jQuery(function($) { // Config var numCols = 12, numRows = 13, heightFactor = 0.45, $container = $('.container'), $boxes = $container.find('.box'); pythagoras.positionBoxes($container, $boxes, numCols, numRows, heightFactor); $(window).on('resize', function() { pythagoras.fixHeights($container, $boxes, numCols, numRows, heightFactor); }); // @TODO: throttle this
})
Pythagoras - Script Codes
Pythagoras - Script Codes
Home Page Home
Developer Bramus
Username bramus
Uploaded July 23, 2022
Rating 3
Size 3,197 Kb
Views 50,600
Do you need developer help for Pythagoras?

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!

Bramus (bramus) Script Codes
Name
CSS Revolving Door
Skrollr basic implementation
Canvas multiline fillText
Bouncing Ball Animation
Scrolling Horizontal Isotope
Photosphere Demo
Simple Flexbox Grid System
Simplest CSS Slideshow
CSS Glitch
Scroll Animations
Create amazing blog posts 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!