I want to toggle the width of a div using a button. I'm not sure how to properly use an if-else statement to check the CSS, and I'm also not clear on the syntax.
Let's assume that I have the following:
CSS
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
HTML
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
JavaScript
$("#boxToggle").click(function () {
$("#firstDiv").css("width", "120px");
});
Right now, the JavaScript would only change the width once and not go back, but this still isn't working and I'm assuming that my syntax is wrong.
A JSFiddle of the above can be found at the link.
https://jsfiddle.net/647ye1pk/
Any help is appreciated.
You can use toggleClass to achieve this effect
//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
$("#boxToggle").click(function () {
$(".firstDiv").toggleClass('largeWidth');
});
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.largeWidth{
width:120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
And if you don't want to use the toggleClass method try this
//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
click = 0;
$("#boxToggle").click(function () {
if (click == 0) {
$(".firstDiv").css("width", "120px");
click = 1;
} else {
$(".firstDiv").css("width", "80px");
click = 0;
}
});
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
firstDiv is a class not an id (# vs .)
try:
$("#boxToggle").click(function () {
$(".firstDiv").css("width", "120px");
});
It can be as simple as detecting the width your div has when you click the button, and reacting appropriately:
$("#boxToggle").click(function() {
var fd = $("#firstDiv");
if(fd.css("width")!=="120px")
fd.css("width", "120px");
else
fd.css("width", "80px");
});
#firstDiv {
border: 1px solid black;
padding: 10px;
width: 80px;
margin: 5px;
display: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div id="firstDiv">
<p>This is a paragraph.</p>
</div>
Through this you do not need to use global variables and toggle functions.
you can use this
$("#boxToggle").click(function () {
var width=$(".firstDiv").css( "width" );
if (width=="80px")
{
$(".firstDiv").css("width","120px");
}
else
{
$(".firstDiv").css("width","80");
}
Related
So this is a very basic function (found and edited for my purposes) that alternates the div background color to white or black.
I would like to change the code to utilize the css variables I have in the root property and have no onClick functions inside the html. I want to keep html and js seperate, but I don't know how to go about this.
Can I have two buttons that can switch between the css variable colors for the div?
Thank you.
function changeColor(color) {
var element = document.getElementById('box');
element.style.backgroundColor = color;
}
root {
--white { color: #fff}
--black { color: #000}
}
.box {
width: 100px;
height: 100px;
border: 1px solid #aaa;
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
You can set one css variable and onclick change the color.
Use document.body.style.setProperty('--main-color',color) to set color to var
function changeColor(color) {
document.body.style.setProperty('--main-color',color)
}
root {
--main-color{ color: #fff}
}
.box {
width: 100px;
height: 100px;
border: 1px solid #aaa;
background-color: var(--main-color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
You can add a data-color attribute to your buttons which specifies the color (variable) to change to when clicking on the given button. Then you can add the click event listener to all your buttons with the class color-btn. Then when you click on a given button the event listener will be called, which will get the data attribute from the button clicked, and then use your changeColor function to change the div to the appropriate color (using the variable).
Also, you haven't defined your variables correctly. Firstly, you need to target the root using :root. Then you nee to set your variables using --variableName: COLOR. Lastly, in your changeColor function you need to use .style.backgroundColor = "var(--" +color +")" to correctly use the variable.
See working example below
[...document.getElementsByClassName("color-btn")].forEach(elem => {
elem.addEventListener('click', function() {
const btnColor = this.getAttribute('data-color');
changeColor(btnColor);
});
})
function changeColor(color) {
var element = document.getElementById('box');
element.style.backgroundColor = "var(--" +color +")";
}
:root {
--w: #fff;
--b: #000;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #aaa;
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>
<button class="color-btn" data-color='w'>white</button>
<button class="color-btn" data-color='b'>black</button>
Register an onClick event on those buttons (you would have to assign a unique ID to them to reference them properly)
Example:
document.getElementById("myBtn").addEventListener("click", changeColor("white"));
edit
I see you're using jQuery, so:
$("#myBtn").on( "click", function() {
changeColor("white");
});
That way your HTML doesn't have JS in it. You would have 2 events, one for each button.
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--color-white:#fff;
--color-black:black;
}
.box
{
width: 100px;
height: 100px;
border: 1px solid #aaa;
}
</style>
<script>
function changeColor(color)
{
var element = document.getElementById('box');
var style = getComputedStyle(document.querySelector(':root'));
element.style.backgroundColor = style.getPropertyValue('--color-' + color);
}
</script>
</head>
<body>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
</body>
</html>
I had this on exam. I cant find a way to solve this problem
<head>
<style>
div {
border:1px solid black;
display:inline-block;
width: 150px;
height:150px;
margin-right: 50px;
}
.color {
background-color:rgb(48, 241, 0);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- script -->
<script src='coloring.js'></script>
</body>
What i need to do here is to use CSS class .color in JS and with a simple click to paint one of the DIV elements. After i click another DIV he paint in that green and on another it disapear. If you get me. I would love some tip or solution.
Help guys
Thanks!!!
On clicking the div, first remove the class (color) from all div's (if there is any). Then add the class (color) only to the clicked div. Try the following way by using Document.querySelectorAll():
var div = document.querySelectorAll('div');
document.querySelectorAll('div').forEach(function(d){
d.addEventListener('click', function(){
div.forEach(function(el){
el.classList.remove('color');
})
this.classList.add('color');
});
});
div {
border:1px solid black;
display:inline-block;
width: 150px;
height:150px;
margin-right: 50px;
}
.color {
background-color:green;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
Get all the div and attach click event to them and inside the event handler get the div which has the class color. Use classList.remove to remove the color class from it,then use the event object to get the current target and use classList.add to add the color class
let getDiv = document.querySelectorAll('div');
getDiv.forEach(function(item) {
item.addEventListener('click', function(e) {
let getDivWithBcgColor = document.querySelector('.color');
if (getDivWithBcgColor !== null) {
getDivWithBcgColor.classList.remove('color')
}
e.target.classList.add('color')
})
})
div {
border: 1px solid black;
display: inline-block;
width: 150px;
height: 150px;
margin-right: 50px;
}
.color {
background-color: rgb(48, 241, 0);
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/
If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>
You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>
I've an alert div, once it pops up I've to wait till it disappear completely before the next animation can occur. Is there any way to ignore/cancel the animation and let it be overwritten with new one? So it re-alert very time I hover the button.
$('.button').hover(function () {
$('#alert-me').show();
$("#alert-me").fadeOut(6000);
});
<div class="hidden-div" id="alert-me">
<b> hello! </b>
</div>
A simple option would be to .finish() the animation before you .show() it.
Working Example:
$('.button').hover(function () {
$('#alert-me').finish().show();
$("#alert-me").fadeOut(6000);
});
.hidden-div {
display: none;
}
.button {
border: 1px solid grey;
padding: 0.5em;
margin: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">button</div>
<div class="hidden-div" id="alert-me">
<b> hello! </b>
</div>
inside the callback of show() method you can hide it.
$('.button').hover(function () {
$('#alert-me').show(function(){
$("#alert-me").fadeOut(6000);
});
});
How would I implement stacking properties to draggable divs in JQuery UI?
I you do not understand what exactly I am talking about, check this out: http://qtip2.com/demos#section-stacking
As you can see, in the link above, as you hover over the "tips", the respective tip will go to the top(which looks much like incresing the z-index).
How would I do this if I had 3 divs which are draggable?
Dumie example:
$(function() {
$(".draggable").draggable();
});
.draggable {
width: 150px;
height:100px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>
When I click any of the divs, I want them to come to the front(or do something like increasing the z-index).
Now I do not have any idea of how to do this, please do help and comment! :)
JQuery UI draggable has an option called stack that can do what you need. Simply set the selector against which the elements need to stack (it doesn't have to be only other draggables), and it'll manage the z-index for you. Like this:
$(function() {
$(".draggable").draggable({
stack: '.draggable'
});
});
.draggable {
width: 150px;
height:100px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>
http://api.jqueryui.com/draggable/#option-stack