Filtering Content using jQuery - javascript

I'm attempting to create a filterable photo gallery using jQuery and multiple classes. I have some code set up, but it doesn't seem to work. Can anybody give me any insight on how to fix this function?
$(document).ready(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images'){
$('#photorow1 li').show().removeClass('hidden');
}
else {
$('#photorow1 li').filter(sortName).show().removeClass('hidden')
.end().not(sortName).hide().addClass('hidden');
}
e.preventDefault();
});
});
Any help would be greatly appreciated!!
*updated code

The problem is you're doing a return false before any work is being done, move that to the end of your click handler :)
Overall you can clean it up a bit, something like this should do:
$(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images') {
$('#photorow1 li').show();
} else {
$('#photorow1 li').filter(filterVal).show().removeClass('hidden')
.end().not(filterVal).hide().addClass('hidden');
}
e.preventDefault();
});
});
I recommend that you just add display: none; to the .hidden CSS rules (if you need that class for something else), otherwise just .hide()/.show() works.

For starters, return false; should be at the end of the function, because any code that comes after it in that function will be ignored.
Plus, you don't need that and e.preventDefault(); in the same function, they overlap a bit. You can read more about their similarities here. Pick one.

Related

Using localStorage() to save a "closed" state on modal so it doesn't show for that user again

I have a pop-over modal that I am loading on my page on load, I would like to make it once it's closed to not show up again for that user. I've done similar things with localStorage(); but for some reason can't figure out the syntax to make this work.
I tried a solution where it sets a class, but on refresh it will reload the original element, so now I am trying this idea where I change the state of of the modal to "visited". Any ideas what I could be missing to get this to work in the same way I'm hoping?
localStorage function:
$(function() {
if (localStorage) {
if (!localStorage.getItem('visited')) {
$('.projects-takeover').show();
}
} else {
$('.projects-takeover').show();
}
$('.projects-close').click(function() {
$('.projects-takeover').fadeOut();
});
localStorage.setItem('visited', true);
return false;
});
Here is a jsfiddle with the code implemented as well, thanks for the help!
You javascript code is correct. Good thing you added a jsfiddle as the problem becomes very easy to identify - the modal's style is set in such a way that it is always visible. Simply change the display property to nonŠµ in the .projects-takeover class and it should work. Check out the updated fiddle
Try this ->
$(function() {
var pt = $('.projects-takeover'); //i just hate repeating myself.
if (localStorage) {
if (!localStorage.getItem('visited')) {
pt.show();
} else {
pt.hide(); //this bit was missing
}
} else {
pt.show();
}
$('.projects-close').click(function() {
pt.fadeOut();
});
localStorage.setItem('visited', true);
return false;
});

jQuery prop("disabled") is not functioning

I know this question has been asked and answered many times, but none of the solutions work for this example, even though I know they should. Perhaps other pairs of eyes will help resolve this.
I have placed alerts before and after the code that sets the disabled property, which is indeed set correctly, but the element remains disabled.
I have excerpted the code necessary to reproduce this issue: jsfiddle
Here's some code just to satisfy the SO rule.
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.prop("disabled", ($(this).val() == "Yes" ? false : true));
});
});
Instead of messing with prop("disabled"), do
$dbVendor.selectmenu("enable");
http://jsfiddle.net/r3977gy7/30/
Documentation
http://api.jquerymobile.com/selectmenu/#method-enable
See this solution, please
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.selectmenu($(this).val() === 'Yes' ? 'enable' : 'disable');
});
});
dbVendor.selectmenu(($(this).val() == "Yes" ? "enable" : "disable"))
You are using jquery mobile wich adds "ui-disabled" class to the element and his parent
$(function () {
$("#uses-db").on("change", function (event) {
event.preventDefault();
if($(this).val() == "Yes"){
$("#database-vendor").parent().removeClass("ui-disabled");
$("#database-vendor").removeClass("ui-disabled");
$("#database-vendor").removeAttr("disabled");//edited
}
else{
$("#database-vendor").parent().addClass("ui-disabled");
$("#database-vendor").addClass("ui-disabled")
$("#database-vendor").addAttr("disabled");//edited
}
});
});
actually working code jsffidle
#database-vendor has been wrapped, by jQuery Mobile, with a div and a pile of JavaScript. Changing the disabled property of the select isn't causing jQuery Mobile to respond and change its div.
Removing jQuery Mobile will make the code work.
If you want it to work with jQuery Mobile, then you'll need to look at the jQuery Mobile API to figure out how to enable its pseudo-select elements.

