Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have two elements and a button. I'm trying to make the first element to be completely on top of the other element when the button is clicked.
$("#clickme").click(function(){
$("#frist_element").appendTo("#second_element")
})
div{
background-color: red;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
}
#second_element{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first_element"></div>
<div id="second_element"></div>
<button id="clickme">Click Me</button>
when the button is clicked the red circle should move(animate to move) to the yellow circle and the green circle should not be visible
Update:
here is a gif that shows exactly what im looking for gif
Done, I just add position relative to the first div and took the top position of the second and added to the first div using the animation funtion . After that the first goes to on the second div.
$("#clickme").click(function(){
var secondDivPosition=$("#second_element").position();
var firstDivPosition=$("#first_element").position();
var topSecond =secondDivPosition.top.toString()+'px';
var topFirst =firstDivPosition.top.toString()+'px';
if(firstDivPosition.top==secondDivPosition.top)
{
$("#first_element").animate({"top":"0px"},300, function() {});
$("#second_element").css({"visibility":"initial"});
}else
{
$("#first_element").animate({"top":topSecond},300, function() {
$("#second_element").css({"visibility":"hidden"});
});
}
});
div{
background-color: red;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
}
#first_element{
position: relative;
}
#second_element{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first_element"></div>
<div id="second_element"></div>
<button id="clickme">Click Me</button>
You can add an attribute with a flag and use the functions before and after.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background-color: red;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
}
#second_element{
background-color: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#clickme").click(function(){
if($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
$("#first_element").before($("#second_element"))
} else {
$(this).attr('data-click-state', 1)
$("#first_element").after($("#second_element"))
};
});
});
</script>
</head>
<body>
<div id="first_element"></div>
<div id="second_element"></div>
<button id="clickme">Click Me</button>
</body>
</html>
I think that the css transform property might come handy for you. Also added a transition delay to look nicer. Is this what you were looking for?
$("#clickme").click(function(){
$("#second").css("transform","translateY(-50px)");
$("#first").css("transform","translateY(50px)");
});
div{
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
transition: all 0.4s;
}
#first {
background-color: red;
}
#second {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first"></div>
<div id="second"></div>
<button id="clickme">Click Me</button>
You need to have a container to detect which is the current status
then just capture the divs and then play with them
hope it helps
$("#clickme").click(function(){
var first= $("#first_element");
var second= $("#second_element");
if(!$('.container').hasClass('red-green')){
$('.container').addClass('red-green');
$("#first_element").remove();
$("#second_element").after(first);
}else {
$('.container').removeClass('red-green');
$("#second_element").remove();
$("#first_element").after(second);
}
})
#first_element{
background-color: red;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
display: block;
}
#second_element{
background-color: green;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first_element"></div>
<div id="second_element"></div>
</div>
<button id="clickme">Click Me</button>
Related
I have 2 elements that each have different background colors and upon click, I'd like to make them change to a different color.
Here is code that works if the elements do not already have background-color:
html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
background-color: red;
}
</style>
</head>
<body>
<div id="buttonGallery">
<div id="button_1" class="buttons">
<p>button_1</p>
</div>
<div id="button_2" class="buttons">
<p>button_2</p>
</div>
</div>
<script type="text/javascript">
$("#button_1").click(function() {
$('#button_1').toggleClass('selected');
});
$("#button_2").click(function() {
$('#button_2').toggleClass('selected');
});
</script>
</body>
</html>
However, if I give each id a background-color, they do not change color upon click:
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
#button_1 {
background-color: blue;
}
#button_2 {
background-color: green;
}
.selected {
background-color: red;
}
Also is there a way to write one function that turns each element red upon click? (Rather than write a function for each button. I will eventually have 8 buttons.) Thank you! Any help would be really appreciated!
First of all the .selected the class will apply each time but due to the selector priority it will be overwritten by .button. So there are tones of ways to fix it.
You can use !important keyword (not recommended at all)
.selected {
background-color: red !important;
}
NOTE: You should avoid as much as you can from using !important keyboard, but in your particular case this is the best way to do it, but I highly recommend changing your styling method and use the pseudo-class selector for your main classes instead. just like this:
.buttons:first-of-type {
background-color: blue;
}
.buttons:nth-of-type(2) {
background-color: green;
}
/* and so on */
And use a specific method for your selected class something like this:
.buttons.selected {
background-color: red;
}
Or
You can use a straight forward but repetitive approach. So make your .selected class selector something like this:
#button_1.selected, #button_2.selected /* and so on */ {
background-color: red;
}
Also for simplifying your js code you can do as follows:
$('.buttons').click(function () {
$(this).toggleClass("selected"); // $(this) keyword will refer to the clicked button, each time attribute with class buttons got clicked.
});
I think your problem is CSS Specificity.
The ID selector (#) will have a higher specificity than the class selector (.)
Try changing
.selected {
background-color: red;
}
to
#button_1.selected, #button_2.selected {
background-color: red;
}
If you want add ".selected" class for each button So you can try this one
I hope this will help you a lot.
$("button").each(function(){
$(this).on("click", function(){
$(this).toggleClass('.selected');
});
});
Just add background-color: red !important;
EDIT
you can use this like one function as requested.
$('.buttons').click(function(e) {
e.stopPropagation();
$(this).toggleClass('selected');
});
$("#button_1").click(function() {
$('#button_1').toggleClass('selected');
});
$("#button_2").click(function() {
$('#button_2').toggleClass('selected');
});
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
#button_1 {
background-color: blue;
}
#button_2 {
background-color: green;
}
.selected {
background-color: red !important;
}
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
background-color: red;
}
</style>
</head>
<body>
<div id="buttonGallery">
<div id="button_1" class="buttons">
<p>button_1</p>
</div>
<div id="button_2" class="buttons">
<p>button_2</p>
</div>
</div>
</body>
Here is the pure JS method.
You'll want to use querySelectorAll('.buttons').
const buttons = document.querySelectorAll('.buttons')
This will make a node list of all objects with the class .buttons.
Then you'll want to apply an event listener to each button by using forEach.
buttons.forEach(button=>{
button.addEventListener('click', ()=>{})
Then you can write a function for when a button is clicked.
const buttons = document.querySelectorAll('.buttons');
buttons.forEach(button=>{
button.addEventListener('click', ()=>{
button.classList.toggle('selected')
})
})
This will update automatically as you add elements with a class of buttons.
And then as others mentioned, add !important to the .selected class background-color property.
I have made a simple card system with mobile.
When I use below code, touch event detect very well.
html, body {
margin: 0;
padding: 0;
}
.card1 {
height: 200px;
width: 200px;
background-color: green;
}
.card1:active {
background-color: blue;
}
<html>
<body ontouchstart="">
<div class="wrap">
<div class="card1"></div>
</div>
</body>
</html>
Not only in mobile devices but also works fine in the desktop.
But after detach the finger from the screen, it return to original state.
My goal is if I click touch the box, box will be changed to background-color: blue; and do not have to return background-color: green;
Is there any solution here?
Thanks.
It can be achieved by applying background color on click event using js
$('.card1').click(function() {
$('.card1').css({
'background-color': 'blue',
});
});
html, body {
margin: 0;
padding: 0;
}
.card1 {
height: 200px;
width: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body ontouchstart="">
<div class="wrap">
<div class="card1"></div>
</div>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
How can I transition between two divs without seeing the background of the page during the transition. In this example, I would expect just to see the numbers change:
https://jsfiddle.net/j2td4hd7/15/
The transition easing is set to linear.
This doesn't have anything to do with the easing, it's that you're unnecessarily transitioning both elements.
It's easy to overcomplicate this -- instead think of the two images as a stack: the one on the bottom can stay visible the whole time, only the one on the top needs to fade in and out.
Compare below:
goodswap = function() {
$('#div2').fadeToggle(); // transitions the top element in and out
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; display: none;}
#div3 { background-color: blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>
If the images are different sizes, this technique still works so long as the larger one is stacked with the higher z-index. To keep the rest of the page from jumping around, set the container's size to that of the larger image.
goodswap = function() {
$('#div2').fadeToggle(); // transitions the top element in and out
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; width: 500px; display: none;}
#div3 { background-color: blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>
If you have two elements with black background and opacity of 50% on each of them - they are not combined into 100% black :)
Check the following:
div {
background: black;
width: 150px;
height: 150px;
position: absolute;
}
div.half {
opacity: 0.5;
left: 0;
top: 0;
}
div.full {
top: 0;
left: 150px;
}
<div class="half"></div>
<div class="half"></div>
<div class="full"></div>
During the animation - the opacity of the two elements is changing from 0 to 100 and from 100 to 0, but the background color is not "combined".
I think the following will provide what you are looking for:
window.swap = function(divId){
if(divId === 'div1'){
jQuery('#div1').css('zIndex', 1);
jQuery('#div2').css('zIndex', 2);
jQuery('#div2').fadeIn({easing: 'linear', complete: function() {
jQuery('#div1').fadeOut({easing: 'linear'})
} }
);
}else{
jQuery('#div2').css('zIndex', 1);
jQuery('#div1').css('zIndex', 2);
jQuery('#div1').fadeIn({easing: 'linear', complete: function() {
jQuery('#div2').fadeOut({easing: 'linear'})
}
});
}
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
#div2{ display: none; background-color: brown; }
#div1{ background-color: red; }
html, body{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-div" onclick="swap('div1')" id="div1">1</div>
<div class="block-div" onclick="swap('div2')" id="div2">2</div>
Note regarding comments from the OP:
In case you want the same effect with two elements that has different height, you can create two dummy div, one for each div you have. The dummy1 will be in the size of div1, but contain the bg of div2, and same for dummy2. now you can use these dummy divs to do the transition.
In my webpage I have accordion panels which collapse and close. I have set the page height to be specific. However, I want it to be specific from the start, but be able to expand when I open and close the panel, so that I don't have to set the page too be so long with no content. Any ideas about how I go about doing this?
This is only an example I used, which is the reason for the small height currently.
My Current Code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 120px;
background-color: lightblue; padding: 5px; }
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<button class="accordion">Panel</button>
<div class="panel">
Hello
</div>
<button class="accordion">Panel 2</button>
<div class="panel">
Hello
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</div>
</body>
</html>
If I understand correctly,
you're looking for min-height:1300px instead of height:1300px on div.container
The most robust way without the use of Javascript is to get rid of explicitly setting the height of your containers in CSS - that way the height is automatically going to conform to the total height of your child elements.
If your container is not absolutely positioned, I believe Vlad is Glad's answer with using the CSS property, min-height, will apply.
If your container must be absolutely positioned, you could grab the height of the expanded panel through jQuery in your onClick handler, and add/subtract the height to your container.
I am learning jQuery, and I've written a simple script that is intended to add (or remove) a class when a mouse enters (or leaves) a div. The new class adds a different height and is also supposed to change the background color and opacity of the entered div.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
margin: 20px;
float: left;
}
#one {
background-color: red;
}
#two {
background-color: green;
}
#three {
background-color: blue;
}
.change {
height: 150px;
background-color: rgba(0,0,0,0.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script type="text/javascript">
$(document).ready(function () {
$("div").mouseenter(function () {
$(this).addClass("change");
});
$("div").mouseleave(function () {
$(this).removeClass("change");
});
});
</script>
</body>
</html>
While the height changes, there's no effect on the background-color property. Why is that so?
I've checked out the .mouseenter(), .mouseleave() and the .addClass() API documentation, but couldn't find anything specific to this problem.
Your javaScript code is 100% fine. The problem is in CSS You have written. Selection by id #one is more important than classname .one, so when you apply some #rules and .rules to the emenet at the same time, browser will chose the first ones as more important. If You can, try not to use #id selectors at all in css and leave it for javaScript usage.
css:
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
html:
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
demo: https://jsfiddle.net/cz8v1gy4/
Edited answer after a re-read:
You're running in to CSS specificity issues. IDs are more specific than classes, which means that your background color is going to stay the color of the ID and not the class. This is one reason why it's (often) recommended to not use IDs in CSS.
If you change everything over to classes it will work how you're expecting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
margin: 20px;
float: left;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.change {
height: 150px;
background-color: rgba(0,0,0,0.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<script type="text/javascript">
$(document).ready(function () {
$("div").mouseenter(function () {
$(this).addClass("change");
});
$("div").mouseleave(function () {
$(this).removeClass("change");
});
});
</script>
</body>
</html>
Try utilizing css selectors #one:hover, #two:hover, #three:hover , :hover pseudo-class, transition . See also Specificity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
margin: 20px;
float: left;
}
#one {
background-color: red;
}
#two {
background-color: green;
}
#three {
background-color: blue;
}
#one:hover, #two:hover, #three:hover {
height: 150px;
background-color:rgba(0,0,0,0.4);
transition: height 1000ms, background-color 1000ms;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
There are some good answers here and explanations why it's not working, but it looks like no one has answered how to do what it seems like your intent was.
Which was to add the two background colors together to get a darker color on hover. You can get around it changing it to a grey by adding something else in.
For example:
.change {
height: 150px;
background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%)!important;
}
This puts a solid color gradient in as the background image which layers on top of the background color.
Like This JSFiddle
When you hover over div#one it becomes div#one.changed. Now with regard to background color you have two competing values:
#one {
background-color: red;
}
And:
.change {
background-color: rgba(0,0,0,0.4);
}
The first one wins, because it is more specific.
To get around this use
.change {
height: 150px;
background-color: rgba(0,0,0,0.4)!important;
}