if/else statement - javascript

I am trying to write an if/else statement that will hide my .thumb <div>s whenever the "about" or "contact" links are clicked. I want all of the .thumb <div>s to slide up.
http://dl.dropbox.com/u/14080718/Final/UITabs15.html
I don't have much experience writing if/else statementsI cant seem to figure out the right syntax any help you can give would be much appreciated.
$(function(){
$('.thumb').hide();
$('.subnav').click(function(){
var $menuelement = $('.thumb').eq($(this).closest("li").index());//find the matching nth element in the menu
if($menuelement.hasClass('active')){//if clicked element is already expanded
$menuelement.removeClass('active').slideUp();//remove the active class and hide it
} else {//otherwise,clicked element is not already expanded...
if ($('.active').length>0) {//...but another element is expanded
$('.active').removeClass('active').slideUp( function(){
$menuelement.addClass('active').slideDown();//add the active class and show it
});
} else {//another element is not expanded
$menuelement.addClass('active').slideDown();//add the active class and show it
}
}
});
});

I can't try this because it's a bit orphaned, but try the following (or at least the following idea). I was confused because your link didn't actually include the code you posted. Try posting a jsfiddle with the code if you're still having problems.
Your ($('.active').length>0) statement doesn't need the >0 part - all no-zero lengths will return true.
$(function(){
$('.thumb').hide();
$('.subnav').click(function(){
var menuelement = $('.thumb').eq($(this).closest("li").index());//find the matching nth element in the menu
$(menuelement).toggleClass('active').slideToggle();
$('.active').not(menuelement).removeClass('active').slideUp();
});
});

Related

.Finding the closes element in jQuery

I have a dropdown menu I'm working on. I've added a hidden icon on each item. Then once the menu generates, I want to go through and find which items have sub-menus and remove the hidden class for those items.
I can't seem to be able to get this code working.
var tags = $("li > ul.sub-menu").each(function(){
$(this).parent("li").closest('i.hidden').removeClass("hidden")
})
This is the html/css
http://pastebin.com/FzTFeYMq
I'm using IE8 so right now I can't get a proper fiddle up.
If I'm understanding correctly, what you're trying to do is unhide the carets for any menu/submenu that has children. The following should accomplish what you're looking for:
var tags = $(".sub-menu").each(function(){
$(this).closest('li').find('a > span > i:first').removeClass("hidden")
})
I tossed up a quick CodePen demonstrating this here: http://codepen.io/P1xt/pen/eZMLrq
In your loop you have to find the first element with a statement like this:
$(this).find('i.hidden:first')

jQuery: Toggle class on one element, remove same from all other

new here and deeply hoping I'm not missing a stupid syntax flaw. I was thinking that my problem is a fairly common one, but somehow nothing has helped so far in my specific case.
There is a simple inline-block list of Image Galleries which are zoomable to fill the parent width. As soon as one is zoomed through click on a child, the others should unzoom by stripping of the class which maximizes them. Nothing more to it.
I achieved the first part via the following jQuery (where the problem is hidden in the for-loop, I think):
$(".zoom").click(function() {
var target = $(this);
target.closest('div.product-item').toggleClass('maximized');
var ot = document.getElementsByClassName('product-item');
for (var i = 0; i < ot.length; i++) {
if (ot[i] !== target) {
ot[i].removeClass('maximized');
}
}
});
So: Some .zoom classed element is clicked, its parent is toggled to maximize and a for loop checks all other elements of the same class as the parent and removes the .maximized class.
The reason the script is constructed with a for-loop and a removeClass is so that the same .zoom elements are able to minimize their parent elements, not only to maximize them.
Im not a javascript professional, but to my knowledge this should work in principle. Am I missing anything here?
This post from a year ago addressed a similar problem but didn't help in my case: jQuery onClick: How to add class to element and remove from all others
You can find a pen to see the script in action here.
$(".zoom").on('click',function() {
var target = $(this);
$('div.product-item').removeClass('maximized');
target.closest('div.product-item').toggleClass('maximized');
});
you can use
if(target.closest('div.product-item').hasClass('maximized')){
$('div.product-item').removeClass('maximized');
}else{
$('div.product-item').removeClass('maximized');
target.closest('div.product-item').addClass('maximized');
}
JSFIDDLE