toggling booleans in javascript

I am pretty new in javascript and there seems to be something I just don't get about booleans. I am trying to toggle a boolean whenever someone clicks on an element on my webpage. The code looks like this:
$(document).ready(function() {
var toggled;
$("#button").click(function(){
toggled=!toggled;
});
if(toggled){
$(".offcanvas").css("margin-left","0%");
}
else{
$(".offcanvas").css("margin-left","-40%");
}
});
If someone could explain me what I'm doing wrong I would greatly appreciate your help.
Thank you in advance
Try this ...
$(document).ready(function() {
var toggled = false;
$("#button").click(function(){
toggled=!toggled;
if(toggled){
$(".offcanvas").css("margin-left","0%");
}
else{
$(".offcanvas").css("margin-left","-40%");
}
});
});
Moving the if structure inside the click event will ensure it is checked after the toggle is changed. Setting a default value just feels right to me, although with truthy/falsy you might be good there.

Toggle/Show one defined DIV with JS

I have a fiddle for you: http://jsfiddle.net/vSs4f/
I want to show the div.sub-menu with a simple click on a.haschildren. If the body loads the div.sub-menu should be closed. If I click a second time on a.haschildren the div.sub-menu should be close.
I have sampled so many things but I think the problems are the lot of DIV's. One idea is in the fiddle.
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
$('div.sub-menu:visible').hide();
$(this).next('div.sub-menu').show();
});
});
I really hope you can help me, thanks!
Try this:-
Fiddle
$(function () {
$("a.haschildren").click(function (e) {
e.preventDefault();
var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle();
$('div.sub-menu:visible').not(subMenu).hide();
});
});
Using .nextUntil to reach a point till the .sub-menu, incase any other siblings come in between this will still work.
Personally there are MANY things I would have changed about the structure of your DOM. I am a strong believer that you should base your javascript structure around a well structured DOM, so the traversal is very easy and intuitive. That being said, I'm going to be slightly daring by submitting my fiddle, in the hope that if nothing else, you can look at it and gain a little insight on how to take advantage of a few DOM quirks to make your javascript a bit more intuitive and elegant.
http://jsfiddle.net/vSs4f/6/
$(function() {
$('#menu > div.item')
.find('a').click(function() {
var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu');
// This chunk can disappear if you're not interested in hiding all of the other sub-menus
$('.sub-menu').filter(function(index) {
if(index != submenu_index)
return true;
}).hide();
}).end()
.find('div:first').after('<div class="trenner"></div>');
});
Try
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle();
$('div.sub-menu:visible').not(item).hide();
});
});
Demo: Fiddle
just use toggle()
$('div.sub-menu').toggle();
Ironically enough, the method you're looking for is .toggle();
http://api.jquery.com/toggle/
try it:
$(function() {
$("div.haschildren").click(function() {
if($(this).next().next('div.sub-menu').is(":hidden")){
$('div.sub-menu:visible').hide();
$(this).next().next('div.sub-menu').show();
}else{
$(this).next().next('div.sub-menu').hide();
}
return false;
});
});

JQuery Hover Code: Adding an If Statement breaks it

I have this code that makes a box with information follow the mouse. It's really simple, just checks the custom attribute "description" in the div that you hover over and puts that in the box. However, I want to make it so if that div also has a certain CSS class, then it would put other information in the box, in addition to the other code still working.
$(document).ready(function(){
$(".hover").mousemove(function(e){
if ("div").hasclass("item"){
alert("div hasclass item");
} else {
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
that's the code I have now. None of the hovers in my page work at all. This is the code that works. It's identical in every way, except no if statement.
$(document).ready(function(){
$(".hover").mousemove(function(e){
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
I've tried time and time again to get this to work, and through my testing, it would seem that simply adding an if statement breaks the entire thing. I have absolutely no idea how to proceed or how to fix it.
The culrpit..
if ("div")
Maybe you were trying
if($("div").something()){
}
if ("div").hasclass("item") {
Should be:
if ( $("div").hasClass("item") ) {
For some more you can also test:
if ( $("div").is(".item") ) {
Read about jQuery .is()

Categories