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 am trying to create a vertical slide show on scroll. One picture-screen glide over the next one, and then the second over the third, and so on…
HTML/CSS structure looks as following: external container has display property relative. Inside it there are several containers with images with the property fixed, so that they are all as a card deck and you pull card by card from the top.
JavaScript function should load the first pare of image-pages and follow the amount of scrolled distance changing the index of the image-page and changing the z-index of the layer (the top one: 2, the one blow: 1 and so on...)
var mansDok = []; var paklajAttal = [];
// Find all the slides containers
mansDok = document.getElementsByClassName("slaide");
// Find all the slides IDs
for(i=0; i<mansDok.length; i++) {
paklajAttal[i] = mansDok[i].id;
}
// Height of the browser window
var logAugst = document.documentElement.clientHeight;
// Start function on scrolling the contents
window.onscroll = function() {vertikSlaidrade()};
//
// Slideshow function
function vertikSlaidrade() {
var k = 0; var i = 0, winScroll;
// How far the screen been scrolled
winScroll = document.documentElement.scrollTop || document.body.scrollTop;
// Change slides while scrolling
if(winScroll <= logAugst * 1) {
document.getElementById(paklajAttal[k]).style.zIndex = "2";
document.getElementById(paklajAttal[k]).style.position = "relative";
document.getElementById(paklajAttal[k+1]).style.display = "block";
document.getElementById(paklajAttal[k+1]).style.position = "fixed";
} else if(winScroll <= logAugst * 2) {
document.getElementById(paklajAttal[k+1]).style.zIndex = "3";
document.getElementById(paklajAttal[k+1]).style.position = "relative";
document.getElementById(paklajAttal[k+2]).style.display = "block";
document.getElementById(paklajAttal[k+2]).style.position = "fixed";
} else if(winScroll <= logAugst * 2.8) {
document.getElementById(paklajAttal[k+2]).style.zIndex = "4";
document.getElementById(paklajAttal[k+2]).style.position = "relative";
document.getElementById(paklajAttal[k+3]).style.display = "block";
document.getElementById(paklajAttal[k+3]).style.position = "fixed";
} else if(winScroll > logAugst * 2.8) {
// Run reset function by the end of slides
atiestat();
}
}
// Function to reset the slides properties
function atiestat() {
for(var i=0; i<mansDok.length; i++) {
document.getElementById(paklajAttal[i]).style.zIndex = "0";
document.getElementById(paklajAttal[i]).style.position = "absolute";
document.getElementById(paklajAttal[i]).style.display = "none";
}
// Show the first pair of slides
document.getElementById(paklajAttal[0]).style.display = "block";
document.getElementById(paklajAttal[0]).style.zIndex = "2";
document.getElementById(paklajAttal[1]).style.position = "fixed";
document.getElementById(paklajAttal[1]).style.zIndex = "1";
}
* {box-sizing: border-box;}
html, body{
height: 100%;
margin: 0px;
padding: 0px;
background-color: #000;
font-size: 1em;
}
main {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
/* Page with slide */
.slaide {
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
margin: 0px;
padding: 0px;
width: 100%;
display: none;
}
.slaide img {
width: 1230px; /* Doesn't work below this value !?!? */
}
/* Empty filler */
.tukss {
display: block;
margin: 0px;
padding: 0px;
height: 1000px; /* Do NOT reduce this value!!! */
}
<main>
<div class="slaide" id="lapa1" style="display: block;">
<img src="https://www.w3schools.com/howto/img_parallax.jpg">
</div>
<div class="slaide" id="lapa2">
<img src="https://www.w3schools.com/howto/img_parallax2.jpg">
</div>
<div class="slaide" id="lapa3">
<img src="https://www.w3schools.com/howto/img_parallax3.jpg">
</div>
<div class="tukss" id="tukss"></div>
</main>
May be its not the most elegant version of JS code, but everything works perfectly as I wanted. Somehow it doesn’t work if I change the image size below 1230px or to 100% and reduce the width of the browser window. (Images are from W3Schools.com)
I would appreciate if somebody could help me out with this situation.
I'm trying to clone a tooltip div and append it to the document body while also centering around it's original parent.
window.addEventListener("load", function() {
const tooltipActivator = document.querySelectorAll("[data-onsitetooltip]");
for(let i = 0; i < tooltipActivator.length; i++) {
if(tooltipActivator[i] != undefined) {
let added = false;
tooltipActivator[i].addEventListener("mouseenter", function(e) {
const clone = tooltipActivator[i].querySelector(".onsiteTooltip").cloneNode(true),
elemRect = tooltipActivator[i].getBoundingClientRect(),
offset_top = elemRect.top - document.body.getBoundingClientRect().top,
offset_left = elemRect.left;
clone.style.visibility = "visible";
clone.style.opacity = "1";
clone.style.top = offset_top + parseInt(tooltipActivator[i].dataset.onsitetooltiptop) + "px";
clone.style.left = offset_left + "px";
clone.style.transform = "translateX(-"+tooltipActivator[i].offsetWidth/2+"px)";
clone.style.pointerEvents = "none";
document.body.appendChild(clone);
});
tooltipActivator[i].addEventListener("mouseleave", function(e) {
const tooltipToRemove = document.querySelectorAll("body > .onsiteTooltip");
for(let z = 0; z < tooltipToRemove.length; z++) {
if(tooltipToRemove[z] != undefined) {
document.body.removeChild(tooltipToRemove[z]);
}
}
});
}
}
});
.onsiteTooltip {
visibility: hidden;
opacity: 0;
width: 25em;
cursor: auto;
background: #0c1633;
padding: 1em;
#include border-radius(0.25rem);
#include box-shadow($shadow-big);
position: absolute;
z-index: 4;
border: 1px solid rgba(0, 0, 0, 0.05);
#include transition(visibility 0s, opacity 0.2s linear);
font-size: 0.9em;
}
.myDiv { height: 100px; background: red; }
<div class="myDiv" data-onsitetooltip data-onsitetooltiptop="70">
<div class="onsiteTooltip">Hello World</div>
</div>
The goal is to make it so when appended to the body, it should be below and centered around the element with the data-onsitetooltip property, without appending it as a child to that element.
Depending on the element that hold the tooltip, it works sometimes, but on other elements it sometimes isn't centered and misaligned.
Like this: http://prntscr.com/op0wuk
How can I accomplish this?
EDIT: I've tried to set the offset left to 50% of the parent and then -50% on the tooltip like you would do in CSS but that did not work either.
I need to use JS no JQuery plugins to make a simple tooltip like on the image below.
Click on ? image should open this tooltip and click again on the same image to close it.
I think that it's simple for someone with good JS knowledge but I can't do it anyway :(
This is something that I have tried I know it's not too much but I am simply stuck.
How to display it like on the image, how to hide it when it's open and how to add that little triangle in the corner?
myfiddle
<img id="info" src="http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png"/>
<div id="ttip">bla bla</div>
document.getElementById('info').addEventListener('click', function(){
// how to check if it's visible so I can close tooltip
document.getElementById('ttip').style.display="block";
});
#info{margin-left:100px;margin-top:50px;}
#ttip
{
width: 280px;
z-index: 15001;
top: 0px;
left: 0px;
display: none;
border-color: #666;
background-color: #fff;
color: #666;
position: relative;
border: 1px solid #666;
padding: 15px 9px 5px 9px;
text-align: left;
word-wrap: break-word;
overflow: hidden;
}
Clean up the css and this will basically do it:
<script>
function doTip(e){
var elem = e.toElement;
if(elem.getAttribute('data-tip-on') === 'false') {
elem.setAttribute('data-tip-on', 'true');
var rect = elem.getBoundingClientRect();
var tipId = Math.random().toString(36).substring(7);
elem.setAttribute('data-tip-id', tipId);
var tip = document.createElement("div");
tip.setAttribute('id', tipId);
tip.innerHTML = elem.getAttribute('data-tip');
tip.style.top = rect.bottom+ 10 + 'px';
tip.style.left = (rect.left-200) + 'px';
tip.setAttribute('class','tip-box');
document.body.appendChild(tip);
} else {
elem.setAttribute('data-tip-on', 'false');
var tip = document.getElementById(elem.getAttribute('data-tip-id'));
tip.parentNode.removeChild(tip);
}
}
function enableTips(){
var elems = document.getElementsByClassName('quick-tip');
for(var i = 0; i < elems.length; i++) {
elems[0].addEventListener("click", doTip, false);
}
}
window.onload = function(){
enableTips();
}
</script>
<style>
.quick-tip {
background: black;
color: #fff;
padding: 5px;
cursor: pointer;
height: 15px;
width: 15px;
text-align: center;
font-weight: 900;
margin-left: 350px;
}
.tip-box {
/* change dimensions to be whatever the background image is */
height: 50px;
width: 200px;
background: grey;
border: 1px solid black;
position: absolute;
}
</style>
<div class="quick-tip" data-tip="THIS IS THE TIP! change elements 'data-tip' to change." data-tip-on="false">?</div>
<script>enableTips(); //might be required for jsfiddle, especially with reloads.</script>
Edit: fixed formatting and a bug. jsfiddle: http://jsfiddle.net/u93a3/
Proof of concept:
The following markup in HTML: Create a div with class tooltip, add image and a div with class info with all text (can be multiple paragraphs if needed, scollbars is shown if necessary):
<div class='tooltip'>
<img src='craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
</div>
</div>
The div.info is set to display:none in CSS.
When the page is loaded a pure javascript is running that draws an image of a triangle on a canvas-element, and then creates a div-element where the triangle is set as a background. Then, for every div.tooltip:
add a click-eventhandler to the image
replace the div.info with a div.info_container
add a clone of the triangle-div to div.info_container
add the original div.info to div.info_container
You can test it with this fiddle. It is tested successfully on FF25, Chrome31, IE10, Opera 12&18.
<!doctype html>
<html>
<head>
<script>
"use strict";
function click(event) {
var elem = this.parentNode.querySelector('div.info_container');
if (elem) elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}
function toolify() {
var idx,
len,
elem,
info,
text,
elements = document.querySelectorAll('div.tooltip'),
canvas,
imgurl,
pointer,
tipHeight = 20,
tipWidth = 20,
width = 200,
height = 100,
ctx;
// Create a canvas element where the triangle will be drawn
canvas = document.createElement('canvas');
canvas.width = tipHeight;
canvas.height = tipWidth;
ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000'; // Border color
ctx.fillStyle = '#fff'; // background color
ctx.lineWidth = 1;
ctx.translate(-0.5,-0.5); // Move half pixel to make sharp lines
ctx.beginPath();
ctx.moveTo(1,canvas.height); // lower left corner
ctx.lineTo(canvas.width, 1); // upper right corner
ctx.lineTo(canvas.width,canvas.height); // lower right corner
ctx.fill(); // fill the background
ctx.stroke(); // stroke it with border
//fix bottom row
ctx.fillRect(0,canvas.height-0.5,canvas.width-1,canvas.height+2);
// Create a div element where the triangel will be set as background
pointer = document.createElement('div');
pointer.style.width = canvas.width + 'px';
pointer.style.height = canvas.height + 'px';
pointer.innerHTML = ' ' // non breaking space
pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
pointer.style.position = 'absolute';
pointer.style.top = '2px';
pointer.style.right = '1px';
pointer.style.zIndex = '1'; // place it over the other elements
for (idx=0, len=elements.length; idx < len; ++idx) {
elem = elements[idx];
elem.querySelector('img').addEventListener('click',click);
text = elem.querySelector('div.info');
// Create a new div element, and place the text and pointer in it
info = document.createElement('div');
text.parentNode.replaceChild(info,text);
info.className = 'info_container';
info.appendChild(pointer.cloneNode());
info.appendChild(text);
//info.addEventListener('click',click);
}
}
window.addEventListener('load',toolify);
</script>
<style>
div.tooltip
{
position:relative;
display:inline-block;
width:300px;
text-align:right;
}
div.tooltip > div.info
{
display:none;
}
div.tooltip div.info_container
{
position:absolute;
right:20px;
width:200px;
height:100px;
display:none;
}
div.tooltip div.info
{
text-align:left;
position:absolute;
left:1px;
right:1px;
top:20px;
bottom:1px;
color:#000;
padding:5px;
overflow:auto;
border:1px solid #000;
}
</style>
</head>
<body>
<div class='tooltip'>
<img src='craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
</div>
</div>
<div class='tooltip'>
<img src='craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
Some text to fill the box with.
Some text to fill the box with.
Some text to fill the box with.
</div>
</div>
</body>
</html>
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/