This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 3 years ago.
It's a simple question. If I click the box ,
I want to move 200px to the left. but it's hard to me Please help me!
where's the problem?
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
</style>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
const move = document.getElementsByClassName("box");
move.addEventListener("click", _move);
function _move(e) {
move.classList.add("playing");
}
document.getElementsByClassName() returns a HTMLCollection, not a single element, so you have to attach the event listener to every element in the collection.
const move = document.getElementsByClassName("box");
[...move].forEach(m => m.addEventListener("click", _move));
function _move() {
this.classList.add("playing");
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
<div class="box"></div>
getElementsByClassName returns array so you need to give index
var move = document.getElementsByClassName("box");
move[0].addEventListener("click", _move);
function _move(e) {
move[0].classList.add("playing");
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
<div class="box"></div>
Your css property for moving it to the left isn't right.
It should be
.playing {
transform: translateX(200px);
}
You can also use that. instead of using document.getElementsByClassName, use document.querySelector
const move = document.querySelector(".box");
move.addEventListener("click", _move);
function _move(e) {
move.classList.add("playing");
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
<div class="box"></div>
As this question is already solved but i was just experimenting if any one wants to move the box continuously by clicking on the box then this code will be helpful.
<head>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
let offset = 0;
const move = document.getElementsByClassName("box")[0];
move.addEventListener("click", _move);
function _move(e) {
offset += 200;
move.style.left = offset + 'px';
}
</script>
</body>
$(document).ready(function(){
$('#button-one').click(function(){
$('#box-one').css("transform","translate(200px,0)");
});
});
$(document).ready(function(){
$('#button-two').click(function(){
$('#box-two').css("transform","translate(250px,0)");
});
});
$(document).ready(function(){
$('#button-three').click(function(){
$('#box-one, #box-two').css("transform","translate(0px,0)");
});
});
#box-one,
#box-two
{
width: 100px;
height: 100px;
background-color: blue;
}
#box-two
{
transition: transform 0.6s ease;
}
#button-three
{
position: relative;
left: 100px;
}
body
{
background-color: #E1E7E8;
}
<h2>Translation on click by using jQuery</h2>
<div id="box-one"></div>
<button id="button-one">translate</button>
<hr/>
<h2>Smooth translation on click by using jQuery</h2>
<div id="box-two"></div>
<button id="button-two">translate</button>
<br/>
<button id="button-three">reset</button>
Related
This question already has answers here:
Swap css class
(4 answers)
Closed 10 months ago.
I want to make these two divs always have opposite skew angles.
But it doesn’t work and when I click on body, then they have the same skewY value.
Does anyone know how to correct this? Thank you!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1 content skew1">
</div>
<div class="div2 content skew2">
</div>
.div1 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.div2 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.skew1 {
transform: skewY(20deg);
transition: transform 1s;
}
.skew2 {
transform: skewY(-20deg);
transition: transform 1s;
}
$(function () {
$("body").on("click", function () {
if ($(".content").hasClass("skew1")) {
$(".content").removeClass("skew1").addClass("skew2");
} else {
$(".content").removeClass("skew2").addClass("skew1");
}
});
});
The problem is that .removeClass and .addClass both operate on ALL the elements in .content. Which means after one click they will have exactly the same classes. Use .toggleClass instead.
Exmaple:
When your App runs $('.content') will return [ <div1 class="skew1">, <div2 class="skew2"> ]
On the first click .removeClass('skew1') will return [ <div1>, <div2 class="skew2"> ]
Then, .addClass('skew2') will return [ <div1 class="skew2">, <div2 class="skew2"> ]
$(function () {
$("body").on("click", function () {
$(".content").toggleClass("skew1 skew2");
});
});
.div1 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.div2 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.skew1 {
transform: skewY(20deg);
transition: transform 1s;
}
.skew2 {
transform: skewY(-20deg);
transition: transform 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1 content skew1">
</div>
<div class="div2 content skew2">
</div>
This should help:
$(function() {
$("body").on("click", function() {
const div1 = $(".div1");
const div2 = $(".div2");
if (div1.hasClass("skew1")) {
div1.removeClass("skew1");
div1.addClass("skew2");
div2.removeClass("skew2");
div2.addClass("skew1");
} else {
div1.removeClass("skew2");
div1.addClass("skew1");
div2.removeClass("skew1");
div2.addClass("skew2");
}
});
});
you can do this using toggleClass
$(function () {
$("body").on("click", function () {
$('.content').toggleClass('skew1').toggleClass('skew2')
});
});
.div1 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.div2 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.skew1 {
transform: skewY(20deg);
transition: transform 1s;
}
.skew2 {
transform: skewY(-20deg);
transition: transform 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1 content skew1">
</div>
<div class="div2 content skew2">
</div>
Encountering the following issue when trying to combine CSS transitions with JS event handlers. I know how to use CSS transition property for example:
div {
width: 50px;
height: 50px;
background: blue;
transition: width 2s;
}
div:hover {
width: 300px;
}
<div></div>
I also know how to put a click handler on an DOM element like this:
let eventDiv = document.querySelector('#clickMe');
let hiddenDiv = document.querySelector('#hiddenDiv');
eventDiv.onclick = () => {
if(hiddenDiv.style.display === 'block') {
hiddenDiv.style.display = 'none'
} else{
hiddenDiv.style.display = 'block';
}
}
#clickMe{
width: 100px;
height: 50px;
background-color: blue;
}
#hiddenDiv {
width: 100px;
height: 50px;
background-color: green;
display: none;
}
<div id="clickMe"></div>
<div id="hiddenDiv"></div>
Question
How do I combine the two and get a CSS transition (<div> should not appear immediately but should slide in) when I toggle the visibility of the <div> with a JS onclick event?
As per my comment, to combine the js and transition, you need to add and remove a class that changes the property that you want to transition.
In the below snippet, I add and remove a class of hide, which changes the height (that has a trnasition on it)
let eventDiv = document.getElementById('clickMe');
let hiddenDiv = document.getElementById('hiddenDiv');
eventDiv.onclick = () => {
if(hiddenDiv.classList.contains("hide")) {
hiddenDiv.classList.remove("hide");
} else{
hiddenDiv.classList.add("hide");
}
}
#clickMe{
width: 100px;
height: 50px;
background-color: blue;
}
#hiddenDiv {
width: 100px;
height: 50px;
background-color: green;
overflow:hidden;
transition: height 1s;
}
#hiddenDiv.hide {
height: 0;
}
<div id="clickMe"></div>
<div id="hiddenDiv" class="hide"></div>
The problem here is that you cannot give transition to display property:
div {
width: 50px;
height: 50px;
background: blue;
transition: 2s;
}
div:hover {
display:none;
}
<div></div>
What you can do is to use opacity instead.
let eventDiv = document.querySelector('#clickMe');
let hiddenDiv = document.querySelector('#hiddenDiv');
eventDiv.onclick = () => {
if(hiddenDiv.style.opacity === '1') {
hiddenDiv.style.opacity = '0'
} else{
hiddenDiv.style.opacity = '1';
}
}
#clickMe{
width: 100px;
height: 50px;
background-color: blue;
}
#hiddenDiv {
width: 100px;
height: 50px;
background-color: green;
opacity: 0;
transition: 2s;
}
<div id="clickMe"></div>
<div id="hiddenDiv"></div>
IMPORTANT
If you choose to use this property remember to change display to none after the transition is over if you don't want it to be block.
I tried to find any solution but I coudn't find.
I have some images that each one is on the other.I want that when I mouseover the first image the images that behnd will be above the first image.
For example:
Normal:
Mouseover:
In the basic the second and the third image is behind the first image.
Sorry for my english and thanks in advance!
You can use jQuery's hover event function with the over and out handlers..
Begin with the boxes that are "behind" the first box - hide them.
Next define an onhover event to display them when mouse is hovering, and to hide them again when mouse is out of hover.
$('#1').hover(
function(){
$('.hidden').removeClass('hidden').addClass('visible');
},
function(){
$('.visible').removeClass('visible').addClass('hidden');
}
)
.box {
border: solid 2px black;
width: 40px;
height: 40px;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="3" class="box hidden">3</div>
<div id="2" class="box hidden">2</div>
<div id="1" class="box">1</div>
This solution requires the boxes to be absolutely positioned and in a container.
var prop = "bottom",
moveAmount = 50;
$('.container').hover(
function() {
var moved = $(this).find(".box");
for (var i = (moved.length - 1), pad = 0; i >= 0; i--) {
$(moved[i]).css(prop, (pad++ * moveAmount) + "px");
}
},
function() {
var moved = $(this).find(".box");
for (var i = 0; i < moved.length; i++) {
$(moved[i]).css(prop, "0px");
}
}
);
.container {
background-color: #eeeeee;
position: relative;
width: 45px;
height: 45px;
}
.box {
background: red;
width: 40px;
height: 40px;
transition: bottom 0.3s ease-in-out;
position: absolute;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br>
<div class="container">
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
</div>
I am working on a project to make angled divs where the break between each basic panel on a page is an angle if the div has a background-image on the previous div, and a background-color of green on the next div.
I know I can't select pseudo classes directly so I decided to use the .addClass() to show and hide the angle.
The problem is my comparisons either turn all divs green, or adds angles to all the divs. I think most of my problem is in my approach, but I'm not sure where I am going wrong.
Here is the JS and the jQuery so far, I'm just trying to make the comparison work so it is still rough:
$(function() {
green = $('div').css("background-color", "rgb(0,255,0)");
if ($('.box').prev() === green)
{
$(this).addClass('withTop withoutTop');
//if ($(this).css("background-color") == green)
}
});
I have used regex to strip all but digits from the rgb but it seems to have the same effect. Thanks in advance and here is the link to the codepen.
http://codepen.io/AnomalousDevs/pen/GJmrrw
CSS and markup
$(function() {
green = $('div').css("background-color", "rgb(0,255,0)");
if ($('.box').prev() === green) {
$(this).addClass('withTop withoutTop');
//if ($(this).css("background-color") == green)
}
});
.box {
height: 100px;
width: 100%;
/*background-color: rgb(0,255,0);*/
position: relative;
}
.box:nth-of-type(5) {
background-color: green;
/* background-image:url("http://www.google.com/imgres?imgurl=http://dreamatico.com/data_images/guitar/guitar-6.jpg&imgrefurl=http://dreamatico.com/guitar.html&h=851&w=1280&tbnid=DVUGPDoyiOu4sM:&zoom=1&docid=OlLKDKDUUigDoM&hl=en&ei=iqJzVcaEOcvAtQXW-oO4Cw&tbm=isch&ved=0CDwQMygKMAo");*/
}
.box:nth-of-type(4) {
background: red;
position: relative;
}
.box:nth-of-type(3) {
background: blue;
}
.box:nth-of-type(2) {
background: rgb(0, 255, 0);
}
.box:nth-of-type(1) {
background: lightblue;
}
.withTop::before {
content: '';
position: absolute;
background: black;
width: 100%;
/*top:-16px;*/
height: 30px;
left: 0;
transform: skewY(-1.3Deg);
z-index: 1;
}
.withoutTop::after {
content: '';
position: absolute;
background: black;
width: 100%;
height: 30px;
left: 0;
transform: skewY(2Deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box withTop"></div>
</section>
Your question is not clear but I think that what you are trying to achieve is adding a class to the .box after the green one.
Suggestion of base logic you should do:
$(function() {
var boxes = $('.box'),
greenBox = '';
//for each box
boxes.each(function(index) {
//if this box is the green one
if ($(this).css("background-color") === "rgb(0, 255, 0)") {
greenBox = $(this);
//addClass to the next one
$(this).next().addClass('withTop');
}
});
});
.box {
height: 100px;
width: 100%;
/*background-color: rgb(0,255,0);*/
position: relative;
}
.box:nth-of-type(5) {
background-color: green;
/* background-image:url("http://www.google.com/imgres?imgurl=http://dreamatico.com/data_images/guitar/guitar-6.jpg&imgrefurl=http://dreamatico.com/guitar.html&h=851&w=1280&tbnid=DVUGPDoyiOu4sM:&zoom=1&docid=OlLKDKDUUigDoM&hl=en&ei=iqJzVcaEOcvAtQXW-oO4Cw&tbm=isch&ved=0CDwQMygKMAo");*/
}
.box:nth-of-type(4) {
background: red;
position: relative;
}
.box:nth-of-type(3) {
background: blue;
}
.box:nth-of-type(2) {
background: rgb(0, 255, 0);
}
.box:nth-of-type(1) {
background: lightblue;
}
.withTop::before {
content: '';
position: absolute;
background: black;
width: 100%;
/*top:-16px;*/
height: 30px;
left: 0;
transform: skewY(-1.3Deg);
z-index: 1;
}
.withoutTop::after {
content: '';
position: absolute;
background: black;
width: 100%;
height: 30px;
left: 0;
transform: skewY(2Deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box withTop"></div>
</section>
In one of my projects, I have requirement of multiple pop up div's on the same page. That means when user clicks on a link, some content should open in a pop up. There will be many such links with their own pop ups. With little knowledge of javascript, I have tried to write a javascript for it but it works only for one pop up. When I click on second, third... links, only first pop up opens rather than opening second, third... pop ups. Here is my code. Please tell the modifications to it.
<!DOCTYPE html>
<html >
<head>
<script>
window.document.onkeydown = function (e)
{
if (!e)
{
e = event;
}
if (e.keyCode == 27)
{
lightbox_close();
}
}
function lightbox_open()
{
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<style>
#fade
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
</head>
<body>
Open 1
<div id="light">div 1</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 2
<div id="light">div 2</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 3
<div id="light">div 3</div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>
Here's a way to achieve what you want. I'm sure it can be improved, but it's up to you then.
First, IDs should be unique across the page. If you want to group elements, give them a shared class instead.
With the changes, your HTML would look like this:
Open 1
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 2
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 3
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>
Your CSS:
html, body {
width: 100%;
height: 100%;
}
.fade {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.light {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
And your Javascript:
window.document.onkeydown = function (e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {
window.scrollTo(0,0);
// All the anchors that have a class lightbox.
var anchors = document.querySelectorAll('a.lightbox');
// All the elements with class light.
var light = document.querySelectorAll('.light');
// All the elements with class fade.
var fade = document.querySelectorAll('.fade');
// Iterate over the anchors elements.
for (var i = 0; i < anchors.length; i++) {
// If the anchor matches the clicked one.
if (anchors[i] == el) {
// Look for the light and fade with the same index
// and display them.
light[i].style.display = 'block';
fade[i].style.display = 'block';
}
}
}
function lightbox_close() {
// All the elements with class light or fade.
var els = document.querySelectorAll('.light, .fade');
// Loop through the list.
for (var i = 0; i < els.length; i++) {
// Hide them.
els[i].style.display = 'none';
}
}
Demo