How can I use drag-over in CSS? - javascript

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>

Related

how to show border of clicked div only?

I need a help in this jquery or javascript problem. I have many divs with some particular ids and onclick that div the border should get changed and onclick another div with different id the border of that div again get changed like previous div but border of previous div get removed.
<style>
.mydiv {
width:100px;
height:100px;
background-color:yellow;
float:left;
margin:10px;
}
.active{
border: 10px solid black;
}
</style>
<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>
<script>
$(".mydiv").click(function(){
$(".mydiv").removeClass('active');
$(this).addClass('active');
});
</script>
Look at the snippet below to see my attempt. What it does is once you click on a div with the class clickable the code removes the border class from the previous div, adds the border class to the newly clicked div and updates the prevDiv.
I prefer this method because where other people use $('div').css('border', 'none'); to remove all the borders from every div, this code only removes the border from the previously clicked div. Thus allowing you to have (non clickable) divs with a predefined border/border class.
let prevDiv;
$(".clickable").click(function(){
$(prevDiv).removeClass('border');
$(this).addClass('border');
prevDiv = $(this);
});
.clickable {
width:100px;
height:100px;
margin: 10px;
display: inline-block;
margin-right: 25px;
}
.border {
border: 5px solid black;
}
#firstID {
background-color: red;
}
#secondID {
background-color: orange;
}
#thirdID {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable" id="firstID">Placeholder text</div>
<div class="clickable" id="secondID">Placeholder text</div>
<div class="clickable" id="thirdID">Placeholder text</div>
$(".mydiv").click(function(){
$(this).css('border','10px solid black');
});
.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="mydiv">ABCD</div>
</body>
</html>
you can write in java script -
let yourDivIds =["your_div1","your_div2"]; // specify all your div ids
function removeGlowingDivs() { // this will remove class from other div's
yourDivIds.forEach(item=>{
document.getElementById(divID).removeClass('your_class_name');
})
}
// add this on click event on all div's
function highlightDiv(divID) { // this will add class
removeGlowingDivs();
document.getElementById(divID).addClass('your_class_name');
}
$('div').click(function(){
$('div').css('border', 'none');
$(this).css('border', '1px solid black');
});
NOTE: Replace the $(div) with the relevant parent element's ID or class.
Try this:
// The class div class is the div tag if you want and Id replace
// Replace the . with a #
$(".the_div_class").click(()=>{
$(".the_div_class").addClass("the_border_class");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

css java script adding if else

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>

'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.

hover overlayed text on an image bug

I have an overlayng text and navigation arrows on an image, they appear when a mouseover event is fired and hide when the mouse leaves the image.
The bug is that the overlay text is not a part of the image, so when i mouse over it, it starts flashing (because when the text hides, the mouse is positioned on the image, and that fires the mouseover event and the text shows up again)
This is my current JavaScript logic:
$('#container img').mouseover(function(){
$(this).siblings('.discr').show();
$(this).mouseout(function(){
$(this).siblings('.discr').hide();
})
})
For better understanding this is a DEMO and here is what i expect: the overlay text does not flash when the mouse is over it, it acts like when the mouse is over the image only.
You can try something like this:
JavaScript version
$('#container').mouseover(function () {
var $controls = $(this).find('.discr');
$controls.show();
$(this).mouseout(function () {
$controls.hide();
})
})
Example http://jsfiddle.net/b6hjm3t1/
Pure CSS version without JavaScript
You can have the same results just with CSS without the using JavaScript just by adding to the CSS:
#container:hover .discr {
display:block;
}
Example: http://jsfiddle.net/t6hf0fqg/
I think that this does what you're looking for. I've modified the code a little bit:
http://jsfiddle.net/jfkk78cn/1/
$( "#container" )
.mouseover(function() {
$(this).find('.discr').show();
})
.mouseout(function() {
$(this).find('.discr').hide();
});
Here is a CSS only solution for the same effect.
The important part is the you can do #container:hover .discr which will target the .discr elements when the #container is hovered.
img {
width:200px;
height:200px;
display:block;
}
#container {
float:left;
position:relative;
border:2px solid green;
}
.discr {
position:absolute;
color:red;
background:rgba(0, 0, 0, 0.2);
bottom:0px;
width:100%;
text-align:center;
display:none;
}
/*ADDED THIS RULE*/
#container:hover .discr{
display:block;
}
.next {
left:185px;
}
.next, .prev {
bottom:50%;
width:15px;
border-radius:9px;
}
<div id='container'>
<img src='http://goo.gl/Rwf5SG' />
<div class='discr prev'><</div>
<div class='discr next'>></div>
<div class='discr'>lorem ipsum</div>
</div>

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