jQuery Change CSS value if class not present - javascript

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>

Related

How to change value of element in a event that included by other event?

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>

Make div disappear and appear by clicking another div

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>

mousedown and move cross dom element, keep cursor is crosshair

When mousedown and mouse move from outside to inside, the cursor become like text, how to keep cursor is crosshair?
I tried use :active but not work ..
https://jsfiddle.net/xu9tmmfr/
div,
img {
cursor: crosshair;
}
.a {
width: 300px;
height: 300px;
background-color: red;
}
.a {
width: 200px;
height: 200px;
background-color: green;
}
.c {
width: 100px;
height: 100px;
background-color: pink;
}
<div class="a">
<div class="b">
<img class="c" src="" alt="">
</div>
</div>

Page layout setup

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.

How to increase size of something in class, but not other elements in class?

Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output
You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>

Categories