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>
Related
I have a paragraph and I want to change it to textarea on click. Not with some extra button but with direct click on paragraph itself and after editing with a click outside of currently textarea back to paragraph using javascript or jquery. Any suggestions? Thanks!
Here is my input.
I have used contenteditable attribute to toggle the editing of the div.
$(document).on('click', function(e) {
$('.textarea').attr('contentEditable', false);
});
$('.textarea').on('click', function(e) {
$(this).attr('contentEditable', true);
e.stopPropagation();
});
.textarea {
border: 1px solid;
}
[contenteditable="true"] {
border: 2px solid red;
}
span {
background: grey;
padding: 1.25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea" contenteditable="false">
Hello World. This is a super awesome paragraph that you can edit using <span>contenteditable</span> attribute on click.
</div>
Try the below code to solve your problem:
$('#myDiv').click(function(e){
$('p').contents().unwrap().wrap('<textarea/>');
e.stopPropagation()
});
$('#myBdy').click(function(){
$('textarea').contents().unwrap().wrap('<p/>');
});
#myDiv {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="myBdy">
<div id="myDiv">
<p id="myP">Hi</p>
</div>
</body>
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>
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.
What I have:
8 numbered boxes in a row.
I'm not allowed to use jQuery.
What I want to do:
When the user hovers a numbered box, text changes dynamically inside a div element depending on which box is being hovered on.
Example:
If user hovers over Box 1, the text inside the div element says "Hello"
If user hovers over Box 2, the text inside the div element (same as before) says "World"
Edit: the closest I have is text changing if the user clicks on a button: http://jsfiddle.net/pVN2a/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
<style type="text/css">
#button1 {
background-color:red;
display:inline-block;
}
#button2 {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="button1">
Click 1
</div>
<div id="button2">
Click 2
</div>
<div id="textResults">
Click on a button to change text
</div>
<script>
// when #button1 is clicked...
document.getElementById("button1").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Hello World";
});
// when #button2 is clicked...
document.getElementById("button2").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Just Clicked #button2";
});
</script>
</body>
</html>
Am I supposed to use .onMouseEvent in conjunction with some sort of event listener? Sorry, I'm totally new to this. :(
Edited to fit OP's request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered.
JSFiddle Demo
HTML
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="results"></div>
</div>
CSS
.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }
.results {
width: 250px;
height: 100px;
background: #ccc;
margin-top: 4px;
}
.box1:hover ~ div.results:before {
cursor: pointer;
content: "Hello";
}
.box2:hover ~ div.results:before {
cursor: pointer;
content: "World";
}
Using the General Sibling Combinator.
How about using onmouseover, that's not jQuery.
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);
});
});