I'm trying to have a small grid drawn inside of a larger grid. Using zIndex doesn't seem to work at all and I'm out of ideas.
Code for drawing the grid
Javascript/JQuery:
function creategrid(size){
var primeW = Math.floor((400) / size),
primeH = Math.floor((250) / size),
standardW = Math.floor((500) / size),
standardH = Math.floor((500) / size);
var standard = document.createElement('div');
standard.className = 'grid';
standard.style.width = (standardW * size) + 'px';
standard.style.height = (standardH * size) + 'px';
var prime = document.createElement('div');
prime.clasName = 'gridprime';
prime.style.width = (primeW * size) + 'px';
prime.style.height = (primeH * size)+ 'px';
prime.style.zIndex= '-1';
standard.appendChild(prime);
for (var i = 0; i < standardH; i++) {
for (var p = 0; p < standardW; p++) {
var cell = document.createElement('div');
cell.style.height = (size - 1) + 'px';
cell.style.width = (size - 1) + 'px';
cell.style.zIndex= '10';
standard.appendChild(cell);
}
}
document.body.appendChild(standard);
}
creategrid(10);
CSS for telling the grids apart.
CSS:
.grid {
margin: 0px auto auto;
border: 1px solid #ccc;
border-width: 0 1px 1px 0;
background-color: #28ACF9;
}
.grid div {
border: 1px solid #ccc;
border-width: 1px 0 0 1px;
float: left;
}
.gridprime {
margin-top: 50px ;
margin-left: 50px;
border: 1px solid #000;
color: #FFFF33;
float: left;
}
Right now the prime grid is either hidden or not loading the css assigned to it, the only way that you can tell it's there is by the fact that it displaces the cells.
Ideally the cells will sit on top of the standard and prime grids, and the prime grid will correctly use the defined styles.
jsFiddle
You needed a
prime.style.position = 'absolute'
and
cell.style.positon = 'relative'
added to your z-indexes.
Check it out here http://jsfiddle.net/7MJpf/5/
Related
There are 3 Vertical divs, as shown in the picture. There are some child divs inside each div that are shown by blue rectangles. I need the children divs to be level vertically. How can I do it?
As they said, in pure css/html is not possible if they are in separated containers.
Using javascript you can first create the 'base' element (in this case, the inner divs of the center column), save its coord and then create the side ones and pos them with the saved coords.
This is a rough example, but can give the idea
for (let i = 1; i < 10; i++) {
//Create the center column element first, from where to get the Y pos
let elem2 = document.createElement('div');
elem2.style.width = 'calc(100% - 10px)';
elem2.style.height = '50px';
elem2.style.margin = '5px';
elem2.style.background = 'lightblue';
document.querySelector('.col2').append(elem2);
let coords = elem2.getBoundingClientRect(); //Getting coords data
//creating first column elem
let elem1 = document.createElement('div');
elem1.style.position = 'absolute';
elem1.style.top = coords.top + 'px'; //use de y pos from above
elem1.style.width = 'calc(100% - 10px)';
elem1.style.height = '25px';
elem1.style.margin = '0 5px';
elem1.style.background = 'pink';
document.querySelector('.col1').append(elem1);
//creating third column elem
let elem3 = document.createElement('div');
elem3.style.position = 'absolute';
elem3.style.top = coords.top + 'px'; //use de y pos from above
elem3.style.width = 'calc(100% - 10px)';
elem3.style.height = '25px';
elem3.style.margin = '0 5px';
elem3.style.background = 'lightgreen';
document.querySelector('.col3').append(elem3);
}
body,
html {
margin: 0;
padding: 0;
background: lightyellow
}
.container {
display: flex;
}
.col1 {
position: relative;
width: 75px;
border: 2px solid red
}
.col2 {
position: relative;
flex-grow: 1;
border: 2px solid blue
}
.col3 {
position: relative;
width: 150px;
border: 2px solid green
}
<div class="container">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
</div>
</div>
I need help with a rectangular div whose diagonal length in increased or decreased using js. I want to insert a line in diagonal to label diagonal length as diagonal is minimized or maximized using the +/- buttons.
I want the line to resize automatically without loosing quality. I want to keep the background color green and the image and label color to be white. For that i want to use css to draw line instead of a image. I have attached image of how div should looks like.
Thanks alot for the support.
Div Demo Image
function max(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h + 5 +'px';
document.getElementById('resizable').style.width= w + 5 +'px';
}
function min(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h - 5 +'px';
document.getElementById('resizable').style.width= w - 5 +'px';
}
<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable" style="border:1px solid black;background-color:green;width:100px;height:50px;">
</div>
You can use another div with a position:absolute
const dash = document.getElementById('dash')
const div = document.getElementById('resizable')
function getLength() {
dash.textContent = Math.floor(Math.sqrt((Math.pow(div.clientHeight, 2) + Math.pow(div.clientWidth, 2))))
}
function max() {
var h = document.getElementById('resizable').clientHeight;
var w = document.getElementById('resizable').clientWidth;
const angle = Math.atan(h / w) * 180 / Math.PI;
document.getElementById('resizable').style.height = h + 5 + 'px';
document.getElementById('resizable').style.width = w + 5 + 'px';
dash.style.transform = `rotate(${angle}deg)`;
getLength()
}
function min() {
var h = document.getElementById('resizable').clientHeight;
var w = document.getElementById('resizable').clientWidth;
const angle = Math.atan(h / w) * 180 / Math.PI;
document.getElementById('resizable').style.height = h - 5 + 'px';
document.getElementById('resizable').style.width = w - 5 + 'px';
dash.style.transform = `rotate(${angle}deg)`;
getLength()
}
getLength()
#resizable {
border: 1px solid black;
background-color: green;
width: 100px;
height: 50px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
#dash {
position: absolute;
text-align: center;
content: "";
line-height: 0;
width: 150%;
height: 1px;
background-color: #fff;
transform: rotate(26.5deg);
}
<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable">
<div id="dash"></div>
</div>
I like to print a very long table on multiple pages. On each page I have a fixed header, multiple entries in body section with random heights, and a footer. Random entries should not break across pages and the footer should use the available remaining space. I created a sample code with a print button. When I click on the print button, I want the orange box to start right after its preceding red box and take all the space to the bottom of the page. Any ideas how to fix the issue?
const main = document.querySelectorAll(".table-body")[0];
const newDiv = document.createElement("div");
for (let i = 0; i < 30; i++) {
newDiv.innerHTML += `<div class="box" style="height: ${getRandomIntInclusive(120,250)}px">Line ${i+1} </div>`
}
main.appendChild(newDiv);
document.getElementById("print").addEventListener("click", () => {
window.print();
});
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
table {
width: 100%;
border: 1px solid blue;
padding: 10px;
}
.table-body {
border: 1px dashed green;
padding: 10px;
}
.box {
border: 1px solid red;
page-break-inside: avoid;
}
table > tfoot > tr > td {
border: 2px solid orange;
}
.table-footer {
border: 1px solid black;
min-height: 100px;
vertical-align: top;
}
#media print {
#page {
size: letter;
}
#print {
display: none;
}
}
<button id='print'>Print</button>
<table>
<thead>
<tr>
<th>
Header
</th>
<tr>
</thead>
<tbody>
<tr>
<td>
<div class='table-body'></div>
</td>
<tr>
</tbody>
<tfoot>
<tr>
<td>
<div class='table-footer'>Footer</div>
</td>
<tr>
</tfoot>
</table>
I was not able to solve the issue using a table so I ended up solving my problem using divs. I kept track of the random height of divs on each page and assigned the remaining space to the footer. My footers have some min-height limitation to ensure that I have a footer on each page. The content of each page is placed in another div to give me more control on styling each page; e.g: page-break-after and overflow. The solution is not ideal and hoping that someone comes with a better approach but it satisfies my need for the moment. Below you can find the updated code:
const main = document.getElementById("main");
const newDiv = document.createElement("div");
const paperHeight = 11 // paper height in inch
const paperMargin = 1; // sum of top and bottom paper margins in inch
const overflow = 0.11; // used to protect page overflow to the next page
const dpi = 96; // Display dots per inch (DPI)
const maxHeight = (paperHeight - paperMargin) * dpi; // max page height
const footerMinHeight = 40; // Min height of footer
const headerHeight = 100; // Height of header in px
const numOfItems = 20; // Number of items
let j = 0;
let items = '';
let pageCount = 1;
do {
items += `<div class="page" style="max-height: ${paperHeight - paperMargin - overflow}in"><div class="box header" style="height: ${headerHeight}px">Page ${pageCount} - Header</div>`;
let pageHeight = headerHeight;
do {
const elementHeight = getRandomIntInclusive(60, 250);
if (elementHeight + pageHeight > maxHeight - footerMinHeight || j === numOfItems) {
items += `<div class="box footer" style="height: ${maxHeight - pageHeight}px">Footer</div></div>`;
break;
} else {
pageHeight += elementHeight;
j++;
}
items += `<div class="box" style="height: ${elementHeight}px">Item ${j} </div>`;
} while (j <= numOfItems)
pageCount++;
} while (j < numOfItems)
newDiv.innerHTML = items;
main.appendChild(newDiv);
document.getElementById("print").addEventListener("click", () => {
window.print();
});
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
* {
box-sizing: border-box;
}
.page {
border: 1px dashed green;
page-break-after: always;
overflow: hidden;
}
.box {
border-bottom: 1px solid red;
}
.header {
background: #e6ffe6
}
.footer {
background: #fdfed6;
}
#media print {
#page {
size: letter;
margin: 0.5in;
}
#print {
display: none;
}
}
<button id='print'>Print</button>
<div id='main'></div>
I have two elements, and one is moving towards the other. I am trying to get the new distance as it moves closer. Consider the code below:
<html>
<center>
<body onload = 'start()'>
<div class='field'>
<div id='bull'></div>
<div id='mount'></div>
</div>
<button id='one'>DO</button>
</body>
</center>
<style>
.field{
width: 440px;
height: 260px;
background: rgba(0, 0, 0, .2);
margin-top: 30px;
border: 1px solid #222;
border-radius: 10px;
}
#bull{
width: 15px;
height: 10px;
background: #000;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
}
#mount{
width: 60px;
height: 30px;
background: rgba(20, 10, 45);
color: #fff;
border-radius: 4px;
margin-top: 210px;
}
</style>
<script type='text/javascript'>
function start() {
var ball = document.getElementById('bull');
var button = document.getElementById('one');
var mount = document.getElementById('mount');
button.addEventListener('click', go);
var x_pos = 0;
var y_pos = 0;
var bounce_point = 200;
var ball_dim = ball.getBoundingClientRect();
var ball_h_half = ball_dim.width / 2;
var ball_w_half = ball_dim.height / 2;
var mount_dim = mount.getBoundingClientRect();
var mount_h_half = mount_dim.width / 2;
var mount_w_half = mount_dim.height / 2;
function go() {
for(x_pos = 0; bounce_point > x_pos; x_pos++) {
ball.style.margin = x_pos + "px";
ball.style.transition = x_pos/2 + "s";
var dist = ((ball_h_half - mount_h_half)*(ball_w_half - mount_w_half)) + ((mount_h_half - ball_h_half)*(mount_w_half - ball_w_half));
console.log(dist);
if(dist < 3) {
console.log('One');
}
}
}
}
</script>
When bull reaches comes within 3px of mount, nothing happens... I've pretty much explained the issue as best as I can.
**
When bull reaches comes within 3px of mount, nothing happens... I've pretty much explained the issue as best as I can.**
Well i tried a little bit more, and your logic doens't seem to fit to what you want to do. First of all, you probably noticed your value in the log doesn't change.
It could have been because the values are retreived outside the loop, but not only (they actually have to be in the loop to be updated). You have 2 other problems: first, you are measuring the elements width and height, which don't take account of margin or other positioning. Your elements don't change size, so the value also won't. The other problem is actually the transition itself on the movement. Because of the delay, all your loop iterations are most probably done, and the margin already set to its final value when your "bull" effectively starts to move. It means that in the loop, you can't detect the position change, the element having not started to move yet. Using the value that was just set (margin) instead of detecting the real position of the element should show a progression for the value, but it makes harder to detect the collision because your 2 elements don't have the same positioning rules and you can't just compare the margins.
Here is a quick example that gets updated values (because the transition has been disabled, if you enable back, the problem comes again). You'll notice your calculation for the collision is wrong too. You can't just compare a distance between 2 corners for that, for a rectangle it's rather "has gone beyond left vertical edge AND has gone beyond top horizontal edge" (this of course takes only in account the top left corner, to be complete, it should also be added that it must not have reached the right or bottom edge yet).
Well, I can't propose you an all ready solution, but this addresses your code main issues:
<html>
<center>
<body onload = 'start()'>
<div class='field'>
<div id='bull'></div>
<div id='mount'></div>
</div>
<button id='one'>DO</button>
</body>
</center>
<style>
.field{
width: 440px;
height: 260px;
background: rgba(0, 0, 0, .2);
margin-top: 30px;
border: 1px solid #222;
border-radius: 10px;
}
#bull{
width: 15px;
height: 10px;
background: #000;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
}
#mount{
width: 60px;
height: 30px;
background: rgba(20, 10, 45);
color: #fff;
border-radius: 4px;
margin-top: 210px;
}
</style>
<script type='text/javascript'>
function start() {
var ball = document.getElementById('bull');
var button = document.getElementById('one');
var mount = document.getElementById('mount');
button.addEventListener('click', go);
var x_pos = 0;
var y_pos = 0;
var bounce_point = 200;
var ball_dim, ball_x, ball_y, mount_dim, mount_x, mount_y, diff_x, diff_y;
var stayInLoop = true;
//ball.style.transition = "0.4s"; //i don't know why you updated the transition time based on position, changed to a fixed value outside the loop because it's quicker for the example
function go() {
for(x_pos = 0; bounce_point > x_pos && stayInLoop; x_pos++) {
ball_dim = ball.getBoundingClientRect();
ball_y = ball_dim.top + 10; // +10 because we're considering the bottom edge of bull
ball_x = ball_dim.left + 15; // +15 because we're considering the right edge of bull
mount_dim = mount.getBoundingClientRect();
mount_y = mount_dim.top;
mount_x = mount_dim.left;
diff_x = mount_x - ball_x;
diff_y = mount_y - ball_y;
console.log(diff_x, diff_y);
ball.style.margin = x_pos + "px";
if(diff_x < 3 && diff_y < 3) {
console.log('One');
stayInLoop = false;
}
}
}
}
</script>
EDIT/SUGGESTION: i suggest looking at window.requestAnimationFrame() MDN doc here for a better control on animations
I want to build a page to show a blown-up version of an image.
I have the smaller image and the bigger image built out. I am not sure how to build the in between portion that looks like rays coming out of the smaller image.
HTML
<div class="flex">
<div class="exp" tabindex="0">
<img class="image" src="http://via.placeholder.com/50x50">
</div>
<div class="big-image">
<img class="image" src="http://via.placeholder.com/350x550">
</div>
</div>
CSS
.exp {
margin: 5px;
width: 100px;
height: 100px;
background-color: #ded3c0;
border-radius: 100%;
line-height: 80px;
align-items: center;
display: flex;
justify-content: center;
}
.exp .image {
width: 50px;
height: 50px;
}
.big-image {
border: 1px solid #000;
padding: 20px;
border-radius: 19px;
}
.flex {
display: flex;
align-items: center;
justify-content: space-around;
}
Any pointers on how to do this is helpful.
Here is jsfiddle https://jsfiddle.net/npkeq7ut/
If you need only lines you can achieve this with JS and skew transform:
let topLine = document.getElementById('top-line');
let bottomLine = document.getElementById('bottom-line');
function updateLines()
{
let b = document.getElementById('b').getBoundingClientRect();
let a = document.getElementById('a').getBoundingClientRect();
let left = a.right;
let width = b.left - a.right;
let tHeight = a.top - b.top;
let tTop = tHeight / 2 + b.top;
let tAngle = Math.atan(tHeight / width) * 180 / Math.PI;
let bHeight = b.bottom - a.bottom;
let bTop = bHeight / 2 + a.bottom - bottomLine.offsetHeight;
let bAngle = Math.atan(bHeight / width) * 180 / Math.PI;
topLine.style.top = tTop + "px";
topLine.style.left = left + "px";
topLine.style.width = width + "px";
topLine.style.transform = "skewY("+(-tAngle)+"deg)";
bottomLine.style.top = bTop + "px";
bottomLine.style.left = left + "px";
bottomLine.style.width = width + "px";
bottomLine.style.transform = "skewY("+(bAngle)+"deg)";
}
updateLines();
Fiddle: https://jsfiddle.net/JacobDesight/f40yeuqe/2/
#EDIT
If you want trapeze with background then here is example using canvas: https://jsfiddle.net/JacobDesight/f40yeuqe/3/
This could be a starting point for you.
Code by thecodeplayer.
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
$(document).ready(function() {
var native_width = 0;
var native_height = 0;
//Now the mousemove function
$(".magnify").mousemove(function(e) {
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if (!native_width && !native_height) {
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
} else {
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$(".large").fadeIn(100);
} else {
$(".large").fadeOut(100);
}
if ($(".large").is(":visible")) {
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width() / 2;
var py = my - $(".large").height() / 2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({
left: px,
top: py,
backgroundPosition: bgp
});
}
}
})
})
/*Some CSS*/
* {
margin: 0;
padding: 0;
}
.magnify {
width: 200px;
margin: 50px auto;
position: relative;
}
/*Lets create the magnifying glass*/
.large {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*Lets load up the large image first*/
background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
/*To solve overlap bug at the edges during magnification*/
.small {
display: block;
}
<!-- Lets make a simple image magnifier -->
<div class="magnify">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
</div>
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->
<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>