I have this modal, and would like to make many of them on the same page. I tried a lot, but nope. Any idea how to do this? Thanks.
Here the code:
HTML
<div class="containerofelements">
<div id="s2-01" class="resizeratio">1.00</div>
<div id="s-wrap" class="wrap" style="transform: scale(0.04);">
<div class="elements" style="transform: scale(0.04);">
<div id="s-rr"class="resizeratio">0.04</div>
<div id="s-001" class="slider16" midicc="1, 80" colour="#ff3300"></div>
</div>
</div>
</div>
CSS
.containerofelements {
}
.resizeratio {
display: inline-block;
cursor: pointer;
border-style: solid;
color: red;
width: 50px;
height: 20px;
}
.wrap {
background-color: rgba(0, 80, 128, 1);
transform-origin: 1880px 0;
}
.elements {
width: 1600px;
height: 800px;
transform-origin: 1880px 0;
}
JS
$(document).ready(function() {
$(".resizeratio").click(function() {
var el = $('.elements');
var scale = $(this).text();
el.css({
transform: "scale(" + scale + ")"
});
});
});
$(document).ready(function() {
$(".resizeratio").click(function() {
var el = $('.wrap');
var scale = $(this).text();
el.css({
transform: "scale(" + scale + ")"
});
});
});
I tried to apply separate names, IDs, but no good results without replicating everything which is not a good practice I suppose, a waste of code.
Related
I have a page which contains the following code.
<style>
.objects {display: inline-table; width: 180px; height: 180px; border-radius: 50%; transition: transform .4s;}
.objects:hover { transform: scale(1.1); }
.objects:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width:180px; height: 180px; z-index: -1; background-color: rgba(255, 255, 255, 0.4);}
#media screen and (max-width: 500px) {
.objects, .objects:after { width: 20vw; height: 20vw;}
}
.objects p { text-align: center; vertical-align: middle; display: table-cell; visibility: hidden; color: black; z-index: 100; position: relative;}
#object1{background-color: brown;}
#object2{background-color: red;}
#object3{background-color: yellow;}
#object4{background-color: blue;}
#object5{background-color: green;}
#object6{background-color: black;}
</style>
<div style="display: flex; justify-content: space-around;margin-top:50px;margin-bottom:100px;">
<div id="object1" class="objects" onmouseover="nomeIn(this)" onmouseout="nomeOut(this)" >
<p>brick brown</p>
</div>
<div id="object2" class="objects" onmouseover="nomeIn(this)" onmouseout="nomeOut(this)" >
<p>brick red</p>
</div>
<div id="object3" class="objects" onmouseover="nomeIn(this)" onmouseout="nomeOut(this)">
<p>brick melange</p>
</div>
</div>
<script>
function nomeIn(object){
let selettore = "#" + object.id + " p";
document.querySelector(selettore).style.visibility = "visible";
}
function nomeOut(object){
let selettore = "#" + object.id + " p";
document.querySelector(selettore).style.visibility = "hidden";
}
</script>
This page works properly, as you can see in the following JSFiddle:
However, for some reasons, one of the plugins I have in my site keeps erasing all the events from the html code, so I can't use "onmouseover" and "onmouseout".
Without these events in the html, I can't call the function and I should write a different JS code, which would be similar to this:
document.querySelector(".objects").onmouseover = function nomeIn(){
let selector = "#" + this.id + " p";
document.querySelector(selector).style.visibility = "visible";
}
document.querySelector(".objects").onmouseout = function nomeOut(){
let selector = "#" + this.id + " p";
document.querySelector(selector).style.visibility = "hidden";
}
However, in this case, the mouseover would work only with the first circular element (the text would appear only in the first circle): JSFiddle
What am I doing wrong?
Thank you for your help.
Because in the second code, you are using document.querySelector to select the .objects divs. This function always return the first element encountered. To solve this, you could use the document.querySelectorAll function and iterate through each element:
[ ...document.querySelectorAll(".objects") ].forEach(element => {
element.onmouseover = function () {
let selector = "#" + this.id + " p";
document.querySelector(selector).style.visibility = "visible";
}
element.onmouseout = function () {
let selector = "#" + this.id + " p";
document.querySelector(selector).style.visibility = "hidden";
}
});
I encounter the following problem: how can I create a stacked bar chart that can hold 3 variables only. (x, y, z) and x + y + z = 100%.
What's important is how can I make the colors edges between x y and y z of the bars faded as shown in the figure below? (Any popular library can be used)
You can use a single linear gradient in css with four percentage locations to achieve the desired result. You don't need to specify the 0% and 100% colors, but you do need to start and end the fades a few percentage points on either side or you'll get a hard color change. Here's a function that will help you center the labels too, but it doesn't handle validation or edge cases.
function updateGradientBar(agree, depends, disagree) {
let
padding = 3,
agreeFadeStart = agree - padding,
dependsFadeStart = agree + padding,
dependsFadeEnd = agree + depends - padding,
disagreeFadeStart = agree + depends + padding,
labelAgree = $('#gradient-bar .label.agree'),
agreeLabelPosition = agree / 2,
labelDepends = $('#gradient-bar .label.depends'),
dependsLabelPosition = agree + (depends / 2),
labelDisagree = $('#gradient-bar .label.disagree'),
disgreeLabelPosition = agree + depends + (disagree / 2);
$('#gradient-bar').css(
'background',
'linear-gradient(to right, green ' + agreeFadeStart + '%,' + 'orange ' + dependsFadeStart + '%, orange ' + dependsFadeEnd + '%,' + 'red ' + disagreeFadeStart + '%)');
labelAgree.css('left', agreeLabelPosition + '%').text(agree + '%');
labelDepends.css('left', dependsLabelPosition + '%').text(depends + '%');
labelDisagree.css('left', disgreeLabelPosition + '%').text(disagree + '%');
}
updateGradientBar(35, 40, 25);
#gradient-bar {
height: 20px;
border-radius: 4px;
background: blue;
position: relative;
}
#gradient-bar .label {
color: white;
font-weight: bold;
position: absolute;
top: 50%;
transform: translatex(-50%) translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gradient-bar">
<div class="label agree"></div>
<div class="label depends"></div>
<div class="label disagree"></div>
</div>
I made a static solution for that using CSS:
You only have to "replace" the % unities with the appropriate values using javascript (this will not be a big deal).
The Solution: first: there is no possiblity to intersect colors in pure css. so I added to absolute positioned divs on the bar with a background color containing transparency.
HTML:
<div class="bar">
<div class="agree">
20%
</div>
<div class="seperator part1">
</div>
<div class="independants">
30%
</div>
<div class="seperator part2">
</div>
<div class="disagree">
50%
</div>
</div>
And the CSS:
.bar {
display: flex;
width: 100%;
border: 1px solid #000;
border-radius: 3px;
}
.bar > div {
height: 20px;
color: #fff;
text-align: center;
}
.agree {
flex: 1 0 20%;
background: green;
}
.independants {
flex: 1 0 30%;
background: orange;
}
.disagree {
flex: 1 0 50%;
background: red;
}
.seperator {
position: absolute;
width: 5%;
z-index: 20;
}
.part1 {
left: 16%;
background: linear-gradient(to right, rgba(122,188,255,0) 0%,rgba(249,186,97,0.44) 44%,rgba(237,176,64,1) 100%);
}
.part2 {
left: 50%;
background: linear-gradient(to right, rgba(255,164,28,1) 0%,rgba(249,186,97,0.56) 44%,rgba(237,176,64,0) 100%);
}
Check out the Fiddle for it here: https://jsfiddle.net/taxostd0/5/
$( document ).ready(function() {
$('body').append('<div id="tester2"></div>');
$('#tester2').css({
position:'absolute',
background:'blue',
width: 10,
height:10
});
setInterval(function(){
var x = $('#tester')[0].getBoundingClientRect();
$('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
$('#tester2').css({
top:x.top,
left:x.left
});
}, 1000);
$('#jquery-version').text('jquery version: ' + $.fn.jquery);
});
#tester{
position:absolute;
top:50px;
left:50px;
width:10px;
height:10px;
background:red;
}
#page{
min-height:200px;
}
body{
border:2px solid green;
transform: scale(1) translate(20px, 40px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>
I need to place a div over an existing div. The existing div is contained inside the body of and HTML document that has the CSS transform property set. I need to place the new div after the document was rendered and transformed.
When I call getBoundingClientRect() on the div that I need to hide (red square in attached fiddle) I get the wrong top/left. I set the top/left of the blue square to the output of getBoundingClientRect() and they do not overlap.
setInterval(function(){
var x = $('#tester')[0].getBoundingClientRect();
$('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
$('#tester2').css({
top:x.top,
left:x.left
});
}, 1000);
How can this be solved?
You can just take the offsetTop and offsetLeft without worrying about the transform as the same transform is applied to the newly added div as well. I'm guessing that from the example.
$(document).ready(function() {
$('body').append('<div id="tester2"></div>');
$('#tester2').css({
position: 'absolute',
background: 'blue',
width: 10,
height: 10,
opacity: 0.6
});
var tester = document.getElementById('tester');
$('#tester2').css({
top: tester.offsetTop - 2, // 2px border for body
left: tester.offsetLeft - 2
});
$('#jquery-version').text('jquery version: ' + $.fn.jquery);
});
#tester {
position: absolute;
top: 50px;
left: 50px;
width: 10px;
height: 10px;
background: red;
}
#page {
min-height: 200px;
}
body {
border: 2px solid green;
transform: scale(1) translate(20px, 40px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>
I have an answer that works, it may not be the best answer yet, but it works 100% for me.
$( document ).ready(function() {
$('body').append('<div id="tester2"></div>');
$('#tester2').css({
position:'absolute',
background:'blue',
width: 10,
height:10,
});
setInterval(function(){
var x = $('#tester')[0].getBoundingClientRect();
$('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
$('#tester2').css({
'top':x.top/2,
'left':(x.left/2)+x.width
});
}, 1000);
$('#jquery-version').text('jquery version: ' + $.fn.jquery);
});
#tester{
position:absolute;
top:50px;
left:50px;
width:10px;
height:10px;
background:red;
}
#page{
min-height:200px;
}
body{
border:2px solid green;
transform: scale(1) translate(20px, 40px);
}
#tester2{
transform: scale(1) translate(0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>
Edit
The only time that my potential solution gets a bit weird is when you have to scroll... So be warned there.
Here's the jsfiddle.
It's the interface to cropping an image. As you can see the selection div takes the same background image and positions it to the negative of the top and left attributes of the selection div. In theory this should give a perfect overlap, but there's a jitter as you move the selection div around, and I can't seem to figure out what is causing it.
html
<div id="main">
<div id="selection"></div>
</div>
css
#main {
width: 600px;
height: 450px;
position: relative;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
background-size: contain;
}
#selection {
width: 100px;
height: 100px;
position: absolute;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
border: 1px dotted white;
background-size: 600px 450px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
selection.css("background-position", (((-selection.position().left) - 1) + "px " + ((-selection.position().top ) - 1) + "px"));
}
});
$("#selection").mouseup(function (e) {
move = false;
});
})
It would appear that there is a value of 5 offset that needs to be added to ensure seamlessness
DEMO http://jsfiddle.net/nzx0fcp5/2/
offset = [e.pageX - selection.offset().left + 5, e.pageY - selection.offset().top + 5];
So, while experimenting I discovered that this was only a problem at certain sizes of the image. At the original size it is no problem, neither at half nor a quarter of this size. It wasn't simply a matter of keeping the image in proportion not having the image square or using even pixel sizes. I'm assuming this had something to do with partial pixel sizes, but I'm not sure, and I couldn't see any way to work around this, at least none that seemed worth the effort.
So while checking out the code of other croppers I took a look at POF's image cropper, they seem to have got round the problem by not using the background-position property at all (I'm not sure if it's plugin or they coded it themselves). They just set the image down and then used a transparent selection div with 4 divs stuck to each edge for the shading. So there's no pixel crunching on the fly at all. I like the simplicity and lightweight nature of this design and knocked up a version myself in jsfiddle to see if I could get it to work well.
new jitter free jsfiddle with no pixel crunching
I liked the solution for the preview box as well.
html
<body>
<div id="main">
<img src="http://flavorwire.files.wordpress.com/2012/01/scarlett_johansson.jpg" />
<div id="upperShade" class="shade" > </div>
<div id="leftShade" class="shade" > </div>
<div id="selection"></div>
<div id="rightShade" class="shade"></div>
<div id="lowerShade" class="shade" ></div>
</div>
</body>
css
#main {
position:relative;
width: 450px;
height: 600px;
}
#selection {
width: 148px;
height: 148px;
position: absolute;
border: 1px dotted white;
top: 0px;
left: 0px;
z-index: 1;
}
.shade {
background-color: black;
opacity: 0.5;
position: absolute;
}
#upperShade {
top: 0px;
left: 0px;
width: 600px;
}
#leftShade {
left: 0px;
top: 0px;
height: 150px;
width: auto;
}
#rightShade {
left: 150px;
top: 0px;
height: 150px;
width: 450px;
}
#lowerShade {
left:0px;
top: 150px;
width: 600px;
height: 300px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
setShade();
}
});
function setShade() {
$("#upperShade").css("height", selection.position().top);
$("#lowerShade").css("height", 600 - (selection.position().top + 150));
$("#lowerShade").css("top", selection.position().top + 150);
$("#leftShade").css("top", selection.position().top);
$("#leftShade").css("width", selection.position().left);
$("#rightShade").css("top", selection.position().top);
$("#rightShade").css("left", selection.position().left + 150);
$("#rightShade").css("width", 450 - selection.position().left);
}
$("#selection").mouseup(function (e) {
move = false;
});
});
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them Ńurrent class.
Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO