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>
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 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>
I have created a very basic animated percentage bar with HTML, CSS, and JS the only problem is that I am trying to devise a way to also animate the increase and/or decrease of the percentage output to go along with an animated percentage bar. In the example below and in this JsFiddle I have successfully created that with the only problem being that it doesn't seem to be the most efficient or effective way of doing it.
In the code snippet directly below I'm creating this animated effect by...
Setting x equal to setInterval
Capturing the width of percent bar on the left and removing the px from the end of the string.
Capturing the width of percent bar on the right and removing the px from the end of the string.
Displays the percent value for the left (blue) bar inside the tooltip that can be seen when hovered over.
Displays the percent value for the right (red) bar inside the tooltip that can be seen when hovered over.
Displays the percent value of the left (blue) bar below the percent bar.
Displays the percent value of the right (red) bar below the percent bar.
All of this code below will run every 64 Milliseconds.
This code will only run for 2000 Milliseconds which is the same amount of time that I have set the transition for the percent bars.
Note: The whole point of the code below is to give the illusion that the percent values are increasing as either of the percent bars are increasing. In short, the goal is to make it seem more animated rather than the number all of a sudden seeing the number jump from one number to the next.
There just has to be a better way of achieving the same effect (or better) rather than pulling data from the DOM every 64 Milliseconds. There are tons of real-time graph's out on the web that achieve the same effect but I can't figure out how so I came up with my own and don't really think that they do it this way either. Any ideas??? I would only like to use pure Javascript with no libraries such as jQuery.
var x = setInterval(function() {
var left = parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
var right = parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
p_bar_left.querySelector('.percent-value').innerText = left.toFixed(2) + '%';
document.querySelector('#blue').querySelector('.percent-amount').innerText = left.toFixed(2) + '%';
p_bar_right.querySelector('.percent-value').innerText = right.toFixed(2) + '%';
document.querySelector('#red').querySelector('.percent-amount').innerText = right.toFixed(2) + '%';
}, 64);
setTimeout(function() {
clearInterval(x)
}, 2000);
var good = document.querySelector('#good');
var bad = document.querySelector('#bad');
var p_bar_left = document.querySelector('#progressbar-left');
var p_bar_right = document.querySelector('#progressbar-right');
var counter_left = 0;
var counter_right = 0;
var percent_left = 0;
var percent_right = 0;
function changePercent(increment, which) {
if (which == 'left') {
counter_left += increment;
} else if (which == 'right') {
counter_right += increment;
} else {
throw "Don't know which value to increase.";
}
percent_left = (counter_left / (counter_left + counter_right)) * 100;
percent_right = (counter_right / (counter_left + counter_right)) * 100;
p_bar_left.style.width = percent_left + '%';
p_bar_right.style.width = percent_right + '%';
document.querySelector('#total-amount').innerText = counter_right + counter_left;
var x = setInterval(function() {
var left = parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
var right = parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
p_bar_left.querySelector('.percent-value').innerText = left.toFixed(2) + '%';
document.querySelector('#blue').querySelector('.percent-amount').innerText = left.toFixed(2) + '%';
p_bar_right.querySelector('.percent-value').innerText = right.toFixed(2) + '%';
document.querySelector('#red').querySelector('.percent-amount').innerText = right.toFixed(2) + '%';
}, 64);
setTimeout(function() {
clearInterval(x)
}, 2000);
}
good.addEventListener('click', function() {
changePercent(1, 'left');
});
bad.addEventListener('click', function() {
changePercent(1, 'right');
});
var tooltip = document.querySelectorAll('.tooltip');
var tooltipelement = document.querySelectorAll('#progressbar-left, #progressbar-right');
for (var x = tooltipelement.length; x--;) {
tooltipelement[x].addEventListener('mousemove', function(e) {
for (var i = tooltip.length; i--;) {
tooltip[i].style.left = e.pageX + 20 + 'px';
tooltip[i].style.top = e.pageY + 'px';
}
});
}
#progressbar-container {
display: flex;
position: relative;
width: 50vw;
height: 32px;
border: 2px solid black;
background-color: #ccc;
justify-content: space-between;
}
#progressbar-left {
position: relative;
height: 100%;
background-color: blue;
transition: width 2s;
align-items: center;
justify-content: center;
}
#progressbar-right {
position: relative;
height: 100%;
background-color: red;
transition: width 2s;
align-items: center;
justify-content: center;
}
.tooltip {
display: none;
position: fixed;
width: auto;
height: auto;
padding: 6px;
background-color: black;
text-align: center;
border-radius: 6px;
z-index: 1;
}
.object {
display: inline-block;
color: #fff;
}
.percent-value {
display: inline-block;
color: #fff;
}
#progressbar-left:hover .tooltip {
display: block;
}
#progressbar-right:hover .tooltip {
display: block;
}
#total {
display: block;
font-weight: bold;
}
#total-amount {
display: inline-block;
font-weight: normal;
}
#blue,
#red {
display: block;
font-weight: bold;
}
.percent-amount {
display: inline-block;
font-weight: normal;
}
<body>
<input type="button" value="Good" id="good">
<input type="button" value="Bad" id="bad">
<div id="progressbar-container">
<div id="progressbar-left">
<div class="tooltip">
<span class="tooltiptext">
<span class="object">Blue</span>
<span class="percent-value"></span>
</span>
</div>
</div>
<div id="progressbar-right">
<div class="tooltip">
<span class="tooltiptext">
<span class="object">Red</span>
<span class="percent-value"></span>
</span>
</div>
</div>
</div>
<span id="total">Total: <p id="total-amount">0</p></span>
<span id="blue">Percent Blue: <p class="percent-amount">0%</p></span>
<span id="red">Percent Red: <p class="percent-amount">0%</p></span>
</body>
JsFiddle
I have one image and had a circle(drawn using css3) in it.
Now when I zoom in/out the image, I want to keep the position of the circle at the same location in the image, so that when image zoom in/out the circle will translate, but I am unable how to calculate the co-ordinates by which I need to translate the circle on image zoom in/out. Any suggestion!!
The image and the circle are the sibling elements in HTML
It took me a while but I wrote something that can be used with <img> tag and another element with position:absolute;.
$(document).ready(function() {
function setDimentions(first) {
IW = $('.img_container img').width();
IH = $('.img_container img').height();
PW = $('.pointer').outerWidth();
PH = $('.pointer').outerHeight();
pointerL = Number($('.pointer').css('left').replace('px', ''));
pointerT = Number($('.pointer').css('top').replace('px', ''));
if (first) {
Lperc = pointerL * 100 / IW;
Tperc = pointerT * 100 / IH;
Wperc = PW * 100 / IW;
Hperc = PH * 100 / IH;
}
Lpx = Lperc * IW / 100;
Tpx = Tperc * IH / 100;
Wpx = Wperc * IW / 100;
Hpx = Hperc * IH / 100;
}
setDimentions(true);
$(window).on('resize', function() {
setDimentions();
$('.pointer').css({
'width': Wpx,
'height': Hpx,
'top': Tpx,
'left': Lpx
})
})
});
* {
margin: 0;
box-sizing: border-box;
}
.img_container {
width: 80%;
margin: 0 10%;
position: relative;
}
img {
max-width: 100%;
}
.pointer {
width: 30px;
height: 30px;
border-radius: 999px;
border: thin solid red;
position: absolute;
left: 35%;
top: 16%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img_container">
<img src="http://i.imgur.com/XXxgr7xg.jpg">
<div class="pointer">
</div>
</div>
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/