I created two divs and I want the one div to disappear and appear by clicking the other one. I tried using Jquery and javascript, but it doesn't seem to be working. Basically, I want the blue one to disappear and appear by clicking the red one.
document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});
#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}
<div id="red"></div>
<div id="blue" class="blue"></div>
use .toggle() for example...
$(function(){
$("#red").on('click', function(){
console.log('click on red div');
$("#blue").toggle( "slow", function() {
// Animation complete.
});
});
});
#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red"></div>
<div id="blue"></div>
I am just curious, why don't simply change the selector from id to class (#blue to .blue ) in the CSS:
document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});
#red{
height: 100px;
width: 100px;
background: red;
}
.blue{
height: 100px;
width: 100px;
background: blue;
}
<div id="red"></div>
<div id="blue" class="blue"></div>
Related
I have this problem. How to solve this?
when I click on 'test'. 'b' would be shown. then I click on 'b'. it will change the value of 'a'. I need the value of a that included by 'container' not other values in other elements is are as same as class name 'container'. how? help me.
<head>
<style>
#test {
width: 100px;
height: 100px;
background: blue;
color: white;
}
.c {
width: 100px;
height: 100px;
color: red;
background: black;
}
.b {
display: none;
color: black;
background: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<div>
<div class="container"><div id="test"></div><div class="c">hello</div></div>
<div class="b"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
$('#test').on('click',function name(params) {
$('.b').show();
var a = $(this).parent().find('.c').html();
$('.b').click(function name(params) {
// how to change value of a?
});
});
</script>
Not sure why you have a click within a click but you would want to move b.click out of a.click. Then you need to declare your variable outside of a.click otherwise b.click will never reach it.
So, declare test with no value, then change the value of test within each click.
var a;
$('#test').on('click', function name(params) {
$('.b').show();
a = $(this).parent().find('.c').html('toBeginning');
});
$('.b').click(function name(params) {
a = $('.container').find('.c').html('changed')
});
#test {
width: 100px;
height: 100px;
background: blue;
color: white;
}
.c {
width: 100px;
height: 100px;
color: red;
background: black;
}
.b {
display: none;
color: black;
background: blueviolet;
width: 100px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div>
<div class="container">
<div id="test">Test</div>
<div class="c">hello</div>
</div>
<div class="b">B</div>
</div>
Are you looking this?
var a = '';
$('#test').on('click',function name(params) {
$('.b').show();
if(!a) {
a = $(this).parent().find('.c').html();
}
$(this).parent().find('.c').html(a);
});
$('.b').click(function name(params) {
// how to change value of a?
$('.container .c').html('changed value');
});
#test {
width: 100px;
height: 100px;
background: blue;
color: white;
}
.c {
width: 100px;
height: 100px;
color: red;
background: black;
}
.b {
display: none;
color: black;
background: blueviolet;
width: 100px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="container">
<div id="test"></div>
<div class="c">hello</div>
</div>
<div class="b"></div>
</div>
I'm trying to create a lille script to go trough my page and check if a class is present in any <div>. If the class is present then there will be no action.
It will look for class="blue" and if it find it it will do nothing. If it doesn't fint class="blue" it will change background color for class="yellow". What it does it change the background color for class="yellow" not matter what. What is wrong?
$("div").each(function() {
if (jQuery(this).attr('class') != undefined && jQuery(this).hasClass('blue')) {} else {
$('.yellow').css('background', 'green')
}
});
.blue {
background: blue;
width: 100px;
height: 100px;
}
.red {
background: red;
width: 100px;
height: 100px;
}
.yellow {
background: yellow;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
Blue
</div>
<div class="red">
Red
</div>
<div class="yellow">
Yellow
</div>
One liner... :)
http://jsfiddle.net/yak613/bcgajp6q/
Basically, you want that if a blue is there, the .yellow is green. Otherwise, it stays yellow.
You can see what happens when the blue is there by going to the fiddle (^above) and uncommenting the blue.
if(!$(".blue").length) $(".yellow").css('background-color', 'green');
.blue {
background: blue;
width: 100px;
height: 100px;
}
.red {
background: red;
width: 100px;
height: 100px;
}
.yellow {
background: yellow;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="blue">
Blue
</div> -->
<div class="red">
Red
</div>
<div class="yellow">
Yellow
</div>
All you need to do is simply check if the target element doesn't have the .blue class (with if (!$(this).hasClass('blue'))).
This can be seen in the following:
$("div").each(function() {
if (!$(this).hasClass('blue')) {
$('.yellow').css('background', 'green')
}
});
.blue {
background: blue;
width: 100px;
height: 100px;
}
.red {
background: red;
width: 100px;
height: 100px;
}
.yellow {
background: yellow;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
Blue
</div>
<div class="red">
Red
</div>
<div class="yellow">
Yellow
</div>
I am trying to find element with smoothscroll effect when I click button, How I can scroll into target if target is inside div.
I'm trying this way, but didnt work. Is it possible scroll to target if its inside div
$(document).ready(function(){
$('button').click(function(){
$('.box').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
Your logic is correct, you're just scrolling the wrong element. You need to call animate() on the .left element as that is the one which is overflowed:
$(document).ready(function() {
$('button').click(function() {
$('.left').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box {
clear: both;
}
.left {
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find {
margin-top: 400px;
}
#find p {
background-color: green
}
.right {
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
You need to add scrollTop on .left, as scrollbar appears there instead of .box i.e. overflow-y is visible and scroll-able on .left and not on .box.
$(document).ready(function(){
$('button').click(function(){
var bt = $("#find").offset().top;
$('.left').animate({
scrollTop: bt
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
I'm looking on Cnet's homepage and they have a cool over-lapping setup right now. Click to see their homepage.
How exactly is this done?
I tried to figure it out, but I can't quite think of how to do it. Within my example the green would be the ad part on the Cnet homepage (with Zebras).
#blue, #green, #red {
height: 500px;
width: 100%;
}
#blue {
background: blue;
z-index: 1;
}
#green {
background: green;
position: fixed;
margin-top: 200px;
}
#red {
background: red;
z-index: 1;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
Heres a codepen
<div class="root">
<div class="content">
<div id="green">
<label>ADD GOES HERE</label>
</div>
<div class="scroll">
<div id="blue"></div>
<div id="red"></div>
<div id="yellow"></div>
</div>
</div>
</div
css:
.content {
position: relative;
.scroll {
height: 500px;
overflow-y: scroll;
}
#blue,
#green,
#red,
#yellow {
height: 500px;
width: 100%;
}
#blue {
background: blue;
}
#green {
position: absolute;
top: 0;
z-index: -1;
background: green;
}
#red {
background: red;
margin-top: 500px;
}
#yellow {
background: yellow;
margin-top: 500px;
}
}
theres room to improve but the gist is that the advertisement (green div) is positioned absolutely on the same level as a div that wraps your scrollable items.
I want to change the class of only the div whose button is clicked. I tried something like this but it is not available
$(".a",this).toggleClass( "b" ); //
What would be an alternate way to do this?
$(".button").click(function() {
$(".a").toggleClass("b");
});
.a {
height: 200px;
width: 200px;
float: left;
background: red;
margin-left: 10px;
}
.b {
height: 200px;
width: 300px;
float: left;
background: blue;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div class="a">
<button class="button">clickme</button>
</div>
<div class="a">
<button class="button">clickme</button>
</div>
use parent()
$(".button").click(function() {
$(this).parent().toggleClass("b");
});
.a {
height: 200px;
width: 200px;
float: left;
background: red;
margin-left: 10px;
}
.b {
height: 200px;
width: 300px;
float: left;
background: blue;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div class="a">
<button class="button">clickme</button>
</div>
<div class="a">
<button class="button">clickme</button>
</div>
wrong selector. You selector is looking for element with class a in clicked button. which return nothing.
You need to traverse to parent:
$(".button").click(function() {
$(this).parent().toggleClass( "b" );
});