[cupidvogel]

In my basic HTML page, there is a div with id switcher in the top. It contains three buttons, each with a class button. Their id's are respectively switcher-default, switcher-narrow, switcher-large. In my external style-sheet, I have defined the class hover such that whenever the mouse hovers on an element belonging to that class, the background turns green and the cursor turns to pointer. The selected class renders any text in an element belonging to that class bold. There are two more classes, large, where the text becomes large, and narrow, where the width of the element is constricted. Plus there is this hidden class, which when applied, hides the element. The rest of the page contains some mumbo-jumbo text, all inside a div with id chpt. The plan is this: Whenever the mouse hovers over any button, its background should turn green and cursor should become pointer. Whenever the div switcher will be clicked upon (not on the buttons inside!), the buttons should hide, but only if the text inside the div chpt is normal, i.e. neither of the classes large or narrow had been applied to it. By default, chpt has no class attached to it. Whenever the switcher-default, switcher-narrow or switcher-large buttons will be clicked, the corresponding classes " ", narrow and large will be applied to chpt, the text inside chpt will turn normal (default, when the page loads), narrow or large respectively. Also the class selected will be applied to the clicked button, making the text inside it bold. If the text is in default style (i.e. with no class applied to chpt), then only clicking the switcher (except on the buttons inside it!) will lead to the buttons being hidden, otherwise clicking on the same place won't do anything. Once hidden, the switcher can be restored again by just clicking it (when buttons are hidden, only the headline h3 inside it will be visible). Here is the jQuery I have written to that effect, but it's not working!

$(function() {
$(".button").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });

$(".button").click(function(event) {
$(".button").removeClass("selected");
$(this).addClass("selected");
if (event.target.id == "switcher-default")
$("div#chpt").removeClass();
else if (event.target.id == "switcher-narrow")
$("div#chpt").removeClass().addClass("narrow");
else
$("div#chpt").removeClass().addClass("large");
event.stopPropagation(); });

$("#switcher").click(function() {
if (!((#chpt).hasClass("narrow")) && !((#chpt).hasClass("large")))
$(".button").toggleClass("hidden");
});
});

When the page loads, neither is their backgrounds turning green and cursor is becoming pointer when the mouse hovers over the buttons, not anything is happening when the switcher is clicked upon, be it outside the buttons or inside them. Please help me find the bug (or bugs)! Thank you!

This post has been edited by macosxnerd101: 06 February 2011 - 12:23 PM
Reason for edit:: Title renamed to be more descriptive.

[singularity]

Can you show your CSS, and at the first instant you should not give your classes names like hover and hidden as these are already reserved words.

[cupidvogel]

Yup. I had thought of that, and I have since changes those class-names to non-reserved words (hov and hi), and have made the correspondng changes to my jQuery code too. Still same problem. I am attaching the CSS file. Please go through it. Also I think I have kind of narrowed down the problem to the 3rd part of the jQuery code, i.e. line 15-18. Because when I remove these lines, the code works right (except because these line are not there, nothing is supposed to happen when the div switcher is clicked outside the buttons. However, not that it is working even now with the lines in there!). Though I can't seem to find anything wrong with these lines. Please help!

Attached File(s)

•  my.css (1.05K)
  Number of downloads: 113

[cupidvogel]

Cool! I found the gotcha! It was in line 16- the (#chpt)would be $("#chpt"). Can you believe it! Just that small error rendered the entire code useless! However, I have another issue. Those who have seen the CSS file I have uploaded, please note that in the last line I have used the #switcher .hov selector to highlight the background when the mouse hovers over the button. It works okay now, but when I was trying the code with .hov selector instead, the cursor was turning pointer alright when hovered over the buttons, but the background color wasn't changing. Can anyone explain why?