css java script adding if else - javascript

I have black and green css classes. I need to edit this JavaScript using if else elseif to put the black and green classes.
I just have to use green. How to put black using elseif?
<script type="text/javascript">
$(document).ready(function() {
});
//drop down menu
$(".drop-down").hover(function() {
$('.green').addClass('display-on');
});
$(".drop-down").mouseleave(function() {
$('.green').removeClass('display-on');
});
});
</script>

$(".d-d").hover(function(){
if( $(".green").hasClass("d-on") ){
$(".green").removeClass("d-on");
}else{
$(".green").addClass("d-on");
}
});
.d-d{
width:50px;
height:50px;
background: grey;
}
.green{
width:50px;
height:50px;
background: green;
}
.d-on{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="d-d"></div>
<br>
<div class="green"></div>

Related

How can I use drag-over in CSS?

I have a div with size 500x250px. When you drag any element onto it, its border should change color. I tried to achieve this effect using drag-over in CSS, but I could not get it to work.
#element{
width:500px;
height:250px;
border:2px solid orange;
}
#element::drag-over{
border-color:red !important;
}
<div id="element"></div>
A solution in jQuery:
$('input[type="file"]').on('dragover', function(){
$(this).addClass('drag-over');
}).on('drop', function (e) {
$(this).removeClass('drag-over');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element">
<input type="file">
</div>

setTimeOut and hover

I was playing around with learning some JavaScript and this small code didn't work for me. If I take out the setTimeout function, the hover works again.
Why doesn't the hover work?
https://jsfiddle.net/jzhang172/1n8gqeom/
setTimeout(
function(){
$(".div").css("background","blue");}, 100);
.div{
background:black;
height:50px;
width:50px;
}
.div:hover{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
$(".div").css("background","blue");}, 100);
With this line of code, you are adding inline style to the .div, so it has higher specificity.
Try something like this:
setTimeout(
function() {
$(".div").addClass('someClass');
}, 100);
.div {
background: black;
height: 50px;
width: 50px;
}
.div:hover {
background: red;
}
.someClass {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
css priority。 inline style > class style, so, cover
.div:hover{
background:red !important;
}

HTML/CSS/JS: Simple div not displaying

I just want to understand why the #div element is not appearing anyway at the simple following code:
<!DOCTYPE html>
<html>
<body>
<div id="div"></div>
<style>
#div{
color:black;
width:50px;
height:50px;
}
</style>
<script>
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
</script>
</body>
</html>
Here's the fiddle:
http://jsfiddle.net/26pkt2y6/
color would mean the foreground color. Since there's no text to show, it appears that the div isn't displaying. Set the background to see the div.
function algo() {
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div {
color: black;
width: 50px;
height: 50px;
background: #000;
}
<div id="div"></div>
Because it's empty, try to add some content between the div tags, or if you want to have a block like a button you have to change the CSS to:
<style>
#div{
background-color:black;
width:50px;
height:50px;
}
</style>
div{
color:black; change this to background-color:black;
width:50px;
height:50px;
}
Use background-color for the color
Your div is empty, set a text or styling with css, you should used background-color instead of color:
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div{
background-color:black;
width:50px;
height:50px;
}
<div id="div"></div>

'toggleClass` - how to `toggle` between 2 different `class` names

I would like to toggle 2 different classes. (A b), but i am not getting the result.
what is the issue with my code?
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Color Change</button>
Give your div a 'starter' class. Otherwise the first will 'toggle both on', the next 'toggle both off' etc.
Since both are setting the border, the last applied class is being used, whilst the other is being ignored, so hence you won't see the 'red' border.
Think of it like toggling between one class - on or off. If you start with no class, then the button will add the class (understandably).
If you're toggling with two classes, the same rules apply. You start with both off, then the button will toggle both on - and due to the order of css applied/specificity of css, the second will overwrite the first css definition.
So, in order to 'switch', you need to start with one in the 'on' position, and one in the 'off' position. And there you go! once the button is pressed, one will toggle from on to off, and the other vice versa.
$('button').on('click', function() {
$('div').toggleClass("A B");
});
div {
height: 20px;
}
.A {
border: 1px solid red;
}
.B {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
No need to toggle both the classes. One class you need to assign and another class you can toggle.
HTML
<div class="A"></div>
<button>Color Change</button>
JQUERY
$('button').on('click', function () {
$('div').toggleClass("B");
});
CSS
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
JSFIDDLE DEMO
If you seen here the logic is simple. When you click the button it add the additional class called B into the div. Once you click the button your div code will become like this <div class="A B"></div>
So it is important that the order of A and B in your CSS. For example if you move B class to the top of A class then you won't get the desired result.
Not working CSS:
div{
height:20px;
}
.B{
border:1px solid blue;
}
.A{
border:1px solid red;
}
Otherwise you can use the important keyword, so that it will not worry about the order, but not good in the practice.

Change jQuery element toggle

I have this example with a div which show / hide from the top, but I need it from the bottom to the top, I was trying to change some code, but I couldn't, and I didn't find any example.
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Slide Panel
<div id="panel">
<!-- you can put content here -->
</div>
You can also use the animate effect(http://api.jquery.com/animate/) and change the height of the div.
$(document).ready(function(){
$(".btn-slide").click(function(){
if($('#panel1').height=='0')
$("#panel1").animate({height:"140px"},{duration:1000});
else
$("#panel1").animate({height:"0px"},{duration:1000});
});
});
this will act as a toggle as well as amimate from bottom
You probably want to use slide effect provided by the jQuery UI. It allows you to define the direction as well.
You might want to use animate option in jquery, here is the code
HTML
<button class="btn-slide">Some Text</button>
<div id="box">
<div id="panel">Sample Text here<br/> Sample Text here<br/>Sample Text here</div>
</div>
CSS
#box
{
height: 100px;
width:200px;
position:relative;
border: 1px solid #000;
}
#panel
{
position:absolute;
bottom:0px;
width:200px;
height:20px;
border: 1px solid red;
display:none;
}
JQUERY
var panelH = $('#box').innerHeight();
$(".btn-slide").click(function(){
$("#panel").stop(1).show().height(0).animate({height: panelH},500);
});
});

Categories