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.
Related
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>
I am trying to make a Tic-Tac-Toe game and I am currently working on the aspect of selecting the boxes themselves, but while using JQuery the :not selector doesn't seem to be working.
function main(){
//Functions
$('.cell:not(.block)').click(function(){
$(this).addClass(color);
$(this).addClass('block');
if(color=='g'){color='r';}else{color='g';}
});
//Variables
var color = 'g';
}
$().ready(main);
html {
background-color:black;
color:white;
text-align:center;
}
.cell {
border: 1px solid white;
margin:1px;
width:30%;height:30%;
}
.g {background-color:lime;}
.r {background-color:red;}
#board {height:500px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Tic Tac Toe</header>
<div id='board'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
That isn't how jQuery selects elements.
When you run $('selector'), the selector is evaluated immediately, against the current state of the DOM. Your three elements are found because none of them have .block, and click handlers are bound to all three elements.
There are several ways of fixing this:
If you want the selector to be dynamically evaluated, you need to use on to delegate the event to one of the containing elements. The event on the specific child element will bubble up to the containing element's handler and be tested each time against the selector. This is the most expensive option, and probably the least desirable; you shouldn't be relying on jQuery selectors for this kind of logic:
$('.board').on('click', '.cell:not(.block)', function () {
// ...
});
Alternatively, the simplest and cheapest option is to simply check for .block in the click handler:
$('.cell').click(function () {
if ($(this).hasClass('block')) return;
//...
Finally, you can unbind the click handler at the same time you add the .block class
$('.cell').click(function () {
$(this).unbind( "click" );
// ...
Since you are changing the class after already have made the selection it would count as a dynamic selector and you need to use .on() for that.
function main() {
//Functions
$('#board').on('click', '.cell:not(.block)', function() {
$(this).addClass(color).addClass('block');
color = color == 'g' ? 'r' : 'g';
});
//Variables
var color = 'g';
}
$().ready(main);
html {
background-color: black;
color: white;
text-align: center;
}
.cell {
border: 1px solid white;
margin: 1px;
width: 30%;
height: 30%;
}
.g {
background-color: lime;
}
.r {
background-color: red;
}
#board {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Tic Tac Toe</header>
<div id='board'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.
.left,
.right {
margin: 10px;
float: left;
border: 1px solid red;
height: 60px;
width: 60px
}
.left:hover,
.right:hover {
border: 1px solid blue;
}
.center {
float: left;
height: 60px;
width: 160px
}
.center .left1,
.center .right1 {
margin: 10px;
float: left;
border: 1px solid green;
height: 60px;
width: 58px;
display: none;
}
<div class="left">
Hello
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
<div class="right">
Hello2
</div>
When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.
You can use style property for this. For example, if you want to change border -
document.elm.style.border = "3px solid #FF0000";
similarly for color -
document.getElementById("p2").style.color="blue";
Best thing is you define a class and do this -
document.getElementById("p2").className = "classname";
(Cross Browser artifacts must be considered accordingly).
// select element from DOM using *const*
const sample = document.getElementById("myid"); // using CONST
// or you can use *var*
var sample = document.getElementById("myid"); // using VAR
// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; //Replaces all style properties. NOT RECOMENDED
Use document.getElementsByClassName('className').style = your_style.
var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";
Use single quotes for JS strings contained within an html attribute's double quotes
Example
<div class="somelclass"></div>
then document.getElementsByClassName('someclass').style = "NewclassName";
<div class='someclass'></div>
then document.getElementsByClassName("someclass").style = "NewclassName";
This is personal experience.
Consider the following example:
If you want to change a single CSS property(say, color to 'blue'), then the below statement works fine.
document.getElementById("ele_id").style.color="blue";
But, for changing multiple properies the more robust way is using Object.assign() or, object spread operator {...};
See below:
const ele=document.getElementById("ele_id");
const custom_style={
display: "block",
color: "red"
}
//Object.assign():
Object.assign(ele.style,custum_style);
Spread operator works similarly, just the syntax is a little different.
Just for the info, this can be done with CSS only with just minor HTML and CSS changes
HTML:
<div class="left">
Hello
</div>
<div class="right">
Hello2
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
CSS:
.left, .right{
margin:10px;
float:left;
border:1px solid red;
height:60px;
width:60px
}
.left:hover, .right:hover{
border:1px solid blue;
}
.right{
float :right;
}
.center{
float:left;
height:60px;
width:160px
}
.center .left1, .center .right1{
margin:10px;
float:left;
border:1px solid green;
height:60px;
width:58px;
display:none;
}
.left:hover ~ .center .left1 {
display:block;
}
.right:hover ~ .center .right1 {
display:block;
}
and the DEMO: http://jsfiddle.net/pavloschris/y8LKM/
This is really easy using jQuery.
For instance:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
I've update your fiddle:
http://jsfiddle.net/TqDe9/2/
You can do so using jQuery like this.
$('.left, .right').on('mouseenter', function(e) {
if ($(this).attr('class') == 'left1') {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
} else if ($(this).attr('class') == 'left1') {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
}
})
or you can use it like this
for first requirement
$('.left').on('mouseenter', function(e) {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})
for second requirement
$('.right').on('mouseenter', function(e) {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})
I am trying to change a list item when the user clicks the selected class is changed to the clicked item. I have this code:
$(function() {
$("a.product-page li").click(function(){
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
});
});
However the removeClass works however the addClass does not.
Here is the Site.
HTML:
<ul id="options">
<span></span><li>Summary</li>
<span></span><li>Specs</li>
<span></span><li>Media</li>
<span></span><li>Reviews</li>
</ul>
CSS:
ul#options {
margin-left:0px;
}
ul#options li{
list-style:none;
padding: 10px 20px;
background: #CCC;
border-top: 1px #999 solid;
border-left: 1px #999 solid;
border-right: 1px #999 solid;
}
ul#options a{
display:block;
border:none !important;
}
ul#options a.selected-page span{
position:absolute;
width:0px;
height:0px;
border-width:10px;
border-color:transparent #999999 transparent transparent;
border-style:solid;
margin-left:270px;
margin-top:11px;
}
ul#options a:last-child li {
border-bottom:1px #999 solid;
}
It's because you're immediately removing the class. Flip those two lines around, and it'll work.
$(function() {
$("a.product-page li").click(function(){
$("#options a.selected-page").removeClass("selected-page");
$(this).parent("a").addClass("selected-page");
});
});
As noted in a comment above, your HTML is terribly malformed as well. That will need to be fixed.
You should wrap <a> link tag inside li tag like below,
HTML:
<ul id="options">
<li><span></span>Summary</li>
<li><span></span>Specs</li>
<li><span></span>Media</li>
<li><span></span>Reviews</li>
</ul>
You are removing the class that you just added. You can move the remove class above the addclass or just use not to exclude this when you remove..
Code:
$(function() {
$("a.product-page", $('#options')).click(function(){
$(this).addClass("selected-page");
$("#options a.selected-page").not(this).removeClass("selected-page");
});
});
You are adding the class and then removing in the next line.
The order here
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
is incorrect.
Reverse the lines
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle.net/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help
CSS
.source-title-box a{
color:#467FD9;
display:inline-block;
}
.source-title-box a:hover{
color:#666666;
}
.source-title-box hover{background:#cb2326;}
JS:
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});
you can select below a pseudo class like :hover. No need for javascript at all for this.
http://jsfiddle.net/7bFKq/
.source-title-box:hover{
background-color:#467FD9;
}
.source-title-box:hover a{
color:#FFFFFF;
}
If you must do it with a hover on a, you will need javascript.
http://jsfiddle.net/7wwdb/
$('a').hover(function(){
// .closest will get you to the div regardless of what might
// be in between. With .parent you get to the absolute parent, which
// in your case is a span
$(this).closest('.source-title-box').toggleClass('hover');
});
css is basically the same, just :hover to .hover
.source-title-box.hover{
background-color:#467FD9;
}
.source-title-box.hover a{
color:#FFFFFF;
}
jsFiddle DEMO
Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).
$('.activity-title a').on('mouseover', function () {
$(this).closest('div').toggleClass('hover');
});
$('.activity-title a').on('mouseout', function () {
$(this).closest('div').toggleClass('hover');
});
Changes this:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
}
to:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
padding:15px;
}
And this:
.source-title-box
{
color: #000;
background: #fff;
padding: 15px;
width: 200px;
position: relative;
margin-top:10px;
border: 1px dotted #666;
}
to:
.source-title-box
{
color:#000;
background:#fff;
width:230px;
position:relative;
margin-top:10px;
border:1px dotted #666;
}
DEMO
No JS required.
Keep the JavaScript you have, and add this CSS class:
.hover {
background-color: #f00;
}
http://jsfiddle.net/RLjvB/
Greg,
There are 2 points:
1) The jquery .hover() function expects two handlers as argument.
One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.
2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.
...Your HTML Code...
<script>
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});
</script>
</body>
Hope this helps.