On hover and on click function / Jquery - javascript

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');
}
});

Related

Change (content) text in div element once the class changes on body

I just need small jquery help. So we would like to change the value of text on the left element .. So the number (1) should be changed to number (2) once user scroll to 2nd slide.
The body class changes to once you scroll:
fp-viewing-1
Here video of the website:
https://drive.google.com/file/d/10OcUoyvh1Xr3pWmxqzdR67wI8IlkPsNF/view?usp=sharing
Here is what I tried:
<script>
$(document).ready(function() {
if ($('body').attr("class") == "fp-viewing-1") {
$('#count').addClass('something');
}
});
</script>
Once the class is added I was thinking to change the html value with css..
content: "";
// you can use two Intervals to detect as there is no event for class change in Jquery
$(document).ready(function () {
startProcess();
});
function startProcess() {
var checkExist1 = setInterval(function () {
if ($('body').hasClass("fp-viewing-1")) {
clearInterval(checkExist1);
alert("1 detected")
var checkExist0 = setInterval(function () {
if ($('body').hasClass("fp-viewing-0")) {
clearInterval(checkExist0);
startProcess();
alert("0 detected")
}
}, 100);
}
}, 100);
}

Can I use a condition inside a toggleClass based on the toggle status

I am creating a toggle and need to execute a command based on the toggle status.
When I click .flip1 first time it adds the flipped class to .card1.
I also want it to show an alert "flipped added"
When I click it again it removes the flipped class and I want it to show an alert "flipped removed".
I imagine that the code will look something like this:
$(document).ready(function () {
$('.flip1').click(function () {
$('.card1').toggleClass('flipped');
if ("class added"){
alert("flipped added");
}
if ("class removed"){
alert("flipped removed");
}
});
});
Is there something I can put in the if to know whether the toggle is true or false?
This can be achieved via jQuery's hasClass() method like so:
$(document).ready(function() {
$('.flip1').click(function() {
$('.card1').toggleClass('flipped');
// use hasClass to see if .card1 has .flipped class now applied.
// if true, that indicates it was just added
if ($('.card1').hasClass('flipped')) {
alert("flipped added");
} else {
alert("flipped removed");
}
}
);
});
.flipped {
background:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="card1">
Card1 (yellow if flipped)
</div>
<a href="#" class="flip1">
Flip1
</a>
You can use addClass() and .removeClass() to change class and .hasClass() to check the state.
Here is your code :
$(document).ready(function () {
$('.flip1').on('click', function () {
if ( $('.card1').hasClass('flipped') ) {
$('.card1').removeClass('flipped');
alert("flipped removed");
} else {
$('.card1').addClass('flipped');
alert("flipped added");
}
});
});
$(document).ready(function () {
$('.flip1').on('click', function () {
if ( $('.card1').hasClass('flipped') ) {
$('.card1').removeClass('flipped');
alert("flipped removed");
}
else {
$('.card1').addClass('flipped');
alert("flipped added");
}
});
});

Getting localStorage and adding class to divs

I have a question that is quite confusing.
Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking".
When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".
I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"
JS Fiddle: http://jsfiddle.net/b4KgV/
HTML
1
2
<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>
JS
localStorage.clear();
$(document).on('click', ':checkbox', function () {
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem("marking","yes");
}
else {
$(this).closest("div").removeClass('hilight marked');
}
});
$(".1st").on('click', function() {
$(".second").css('display','none');
$(".second").removeClass('hilight');
$(".first").css('display','block');
});
$(".2nd").on('click', function() {
$(".first").css('display','none');
$(".first").removeClass('hilight');
$(".second").css('display','block');
});
if (localStorage.getItem("marking")) {
$(".marked").closest("div").addClass('hilight');
};
Thx.
Localstorage goes by key:value as you know, I tried to keep them separate.
Try this fiddle
http://jsfiddle.net/b4KgV/11/
$(document).on('click', ':checkbox', function () {
var div = $(this).closest("div").attr("id")
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem(div, true);
} else {
$(this).closest("div").removeClass('hilight marked');
localStorage.setItem(div, false);
}
});
$(".1st").on('click', function () {
console.log("test")
if (localStorage.getItem("firstDiv") == "true") {
$(".first").closest("div").addClass('hilight');
};
$(".second").css('display', 'none');
$(".second").removeClass('hilight');
$(".first").css('display', 'block');
});

hover/click with list of DIVs

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

Toggle show/hidden with jquery

I need to use jquery to toggle two elements to show/hide. I want the button to say "hide text" and change to "show text" when it is clicked and of course I want the text to toggle from show to hide as the button is clicked. I have this to change it one time but I do not know how to change it back or make it toggle.
$(function() {
$('button#1').click(function() {
$('#one').fadeOut();
});
$('button#1').click(function() {
$('button#1').html('Show Text');
});
});
http://jsfiddle.net/fwdzm/1/
Use the toggle callbacks !
$(function() {
var $btn1 = $('button#1').click(function() {
$('#one').toggle('slow', function () {
if ($(this).is(':visible')) {
$btn1.html('Hide Text');
} else {
$btn1.html('Show Text');
}
});
});
});
$('button#1').click(function() {
var $btn = $(this);
$('#one').toggle('slow', function() {
if ($(this).is(':visible')) {
$btn.text('Hide');
} else {
$btn.text('Show Text');
}
});
});
Try something like this
$(function() {
$('button#1').click(function(){
if ($('#one').is(':visible')) {
$('#one').fadeOut();
$(this).html('Show Text');
} else {
$('#one').fadeIn();
$(this).html('Hide Text');
}
});
});
Save the current state in a variable and then based on that variable you either show or hide your elements and change the text on the button.
HTML
<button id="toggleBtn" type="button">Hide Text</button>
<span id="element">Your text is here</span>
JAVASCRIPT
var status = "shown";
function toggleElement() {
if (status == "shown") {
$('#element').hide();
$("#toggleBtn").html('Show Text');
status = "hidden";
} else {
$('#element').show();
$("#toggleBtn").html('Hide Text');
status = "shown";
}
}

Categories

Resources