I have no knowledge of js, but I am trying to add a class to a div when any point of the screen is clicked. I have this html
<div class="container">
<div class="box"></div>
</div>
And I need to add the class to the container when any point of the screen is clicked.
I tried this js
<script>
let button = document.querySelector('.container');
button.addEventListener('click', function() {
button.classList.add('.hide');
});
</script>
but it is not working, the class is not being applied. What am I doing wrong?
There is a small syntax error: the class should be mentioned without the dot prefix:
button.classList.add('hide');
Demo
let button = document.querySelector('.container');
button.addEventListener('click', function() {
button.classList.add('hide');
});
.container {
background-color: #ddd;
cursor: pointer;
}
.box {
background-color: #ccf;
margin: 1rem;
}
.hide {
opacity: 0;
transition: opacity .5s ease-in-out;
}
<div class="container">
<br>
<div class="box">Click anywhere in the grey container to hide it</div>
<br>
</div>
Related
I have the following code in my HTML.
<div class="bg"></div>
<div class="content" id="hover">
<div class="one" id="hover-over">1</div> <!--Trigger!-->
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
The CSS..
.bg {
background: yellow;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.content {
background: red;
}
The Javascript..
var box = document.getElementById("bg");
var bgChanger = document.getElementById("hover-over");
//var body = document.getElementsByTagName("body");
function changeBackgroundUp() {
box.style.backgroundColor = "blue";
//body.style.backgroundColor = "#6fcc6f";
}
function changeBackgroundDown() {
box.style.backgroundColor = "green";
//body.style.backgroundColor = "red";
}
bgChanger.onmouseover = changeBackgroundUp; //
bgChanger.onmouseleave = changeBackgroundDown; //
A Fiddle: https://jsfiddle.net/bqnw4qyb/56/
The Problem
I wish to have the background of the project CHANGED to, for example, green - when the user hovers over one of the DIV elements inside "content". So, when the user hovers over "1", the background of the whole page will change to green. My DIV elements have the background of RED, I don't want this colour to change, only the background color, ideally I would want to change the background to an image using a
background: url('someImage');
type of system..
I have tried many existing solutions, such as using CSS hover:
.one:hover ~ .bg {
background: url('someImage')
}
At this stage I am stumped, so any help is very much appreciated.
function green() {
document.getElementsByClassName("content")[0].style.backgroundColor = "green";
}
function red() {
document.getElementsByClassName("content")[0].style.backgroundColor = "red";
}
.bg {
background-color: yellow;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.content {
background: red;
}
<div class="bg"></div>
<div class="content" id="hover">
<div class="one" onmouseover="green()" onmouseout="red()" id="hover-over">1</div> <!--Trigger!-->
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
Please see how I implemented this, is this what you would like?
My program is using the onmouseover and the onmouseout event.
Please leave any concerns in the comments, hope it helped ;)
Check the error console!
You have no box object as you have no element with id bg only class.
Add add the id to the div with class bg as well.
<div class="bg" id="bg"></div>
Also with your current positioning, the bg div is not actually visible.
https://jsfiddle.net/bqnw4qyb/67/
I have an HTML like the below format:
<div class="parent1">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
<div class="parent2">
Content here
</div>
Where Child 1/2/3 are tabs. Upon clicking one, the content will get active and a class active is added there.
I want to make the parent2 class visible (display block) only if Child 2 is active. I have tried some CSS which are not working.
Is there any possible script available for that?
Thank you.
In Jquery,
$(".child2").hasClass("active")?($(".parent2").css("display","block")):($(".parent2").css("display","none"))
A javascript onclick function will work for this.
<style>.nodisplay{display: none;}</style>
<div class="parent1">
<div id='child1' onclick='show(this)' data-id='parent2' class="child1">Parent2</div>
<div id='child2' onclick='show(this)' data-id='parent3' class="child2">Parent3</div>
<div id='child3' onclick='show(this)' data-id='parent4' class="child3">Parent4</div>
</div>
<div id='parent2' class='nodisplay'>
Content here
</div>
<div id='parent3' class='nodisplay'>
Content here
</div>
<div id='parent4' class='nodisplay'>
Content here
</div>
<script>
function show(div) {
var id1 = div.getAttribute('data-id');
var x = document.getElementById(id1);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
First I set the display of parents 2, 3, & 4 to none with CSS. next I add an onclick function to each child div and specify the data I want my script to pick up.
Then in my function; it will either collect 'parent2', parent3', or 'parent4' depending on which div was clicked, then assigns it the variable of id1. Next I create a variable 'x' to toggle between showing the div or not.
I hope this helps you understand using javascript to manipulate CSS a little better. Have a great day.
There are several ways to do it, you can try with jQuery show() and hide() , check here:
UPDATE: Using display block
You can do this:
//Register click listener:
$(".child2").click(function() {
//Check if the class is added
if($(".child2").hasClass("active")){
//Set display block
$('.parent2').css('display', 'block')
}
});
Both css('display', 'block') and show() will work
This is a purely CSS-based tabs implementation:
.parent {
font-size: 0;
}
input[type=radio] {
display: none;
}
input[type=radio]+label {
border: 4px solid #f0f0f0;
display: inline-block;
font-size: 16px;
padding: 10px;
min-width: 100px;
text-align: center;
transition: all .2s ease;
}
input[type=radio]:checked+label {
background-color: #a00;
color: #fff;
}
.tab-content {
background-color: #f0f0f0;
position: absolute;
height: 500px;
width: 500px;
opacity: 0;
transition: all .3s ease-in-out;
font-size: 16px;
padding: 15px;
}
input[type=radio]:checked ~.tab-content {
transition: all .6s ease-in-out .2s;
}
#tab1:checked~.tab1 {
opacity: 1;
}
#tab2:checked~.tab2 {
opacity: 1;
}
#tab3:checked~.tab3 {
opacity: 1;
}
<div class="parent">
<input type="radio" name="tabs" id="tab1" checked><label for="tab1">Tab 1</label>
<input type="radio" name="tabs" id="tab2"><label for="tab2">Tab 2</label>
<input type="radio" name="tabs" id="tab3"><label for="tab3">Tab 3</label>
<div class="tab-content tab1">Content for Tab 1...</div>
<div class="tab-content tab2">... here's content for Tab 2, ...</div>
<div class="tab-content tab3">... and, last but not least, here's Tab 3 content.</div>
</div>
I've come across some strange behavior in Chrome 60.0 when removing a class from an element with a very specific configuration.
I removed the fade class from an <h1> element and it makes it completely disappear. The problem can be reproduced by removing the class in the dev-tools element inspector as well. Can anyone tell me what's going on here?
The element should just go back to full opacity after clicking the button.
var button = document.querySelector('button');
var h1 = document.querySelector('h1');
button.addEventListener('click', function(){
h1.classList.remove('fade');
});
.center {
overflow: hidden;
}
h1 {
float: left;
overflow: hidden;
}
.fade {
opacity: .2;
}
<div class="center">
<div>
<h1 class="fade">Watch me disappear</h1>
</div>
</div>
<button>Click</button>
Removing the overflow: hidden property defined for h1, will solve your problem.
var button = document.querySelector('button');
var h1 = document.querySelector('h1');
button.addEventListener('click', function() {
h1.classList.remove('fade');
});
.center {
overflow: hidden;
}
h1 {
float: left;
}
.fade {
opacity: .2;
}
<div class="center">
<div>
<h1 class="fade">Watch me disappear</h1>
</div>
</div>
<button>Click</button>
How to Show hide div area with jquery
if scrollbar or overflow element active and no active
and this example code for My question
example html
$(function(){
var t = $('#container-ts-plugin-area'),
s = t.find('.container-ts-plugin-area'),
e = s.find('.ts-plugin-area'),
f = (e.outerWidth()+parseInt(e.css('margin-left'),10)+parseInt(e.css('margin-right'),10))*e.length;
s.css('width', f);
$('._ts_cont_btn_N_P button').on("click mouseenter", function() {
var role = $(this).data('role');
t.stop().animate({
scrollLeft: (role=="N")?"+=300px":"-=300px"
}, 400);
});
});
._ts_cont_btn_N_P {
overflow: hidden;
}
.plugin-area {
overflow-x:auto;
overflow-y:hidden;
}
.ts-plugin-area {
width:100px;
height:100px;
background-color:red;
display:block;
float:left;
margin:0 5px;
}
._ts_btn_prev_plugin {
float:left;
}
._ts_btn_N_plugin {
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="_cont_plugin_tse">
<div class="_ts_cont_btn_N_P"> <!-- auto show hide -->
<button class="_ts_btn_P_plugin" data-role="P"><<</button>
<button class="_ts_btn_N_plugin" data-role="N">>></button>
</div>
<div id="container-ts-plugin-area" class="plugin-area">
<div class="container-ts-plugin-area">
<div class="ts-plugin-area" data-position="1">1</div>
<div class="ts-plugin-area" data-position="2">2</div>
<div class="ts-plugin-area" data-position="3">3</div>
<div class="ts-plugin-area" data-position="4">4</div>
<div class="ts-plugin-area" data-position="5">5</div>
<div class="ts-plugin-area" data-position="6">6</div>
</div>
</div>
</div>
To check if element have scrollbar or overflow active or no active state you need to check if the child element is bigger than the parent element.
Also its depend on your overflow settings of your parent thats its should be auto or scroll in order to show the scrollbar.
Global example
if($('.child').width() > $('.parent').width()) {
// then do something
console.log('scrollbar is active');
}
.parent {
width: 300px;
overflow: auto;
}
.child {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
// add something in here
</div>
</div>
And for your code can check if the .container-ts-plugin-area width is bigger than the #container-ts-plugin-area width and then you show the buttons
And by default to hide this buttons in css
._ts_cont_btn_N_P {
overflow: hidden;
display: none;
}
And in the jQuery to add
if(s.width() > t.width()) {
$('._ts_cont_btn_N_P').show();
}
here is the full demo of your code
https://jsfiddle.net/p2y79f7x/1/
I want to remove div with a great animation but I don't know how to do this.
So I make that fiddle for example :
HTML
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
CSS
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
JS
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
I see a good example here
But when a div is removed, she's cut and they are only animation for the next div.
Any idea ?
EDIT
Finally resolved : Jsfiddle
Since you remove your element, it cannot be animated anymore. You could animate via a class and on transitionend remove the element. Like this for example:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
http://jsfiddle.net/nawkufh1/
You could do it like this:
$('#delete').click(function (e) {
$(".notification:first-child").slideUp(function() {
$(this).remove();
});
});
$('#add').click(function (e) {
$(".notifications").append("<div class='notification'></div>");
});
.notifications {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px green;
}
.notification {
height: 40px;
background: lightblue;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
</div>
This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.
I've solved my problem with animation JsFiddle
Thanks all for your help.