Cannot select all elements except one

I am trying to select all the elements of a page except one, inside a function:
$('#sidebutton').click(function () {
if (!$('.sidemenu').hasClass("current")) {
prevScrolPos = $(window).scrollTop();
scrollTo = 0;
} else {
scrollTo = prevScrolPos;
}
$('.hidelem').toggleClass("hidden");
$('.sidemenu').toggleClass("current");
$('html,body').scrollTop(scrollTo);
});
It works when I use a simple class selector (.hidelem), but doesn't when I use something a bit more complicated (for example, $("*:not(.sidemenu)").toggleClass("hidden"); or $("*").not(".sidemenu").toggleClass("hidden");); these just lead to a blank window.
Could you tell me what I'm missing here?
JSFiddle: https://jsfiddle.net/et978wjw/5/ (full functionality is missing but I hope you get the idea)
The problem is that you may be skipping .sideMenu with $("body *:not(.sidemenu)"), but you are not skipping its parent DIV. If you hide an ancestor, you hide all its descendants too. You also do not skip any descendants, so the children of .sidemenu are also hidden
So you need to exclude anything that is an ancestor of .sidemenu with :not:(has()), then exclude the sidemenu itself, then exclude any children of sidemenu:
$("#container :not(:has(.sidemenu)):not(.sidemenu):not('.sidemenu *')").toggleClass("hidden");
JSFiddle: https://jsfiddle.net/TrueBlueAussie/et978wjw/8/
You really should direct the hide/show at something more specific though. Perhaps a wrapper div around everything you want hidden? I added one for the demo.
Now having said all that, your selection process is quite complicated. You would be better off simply adding a class to all the things you want to toggle instead and just toggle those (you already have nodisplay on the divs, so I used that for now).
e.g. just this:
$(".nodisplay").toggleClass("hidden");
JSFiddle: https://jsfiddle.net/TrueBlueAussie/et978wjw/9/

What's a good way to show parts of an element but hide the rest?

I was wanting to have a javascript (jQuery) function that removed everything that didn't have the safe class.
The problem is, if the parent element is hidden, it cannot show the 'safe' part of it.
Is there a simple way to get around this? I'd rather not go in and span all of the elements that need removed.
trimmer = function(element){
x = $(element+' *:not(.safe)');
x.hide();
}
trimmer('section');
Fiddle
var element = 'section';
//finds all non `.safe` elements in `section`s and hides them
$(':not(.safe)', element).hide();
//finds all `.safe` elements in `section`s and shows the `section`s
$('.safe', element).parents(element).show();
Horen was right, it is indeed impossible to show parts of a hidden element.
To make only parts of the text disappear, the non-safe content must be labeled for removal.
$(element).contents().each(function() {
if (this.nodeType == 3)
$(this).wrap('<span class="disappear" />');
});
You can read more about this answer here:
How to add spans to all areas of a node that isn't restricted

Jquery problem onclick add class and remove class

first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)
So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("backgroundmenucard");
}
else {
alert ("condition false");
}
});
});
But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:
$(this).removeClass("backgroundmenucard");
does anyone know the answer to this???
Regards,
Andrew
try the following:
$(".menucardmenu").click(function(){
$(".backgroundmenucard").removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
});
Demo: http://jsfiddle.net/r2Sua/
(I remove the if because it's useless in this case)
Remove from all...
$(".menucardmenu").removeClass("backgroundmenucard");
Then add to this
$(function() // shorthand for document ready
{
var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos
$divs.live('click', function() // use .live to bind only 1 event listener
{
// remove the class from all divs
$divs.removeClass(BG_CLASS);
// add the class to this div
$(this).addClass(BG_CLASS);
}
});
});
The if($(this).hasClass("menucardmenu")) check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.
$('.menucardmenu').click(function(){
$('.menucardmenu').removeClass('backgroundmenucard');
$(this).addClass('backgroundmenucard');
});
Another option would be:
$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
This way you don't remove and add the class to the specific (this) element

Categories

Resources