hover/click with list of DIVs - javascript

I've a set of DIVs and I need to give them a effect on mouse hover and when one of DIVs being clicked, the clicked DIV should look like it's being hovered (or whatever effect) until another DIV get clicked.
<div class="items" id="item1">AN ITEM</div>
<div class="items" id="item2">AN ITEM</div>
<div class="items" id="item3">AN ITEM</div>
<div class="items" id="item4">AN ITEM</div>
I've tried to achieve this using jQuery but the effect goes away on mouse out.
$('.items').hover(function () {
var div = $(this).attr('id');
if ($(div).css("background-color") == settings.color2) {
return false;
} else {
$("#" + div).css("background-color", settings.color2);
}
}, function () {
var div = $(this).attr('id');
if ($(div).css("background-color") == settings.color2) {
return false;
} else {
$("#" + div).css("background-color", "transparent");
}
}).click(function () {
$(this)
.closest('div')
.css("background-color", "transparent");
$(this).css("background-color", settings.color2);
});

Instead of adding the hover styles using JS, I would suggest adding them via CSS. And add the same styles to an "active" class and toggle that class on click.
Something like this:
CSS:
.items:hover,
.items.active {
background-color: /* whatever */;
}
JS:
$('.items').on('click', function() {
$('.items').removeClass('active');
$(this).addClass('active');
});

Try adding an "active" class on click which has the same styles as hover. When some other div is clicked you remove that class from previously clicked div and add it to the current div.

Try
var $items = $('.items').hover(function () {
$(this).css("background-color", 'red');
}, function () {
if (!$(this).hasClass('clicked')) {
$(this).css("background-color", "transparent");
}
}).click(function () {
$items.filter('.clicked').css("background-color", "transparent").removeClass('clicked')
$(this).addClass('clicked').css("background-color", 'red');
});
Demo: Fiddle
Note: I din't use a class to style the clicked state because it looks like the background color is coming from an option, in that case it will be difficult to assign a class, else the clicked class also needs to be passed as a setting.
A better alternative will be to
var settings = {
color2: 'red',
clicked: 'clicked'
}
var $items = $('.items').hover(function () {
$(this).css("background-color", settings.color2);
}, function () {
if (!$(this).hasClass('clicked')) {
$(this).css("background-color", "transparent");
}
}).click(function () {
$items.filter('.' + settings.clicked).removeClass(settings.clicked)
$(this).addClass(settings.clicked);
});
Demo: Fiddle

Related

jQuery - clicking 1 div and change class on 2 divs

I have 2 divs named yellowUp with up arrows as background images.
As it is now, when I click on a yellowUp div, only the clicked div changes class. How do I make both divs change class on click?
HTML
<div class="yellowUp"></div>
<div class="yellowUp"></div>
<div id="contentContainer"></div>
CSS
.yellowUp {
background-image: url(../images/arrow-up.png);
}
.clicked {
background-image: url(../images/arrow-down.png);
}
jQuery
$(".yellowUp").click( function(event){
event.preventDefault();
if ( $(this).hasClass("clicked") ) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
} else {
$("#contentContainer").stop().animate({marginTop:"-300px"}, 200);
}
$(this).toggleClass("clicked");
return false;
});
If you want both .yellowUp divs to have the .clicked class when 1 is clicked, then instead of doing $(this).toggleClass("clicked"); just select the class instead.
jQuery
$(".yellowUp").toggleClass("clicked");
$(".yellowUp").click( function(event){
event.preventDefault();
if ( $(this).hasClass("clicked") ) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
} else {
$("#contentContainer").stop().animate({marginTop:"-300px"}, 200);
}
$('.yellowUp').toggleClass("clicked");
return false;
});
.yellowUp {
color: blue;
}
.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yellowUp">Hi</div>
<div class="yellowUp">Hi</div>
<div id="contentContainer">BLah</div>
it's because you only change the class of the clicked object.
instead, use :
$(document).ready(function(){
$('.yellowUp').on('click', function(e){
e.preventDefault();
$('.yellowUp').each(function($key, $index) {
if ( $(this).hasClass("clicked") ) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
} else {
$("#contentContainer").stop().animate({marginTop:"-300px"}, 200);
}
$(this).toggleClass("clicked");
});
});
});
In the previous code we parse each element with the class yellowUp to toggle clicked.
hopes it helps !
Nic
You need to change this toggleClass to select ".yellowUp"
Thanks Nic,
I went with this really simple option (to me at least):
$(".yellowUp").click( function(event){
event.preventDefault();
if ( $(this).hasClass("clicked") ) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
$(".yellowUp").css("background-image", "url(images/arrow-up.png)");
} else {
$("#contentContainer").stop().animate({marginTop:"100px"}, 200);
$(".yellowUp").css("background-image", "url(images/arrow-down.png)");
}
$(this).toggleClass("clicked");
return false;
});
I just added a css background image change for each condition.

Menu staying fixed

I have a little function that makes my headerbar class fixed after i click on the menu button.
It works but when i click on the button again the headerbar stays fixed.
Here is my javascript:
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
This code makes the headerbar class fixed:
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
So basically I want it to change back to normal when I click the button again.
Try this:
JavaScript
$(function () {
$('.menuBtn').click(function (e) {
e.preventDefault();
$(this).toggleClass('is-active').toggleClass('fixed-position');
$('.headerBarm').toggleClass('fixed-position');
$('nav').slideToggle();
});
});
CSS
.fixed-position {
position: fixed;
}

what is the best way to return the orginal style when mouseleave jquery?

