With jQuery hover how do you check if you've just hovered on the same element again? Say I have two boxes and hover on box 1, then left, then come back and hover on that same box. I'd like to store the value of the initial hovered element (box 1) and then compare if it's the same when hovering back.
Thanks!!
Try something like below,
var lastHovered = '';
$('#box1').hover(function () {
if (lastHovered == 'box1') {
alert('You have hovered on this already');
}
lastHovered = 'box1';
//Your stuff
}, function () {
//mouse out stuff
});
$('#box2').hover(function () {
if (lastHovered == 'box2') {
alert('You have hovered on this already');
}
lastHovered = 'box2';
//Your stuff
}, function () {
//mouse out stuff
});
Note: I have used 2 functions assuming that box1 hover and box2 hover has totally different functionalities... If not you can have it inside same function and use this.id to group them.. see below.
var lastHovered = '';
$('#box1, #box2').hover(function () {
if (lastHovered == this.id) { //<-- used this.id instead of hard-coded value
alert('You have hovered on ' + this.id + ' already');
}
lastHovered = this.id; //<-- used this.id instead of hard-coded value
//Your stuff
}, function () {
//mouse out stuff
});
Use .data() http://api.jquery.com/data/ so on first hover in the callback do something like
if (!$(this).data('var')) {
$(this).data('var','value');
} else {
console.log($(this).data('var'));
};
var lastHovered = null;
$('#selector1,#selector2,#selector3').hover(function (evt) {
if(lastHovered && lastHovered === $(this).attr("id")){
//code for 're-hovering'
}else{
//code for 'new hover'
}
}, function (evt) {
//mouse out stuff
lastHovered = $(this).attr("id");
});
Related
I have a fiddle here: https://jsfiddle.net/419r62t8/1/
View.prototype.render = function (viewCmd, parameter) {
var that = this;
var viewCommands = {
showEntries: function () {
that.$todoList.innerHTML = that.template.show(parameter);
},
removeItem: function () {
that._removeItem(parameter);
},
updateElementCount: function () {
that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
},
contentBlockVisibility: function () {
that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
},
setFilter: function () {
that._setFilter(parameter);
},
clearNewTodo: function () {
that.$newTodo.value = '';
},
editItem: function () {
that._editItem(parameter.id, parameter.title);
},
editItemDone: function () {
that._editItemDone(parameter.id, parameter.title);
}
};
viewCommands[viewCmd]();
};
View.prototype._itemId = function (element) {
var li = $parent(element, 'li');
return parseInt(li.dataset.id, 10);
};
View.prototype._bindItemEditDone = function (handler) {
var that = this;
$live('#todo-list li .edit', 'blur', function () {
if (!this.dataset.iscanceled) {
handler({
id: that._itemId(this),
title: this.value
});
}
});
$live('#todo-list li .edit', 'keypress', function (event) {
if (event.keyCode === that.ENTER_KEY) {
// Remove the cursor from the input when you hit enter just like if it
// were a real form
this.blur();
}
});
};
View.prototype._bindItemEditCancel = function (handler) {
var that = this;
$live('#todo-list li .edit', 'keyup', function (event) {
if (event.keyCode === that.ESCAPE_KEY) {
this.dataset.iscanceled = true;
this.blur();
handler({id: that._itemId(this)});
}
});
};
View.prototype.bind = function (event, handler) {
var that = this;
if (event === 'newTodo') {
$on(that.$newTodo, 'change', function () {
handler(that.$newTodo.value);
});
} else if (event === 'itemEdit') {
$live('#todo-list li label', 'dblclick', function () {
handler({id: that._itemId(this)});
});
} else if (event === 'itemRemove') {
$live('#todo-list .destroy', 'click', function () {
handler({id: that._itemId(this)});
});
} else if (event === 'itemEditDone') {
that._bindItemEditDone(handler);
} else if (event === 'itemEditCancel') {
that._bindItemEditCancel(handler);
} else if (even === 'itemComplete') {
that._bindItemComplete(handler);
}
};
EDIT: I am thinking I can bind a new function here to add an strike-through to the "completed" items on the todo list. Completing them on single click or by adding a checkbox for completing it.
I've got the CSS but I'm lacking the JS to tie it all together.
I am attempting to create a simple strike through on-click to show when an item has been marked as completed. Any help would be much appreciated.
You're close with the CSS, but the best bet is to replace the checkbox with an image (svg if you can) when it is checked.
text-decoration: line-through will not help here -- this only works with text.
Often the checkbox's label will get the image and the checkbox itself will be hidden (a label can be clicked and perform the same actions as the input/checkbox itself)
Check this Answer out and see if it'll help you along your path:
Pure CSS Checkbox Image replacement
Try adding a jquery event listener to the id of the checkbox. Tell id to toggle the css on click and you should be good to go. Do you know how to achieve that?
I have a function that I want to call in 2 different events but I have a doubt since the function has a filter click attache to it.
I was thinking in doing something like:
$('.tabs1 a', toggleTabsOnKeypress);
$('.tabs1 a', toggleTabsOnClick);
This is the function:
var iconTabs = function () {
tabsSetup();
$('.tabs1 a').not('.footnote').on('click', function() {
var $this = $(this); // this
var $anchorsButThis = $('.tabs1 a').not($(this)); // all <a> tags but this
var $active = $(this).find('img.img-active').is(':visible'); // return true if the img with img-active class is visible
var $inactive = $(this).find('img.img-inactive').is(':visible');
var $tabContainer = $(this).parents('.tab-container');
var $tabId = $(this).data('tab');
$eightBoxContent.addClass('opaque-bg');
$tabContainer.find('.icons-tabs a').addClass('inactive');
$(this).removeClass('inactive');
$tabContainer.find('.js-hide-containers .icons-container').hide();
$tabContainer.find('.js-hide-containers .icons-container[data-tab="'+$tabId+'"]').show();
$anchorsButThis.each(function() { // loop through other <a>
$(this).removeClass('selected-shown'); // remove selected-shown
$(this).find('img.img-active').show(); // show active image
$(this).find('img.img-inactive').hide(); // hide inactive image
});
if(!!$active) { // if active image is visible
$(this).find('img.img-active').hide(); // hide active image
$(this).find('img.img-inactive').show(); // show inactive image
}
if(!!$inactive) { // if inactive image is visible
$(this).find('img.img-active').show(); // show active image
$(this).find('img.img-inactive').hide(); // hide active image
$eightBoxContent.removeClass('opaque-bg');
$('.js-hide-containers .icons-container').hide();
}
$(this).toggleClass('selected-shown'); // toggle selected-shown class
}).filter('.selected-shown').click();
};
So, as you see, there is click event at the end of the function.
And I need that function working exactly the same even if you click or keypress the enter key.
Something like:
var toggleTabsOnKeypress = function() {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
// repeat the whole iconTabs function
};
};
Any suggestions?
You can use multiple events with on() and check the event type if needed:
Simple example:
$('div').on('click mouseenter', handler).click();
function handler(e) {
if (e.type === 'mouseenter') {
console.log('Hovering')
} else if (e.type === 'click') {
console.log('I was clicked')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px">
hover me or click me
</div>
On a checkbox change event, one of a javascript bind the toggle action.
Later on(in a different script) I want to change toggle action based on a condition.
Ex.
script 1:
$(document).ready(function () {
var shipFields = $('.address1 input');
$("input[name = 'same_as_bill']").on("change", function (evt) {
toggleFields(shipFields, !$(this).is(":checked"));
});
function toggleFields(fields, show) {
var inputFields = $("li", fields).not(".sameas, .triggerWrap");
inputFields.toggle(show);
}
}
Script 2:
$(document).ready(function () {
$('li.sameas input').click(function (sender) {
var target = $(sender.target);
var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();
// determine data method based on country selected
if (selectedCountryValue === "xxx") {
ShowAddress(true, target);
} else {
ShowAddress(false, target);
}
});
function kleberShowAddress(show, target) {
if (show) {
$('li.address).hide();
} else {
$('li.address).show();
}
}
});
Issue I have here is, my site load the script 1 first and then the script 2. So by the time script 2 performs the action, toggle action is queued and will trigger that after the changes from script 2, that will revert the changes which I want.
Is there a way to remove the action in the queue? or stop happening first request. I do not want to use .unbind() which will stop triggering script 1 function. I just want to stop the action when ever it meets the condition in script 2.
Please note: above functions are trimmed to show less codes.
add var isActive = true; and use it to check in first script.
In script 2, you can call isActive = false any time you want to disable the first script's function or isActive = true for re-enable them.
Your code will look like:
//script1
var isActive = true;
$(document).ready(function() {
var shipFields = $('.address1 input');
$("input[name = 'same_as_bill']").on("change", function(evt) {
if (isActive) {
toggleFields(shipFields, !$(this).is(":checked"));
}
});
function toggleFields(fields, show) {
if (isActive) {
var inputFields = $("li", fields).not(".sameas, .triggerWrap");
inputFields.toggle(show);
}
}
});
//script2
$(document).ready(function() {
isActive = false;
$('li.sameas input').click(function(sender) {
var target = $(sender.target);
var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();
// determine data method based on country selected
if (selectedCountryValue === "xxx") {
ShowAddress(true, target);
} else {
ShowAddress(false, target);
}
});
function kleberShowAddress(show, target) {
if (show) {
$('li.address').hide();
} else {
$('li.address').show();
}
}
});
I'm using this awesome bouncy filter from Codyhouse but i can't for the life of me figure out how to make it run automatically i.e flip on its own and still accept user click events. The jsfiddle...Thanks.
jQuery(document).ready(function($) {
//wrap each one of your filter in a .cd-gallery-container
bouncy_filter($('.cd-gallery-container'));
function bouncy_filter($container) {
$container.each(function() {
var $this = $(this);
var filter_list_container = $this.children('.cd-filter'),
filter_values = filter_list_container.find('li:not(.placeholder) a'),
filter_list_placeholder = filter_list_container.find('.placeholder a'),
filter_list_placeholder_text = filter_list_placeholder.text(),
filter_list_placeholder_default_value = 'Select',
gallery_item_wrapper = $this.children('.cd-gallery').find('.cd-item-wrapper');
//store gallery items
var gallery_elements = {};
filter_values.each(function() {
var filter_type = $(this).data('type');
gallery_elements[filter_type] = gallery_item_wrapper.find('li[data-type="' + filter_type + '"]');
});
//detect click event
filter_list_container.on('click', function(event) {
event.preventDefault();
//detect which filter item was selected
var selected_filter = $(event.target).data('type');
//check if user has clicked the placeholder item (for mobile version)
if ($(event.target).is(filter_list_placeholder) || $(event.target).is(filter_list_container)) {
(filter_list_placeholder_default_value == filter_list_placeholder.text()) ? filter_list_placeholder.text(filter_list_placeholder_text): filter_list_placeholder.text(filter_list_placeholder_default_value);
filter_list_container.toggleClass('is-open');
//check if user has clicked a filter already selected
} else if (filter_list_placeholder.data('type') == selected_filter) {
filter_list_placeholder.text($(event.target).text());
filter_list_container.removeClass('is-open');
} else {
//close the dropdown (mobile version) and change placeholder text/data-type value
filter_list_container.removeClass('is-open');
filter_list_placeholder.text($(event.target).text()).data('type', selected_filter);
filter_list_placeholder_text = $(event.target).text();
//add class selected to the selected filter item
filter_values.removeClass('selected');
$(event.target).addClass('selected');
//give higher z-index to the gallery items selected by the filter
show_selected_items(gallery_elements[selected_filter]);
//rotate each item-wrapper of the gallery
//at the end of the animation hide the not-selected items in the gallery amd rotate back the item-wrappers
// fallback added for IE9
var is_explorer_9 = navigator.userAgent.indexOf('MSIE 9') > -1;
if (is_explorer_9) {
hide_not_selected_items(gallery_elements, selected_filter);
gallery_item_wrapper.removeClass('is-switched');
} else {
gallery_item_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
hide_not_selected_items(gallery_elements, selected_filter);
gallery_item_wrapper.removeClass('is-switched');
});
}
}
});
});
}
});
function show_selected_items(selected_elements) {
selected_elements.addClass('is-selected');
}
function hide_not_selected_items(gallery_containers, filter) {
$.each(gallery_containers, function(key, value) {
if (key != filter) {
$(this).removeClass('is-visible is-selected').addClass('is-hidden');
} else {
$(this).addClass('is-visible').removeClass('is-hidden is-selected');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm assuming by "make it run automatically" you're talking about triggering the content-selection animation programatically, rather than requiring a user click. One possible solution is to assign an id to the selection elements, and then register the click handler directly to those elements, rather than the parent filter_list_container. Then, you can use jQuery's trigger() method to simulate a click on the appropriate element.
Assign an id in the html like this:
<a id="green" href="#0">Green</a>
Then register the click handler like this:
$("#red, #green, #blue").on('click', function(event){ ... }
...and trigger like this:
$("#green").trigger("click");
Here's a JSfiddle with an example.
I have create custom toogle script to show/hide content.
Currently when you click first and then second text, icon mechanism working perfect. but when you click first text and again click first icon mechanism not working.
My JS Code:
$(document).ready(function() {
$('.togglelink').on('click', function(e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").hide();
$("#where-slide-up").show();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").hide();
$("#inspiration-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").hide();
$("#need-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
});
My Fiddle: Sample
Any ideas or suggestions? Thanks.
Here you go:
You just have to change from show/hide to toggle. Fiddle
$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").toggle();
$("#where-slide-up").toggle();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").toggle();
$("#inspiration-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").toggle();
$("#need-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');