Develop Reference

Different hover colors when an item is clicked and not clicked in Jquery

I want the color of the active elements to change when it's hovered, and when it's not active the hover color should be different.
"highlightbutton" class is not removed after the "toggleclass" and I can't seem to manage to apply a code to change hover color when the item is clicked and when it's clicked back to default unclicked state it should revert back to original hover color when hovered.
Here is my code:
$(".toggle").hover(function() {
$(this).addClass("highlightbutton");
}, function() {
$(this).removeClass("highlightbutton");
});
$(".toggle").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightbutton");
});
css
.active {
background-color: #E8F2FF;
}
.highlightbutton {
background-color: #E4E4E4;
}

As #connexo has said, this is more of a css case.
you can either add an id to the thing you want to highlight do this:
.toggle:hover{
//Colour changing
}
.toggle:active{
//Colour changing
}
or you could add an ID to the element and do it this way:
#toggle:hover{
//Colour changing
}

Use jQuery to add and remove your .active class. Everything else can be handled by CSS
$(".toggle").click(function() {
$(this).toggleClass("is-active");
});
.toggle:hover {
background-color: #E4E4E4;
}
.toggle.is-active {
background-color: black;
color: white;
}
.toggle.is-active:hover {
background-color: #666;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle">toggle button</button>
The toggling of an active class can also be achieved with vanilla JS:
[...document.querySelectorAll('.toggle')].forEach(toggle => {
toggle.addEventListener('click', e => e.target.classList.toggle('is-active'));
})
.toggle:hover {
background-color: #E4E4E4;
}
.toggle.is-active {
background-color: black;
color: white;
}
.toggle.is-active:hover {
background-color: #666;
}
<div class="toggle">toggle button</div>
<div class="toggle">toggle button 2</div>
<div class="toggle">toggle button 3</div>

Just edited my fiddle, here is your answer : https://jsfiddle.net/csdgyhof/2/
$(".toggle").hover(function() {
$(this).addClass("highlightbutton");
}, function() {
$(this).removeClass("highlightbutton");
});
$(".toggle").click(function() {
$(this).toggleClass("active");
});
CSS
.active {
background-color: #E8F2FF !important;
}
.highlightbutton {
background-color: #E4E4E4;
}
On the click event you removed the needed class. Instead of using !important (hard to override) look into css priorities.

Keep an image selected

I have a program which allows the user to select some images and i gave them the pseudo class
.my_image_clas:hover{
border:3px solid blue;
-webkit-box-sizing: border-box; }
to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :
How can i achieve this? (With javascript)

CSS-only "hack"
At first this question asked for CSS-only solution and while, as others have said, it's not really possible to achieve what you ask for without JavaScript, there is a CSS-only hack, however:
img {
margin: 3px;
width: 100px;
}
img:hover, img:target {
border: 3px solid green;
margin: 0;
}
<img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by making your images a target of a click on an anchor they are contained in. We can style elements that are link targets, because we have a selector for that in CSS.
Note that this way you can select only one image.
Pure JavaScript
If you want to do it with JavaScript though, you can use below code:
function select(element) {
element.onclick = function() {
element.classList.toggle('selected');
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
img {
margin: 3px;
}
.selected {
border: 3px solid green;
margin: 0;
}
<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by toggling class named selected on click for every element with class selectable. Also, it will let you select multiple items.
If you want to limit the user to selecting only one element though, change the above JavaScript to:
function select(element) {
element.onclick = function() {
var selected = document.getElementsByClassName('selected')[0];
if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
if (element !== selected) { element.classList.add('selected'); }
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);

You may use jQuery here for hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:
$(document).ready(function() {
$(".my_image_clas").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
.my_image_clas.Hover { border: 3px solid blue; }
#Francesco Monti I've read your comment.
for working with jquery you may add jquery.js under the head tag of your html
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
or adding online would be
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
and you can use $(document).ready(function() under the script tags.
If you want you can separate js & css files and includes those files accordingly.

Your approx CSS:
.item {
box-sizing: border-box;
border: 2px solid transparent;
}
.item.selected,
.item:hover,
.item:focus {
border: 2px solid blue;
}
Some basic jQuery:
$('.item').on('click', function (event) {
event.preventDefault(); // Prevent default behavior if .item is a link or button
$(this).toggleClass('selected');
})

Disable hover on scroll to prevent browser repaint

I have a hover effect on a list of div, the css is:
.product:hover {
background-color: #f6f6f7;
border-left-color: #f6f6f7 !important;
border-right-color: #f6f6f7 !important;
outline: 10px solid #f6f6f7;
z-index: 1;
}
I want this hover effect to not be triggered when the user is scrolling the page, to not force the browser to repaint/reflow.
So I tried:
doc = $(document)
doc.scroll(->
$('.product').unbind('mouseenter').unbind('mouseleave')
)
But it doesn't seem to work, when I scroll the hover effect is still triggered. Any idea why? Or how I have achieve that?

Add this in your css style page
.disable-hover {
pointer-events: none;
}
You have to do is add the .disable-hover class to the body when you begin to scroll. This then allows the users cursor to pass through the body and thus disable any hover effects.
var body = document.body,timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
Add this script and execute it will works:-

Try setting
document.body.style.pointerEvents = 'none';
when scroll event is triggered. Detailed docs here.

CSS hover has nothing to do with JavaScript events.
If you want to do what you are after, you will need to do it by adding/removing a class onscroll
var scrollTimer;
$(window).on("scroll", function() {
if(scrollTimer) window.clearTimeout(scrollTimer);
$("body").removeClass("effect");
scrollTimer = window.setTimeout( function()
$("body").removeClass("effect");
}, 100);
});
and the CSS
.effect .product:hover {
background-color: #f6f6f7;
border-left-color: #f6f6f7 !important;
border-right-color: #f6f6f7 !important;
outline: 10px solid #f6f6f7;
z-index: 1;
}
and PS: using important is BAD practice

OnClick event to change cell background

Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!

Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle

change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}

Context menu using jquery

I have a context menu in jquery on Right Click.
But it is somehow not fulfilling my needs.
When i add new div on click and then try to have context menu operation on it, then it is not working.
It is applying operation on original div.
Can someone help me out in getting this problem solved and improving my Jquery or HTMl.
Js fiddle for Context Menu
Thanks

As marck said that there are many mistakes in your code.You used same ID on multiple elements multiple times. Anyway, I created a basic jsfiddle of what you are trying to achieve. You can build on top of that and modify it according to your needs.
Here is the link:
http://jsfiddle.net/PCLwU/
function add(){
//For adding new items.
}
function menu(){
//to show up context menu
}
function menuactions(){
//Define the actions performed when menu option is selected.
}
For different context menu for different list : http://jsfiddle.net/PCLwU/3/

Context menu div
<div id='contextMenu'>
<ul id='items'>
<li id="cutDoc">Cut</li>
<li id="copyDoc">Copy</li>
<li id="pasteDoc">Paste</li>
<li id="deleteDocs">Delete</li>
</ul>
</div>
menu Style
<style>
#items
{
list-style: none;
margin: 5px 0 0 5px;
}
#contextMenu
{
display: none;
position: fixed;
border: 1px solid grey;
width: 150px;
background-color:white;
box-shadow: 2px 2px 1px grey;
}
#items li
{
list-style-type: none;
border-bottom: 1px solid grey;
border-bottom-style: dotted;
padding: 10px;
font-size: 14px;
}
#items :hover
{
background: #0070FF;
color: white;
}
</style>
jQuery Script for applying on area where it will needed which
$("YOur class name").mousedown(function(e){
//to block browsers default right click
if( e.button == 2 ) {
$("#contextMenu").css("left", e.pageX);
$("#contextMenu").css("top", e.pageY);
$("#contextMenu").fadeIn(500, startFocusOut());
}
});
function startFocusOut() {
$(document).on("click", function () {
$("#contextMenu").hide(500);
$(document).off("click");
});
}
This will work fine.
Update:
here is the fiddle demo