I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?
var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
// what should I put here to return the original
});
Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.
var eye_disease1 = $('#eye_disease1'),
diseaseHtml = '';
eye_disease1.mouseenter(function () {
if (!diseaseHtml) {
diseaseHtml = eye_disease1.html();
}
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
diseaseHtml = '';
eye_disease1.html(diseaseHtml);
});
You can all use the addClass
`$("selector").mouseenter(function(){
$(this).addClass("active");
})
$("selector").mouseleave(function(){
$(this).removeClass("active");
})`
var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
function() {
eye_disease_1_html = eye_disease1.html();
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
.fadeOut(0)
.css('border','none')
.fadeIn(400);
}, function() {
eye_disease1.find('span.show_li, span.show_li_2')
.fadeOut(400)
.delay(400)
.html(eye_disease1_html)
.fadeIn(0);
}
);
But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.
HTML:
<div id="eye_disease1">
<div class="original-content">
Original Content
</div>
<div class="hovered-content">
<span class="show_li">symptoms</span>
<span class="show_li_2">diseases</span>
</div>
</div>
CSS:
.hovered-content {
display: none;
}
.hovered {
border: none;
}
JS:
$('#eye_disease1').hover(
function() {
$(this).addClass("hovered");
$(this).find(".original-content").fadeOut();
$(this).find(".hovered-content").fadeIn();
}, function() {
$(this).removeClass("hovered");
$(this).find(".hovered-content").fadeOut();
$(this).find(".original-content").fadeIn();
}
);
You can see it here: https://jsfiddle.net/waga7Lu1/3/
The transition effect is a bit clumsy but I'm not really sure what you're after.

How to toggle hover event for another selector on click?

Please take a look at this fiddle
Would anyone please tell me how to enable a hover event for the table cells on clicking the button #edit_mode and disable it on another click?
<button id='enable_mode'>Enable</button>
<table>
<tbody>
<tr><td>Package</td><td>1</td></tr>
<tr><td>Cost</td><td>900</td></tr>
</tbody>
</table>
jQuery:
$('#enable_mode').click(function(){
$(this).text(function(i, text){
return text === "Enable" ? "Enable" : "Disable";
})
var see = $(this).text()
if($(this).text() == "Enable"){
hoverme($('table tbody tr td:nth-child(2)'));
}else{
????
}
});
function hoverme(para) {
$(para).hover(
function() {
$(this ).append('<div id="edit">Edit</div>' );
}, function() {
$( this ).find('#edit').remove();
}
);
}
This might be what you want to achieve: JSFiddle
And here's the corresponding code. HTML and CSS code stays the same, I've just added a few more rows for clarity, and some padding and margin.
JS:
$('#enable_mode').click(function () {
//Check the text of the button
$(this).text(function (i, text) {
if (text === "Enable") {
//Enable hover state with events on mouseenter and mouseleaves
$("tr").hover(function () {
//On mouseenter, change background color (= hover state)
$(this).css("background-color", "#DDD");
}, function () {
//On mouseleave, change background color to default
$(this).css("background-color", "white");
});
} else if (text === "Disable") {
//Remove mouseenter and mouseleave events.
$("tr").unbind('mouseenter mouseleave');
}
//Toggle the text in the button
return text === "Enable" ? "Disable" : "Enable";
});
});
You can modify this code to do practically anything on hover, including appending things (like you wanted to do).
I have modified your code little bit to achieve your what DEMO
Code:
var para = $('table tbody tr td:nth-child(2)');
$('#enable_mode').click(function()
{
var that = $(this);
if($(this).text() == "Enable")
{
para.bind('mouseover', mouseOver).bind('mouseout', mouseOut);
that.text("Disable");
}
else
{
para.unbind('mouseover mouseout');
that.text("Enable");
}
});
function mouseOver() {
$(this).append('<div id="edit">Edit</div>' );
}
function mouseOut() {
para.find('#edit').remove();
}

On hover and on click function / Jquery

I posted a question few hours back but my example was not perfect to understand.
So here it goes.
I have two big boxes. On hover each of the big red box, the small black box should change it's bg color.When you click on each big box then the small box color should change as well.On mouse enter and out it's working fine. But onclick it's not working. I tried with bind/unbind but didn't work.
Jquery:
$('.libg').click(function () {
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
Jsfiddle is http://jsfiddle.net/squidraj/kdZ8J/2/
Please advice. Thanks.
You have two conflicting lines of code:
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
The first line will remove the class, and the second will add the class right back to the element.
http://jsfiddle.net/kdZ8J/4/
$('.libg').click(function () {
var current = $(this).find('.imagebg');
var all = $('.imagebg');
var index = all.index(current);
$('.imagebg').each(function(i) {
if(i != index) {
$(all[i]).removeClass('active');
}
});
if(current.hasClass('active')) {
current.removeClass('active');
} else {
current.addClass('active');
}
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
I would check each box separately. So I'm going to modify your html code a bit along with some jquery code. http://jsfiddle.net/kdZ8J/15/
Html code:
<ul>
<li class="libg1" id="1">
<div class="imagebg1" id="1a"></div>
</li>
<li class="libg2" id="2">
<div class="imagebg2" id="2a"></div>
</li>
</ul>
Handle click events:
$('#1').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#1a').addClass('active');
//remove the click and active class
$('#2').data('clicked', false);
$('#2a').removeClass('active');
})
$('#2').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#2a').addClass('active');
//remove the click and active class
$('#1').data('clicked', false);
$('#1a').removeClass('active');
})
First Rectugular Hovering code:
$('.libg1').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#1a').removeClass('active');
}
else{
$('#1a').addClass('active');
}
}
else{
$('#1a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#1a').addClass('active');
}
else{
$('#1a').removeClass('active');
}
});
Second Rectangular Hoving code:
$('.libg2').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#2a').removeClass('active');
}
else{
$('#2a').addClass('active');
}
}
else{
$('#2a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#2a').addClass('active');
}
else{
$('#2a').removeClass('active');
}
});

Categories

Resources