Jquery

[Spunky]

Hello, I recently starting working with jquery and almost instantly found a use for the very basic stuff I learned. Only then I realized it needed to be slightly more complicated.Here is the webpage that is using the jquery and here is the code:

$(document).ready(function(){$("p#firstPanel").hide();$("p#secondPanel").hide();$("p#thirdPanel").hide();$("h4#thirdTitle").css("border-bottom","2px solid #000");	$("h4#firstTitle").click(function(){	$("p#firstPanel").slideToggle("slow");  });$("h4#secondTitle").click(function(){	$("p#secondPanel").slideToggle("slow");  });$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	if(("p#thirdPanel").hide()) {		alert("Works");		$("h4#thirdTitle").css("border-bottom","2px");	}  });});

Everything works superbly. Notice on the webpage everything seems to work fine as you open up each "panel". The problem I run into is when I close them: particularly the third one. The border below "Tower Siege" goes away. I added an if statement to try to counteract this, but I can't get it to work. Any assistance please? :)Also at some point the hover effect also stopped working. I'm guessing it is because I am using jquery to mess with the css?

#downloadsText h4:hover {	background-color: #9CB7E;	cursor: pointer;}

[jeffman]

You left out the $ in this line: if(("p#thirdPanel").hide()) {

[jeffman]

You only have 5 characters in your color value: #9CB7EFWIW, your Firefox error console reveals the color problem, and provides a very strong hint to the $ problem. (The machine I'm working on doesn't have FF4 yet, so I'm not sure what the Web Console says.

[Spunky]

You left out the $ in this line: if(("p#thirdPanel").hide()) {

When I had tried putting that in at some point it screwed up the entire code. Tried doing it again, and yea, the alert showed up but the rest of the code when you click that panel isnt working. It just makes the border go away without opening it.I tried moving the if statement outside of that function, and still no luck, the if statement works but after I click ok on the alert, the border, again, disappears.I didnt upload any of this so you wont be able to see it in action, just tested it locally, but, that is what is occurring.

[Spunky]

You only have 5 characters in your color value: #9CB7EFWIW, your Firefox error console reveals the color problem, and provides a very strong hint to the $ problem. (The machine I'm working on doesn't have FF4 yet, so I'm not sure what the Web Console says.

Oops, my bad, thats what I get when I copy n paste sometimes. I couldnt find my error console. I use google chrome.

[jeffman]

Try changing this line: $("h4#thirdTitle").css("border-bottom","2px");to this: $("h4#thirdTitle").css("border-bottom","2px solid #000");EDIT. To clarify, this line : $("h4#thirdTitle").css("border-bottom","0px"); wipes out the entire border-bottom rule, not just the width. A border will default to black if there is no color rule, but the style will not default to solid. It must be specified.

[Spunky]

Try changing this line: $("h4#thirdTitle").css("border-bottom","2px");to this: $("h4#thirdTitle").css("border-bottom","2px solid #000");EDIT. To clarify, this line : $("h4#thirdTitle").css("border-bottom","0px"); wipes out the entire border-bottom rule, not just the width. A border will default to black if there is no color rule, but the style will not default to solid. It must be specified.

Ok, we are definetely getting closer. And thank you for clarifying about the wiping of the rule. Still learning exactly how this stuff works.Now the issue is the third panel wont open unless I like, double click it. And while it is open the border is on h4 again. And then when I click it to close it, it doesn't do it slowly, just disappears. Unless instead of double clicking it triple click it, then it opens slowly and instantly closes slowly. So something is a bit off... But on the bright side the bottom line is there like it is suppose to be. I went ahead and uploaded it this time so you can get a better feel for what its doing wrong.Here is the site again.Here is the jquery:

$(document).ready(function(){$("p#firstPanel").hide();$("p#secondPanel").hide();$("p#thirdPanel").hide();$("h4#thirdTitle").css("border-bottom","2px solid #000");	$("h4#firstTitle").click(function(){	$("p#firstPanel").slideToggle("slow");  });$("h4#secondTitle").click(function(){	$("p#secondPanel").slideToggle("slow");  });$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	if($("p#thirdPanel").hide()) {		$("h4#thirdTitle").css("border-bottom","2px solid #000");	}  });});

[Spunky]

If I put the if statement separately like

$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");  });if($("p#thirdPanel").hide()) {		$("h4#thirdTitle").css("border-bottom","2px solid #000");	}

Should it still work? Or is it set up wrong? The if statement seems to be screwing up the other code within the function. Trying to have it taken out and put by itself, but, its not even registering the if statement exists. When it's in the function at least it recognizes the if statement..just the other stuff doesnt work.

[thescientist]

I think the issue is using a method that doesn't return anything within the an if/else statement. Why not just check for the property value instead?

var thirdpanel = $("p#thirdPanel");  //optional implementation of setting the reference to a "cleaner" variable nameif(thirdpanel.is(":hidden")){  //do stuff};

http://api.jquery.com/is/http://api.jquery.com/category/selectors/

[Spunky]

I think the issue is using a method that doesn't return anything within the an if/else statement. Why not just check for the property value instead?

var thirdpanel = $("p#thirdPanel");  //optional implementation of setting the reference to a "cleaner" variable nameif(thirdpanel.is(":hidden")){  //do stuff};

Ok, tried doing that and it didn't work either. Thank you for showing a different approach though, and for the reference links. As I had stated before I just started using jquery and I found one thing I liked and was easy to use and implemented it. There was just one small issue because of the way I designed the elements.Are you sure that this method will work with the way that it is being hidden? I looked at those websites you linked and it seems the time that checking if hidden is used is when you literally tell the thing its hidden, not when it's toggled to be hidden..if that makes sense what I just said haha.Anyone know if there is an error console thingy for google chrome?

[thescientist]

yes. in chrome go to view->developer->javascript console.hmm, perhaps you just need to check for it's height, as it looks like slideToggle just collapses it, rather than hiding it. that or maybe it's visbility property. Either way, there's gotta be one testable attribute to determine the elements state.

[Spunky]

yes. in chrome go to view->developer->javascript console.hmm, perhaps you just need to check for it's height, as it looks like slideToggle just collapses it, rather than hiding it. that or maybe it's visbility property. Either way, there's gotta be one testable attribute to determine the elements state.

Well before I was using .hide() because .hide() and .show are the alternative to .slideToggle. You can make it so you can either hide or show the element or both. But I guess that wasn't working either huh. Hmm. So, I guess my next mission is to figure out a way to find its state. Ive tried using :visible in a similar way we used :hidden but it didnt work either.

[Spunky]

Ok, so I have an idea I am going to try to implement but I think it's a very cheap way to do it if it will even work. There's probably a much cleaner way.What I was thinking was maybe in the CSS do p#thirdPanel {display: none); and when it is .click have the jquery change the display to block or something. Then THAT can be my element attribute I use in the if statement. If p#thirdPanel display: none then h4#thirdTitle bottom-border: 0px;. else if p#thirdPanel display: block then bottom-border: 2px solid #000; ..... Or something along those lines. Im going to test it out and see what I come up with when I get the chance. Let me know if this doesn't seem practical. Ive never been very good at the logical side of programming....unfortunately. And if someone has a better way to accomplish my task that would be great.

[thescientist]

perhaps slideToggle is only changing the height of the element, as opposed to its display property?

[Spunky]

perhaps slideToggle is only changing the height of the element, as opposed to its display property?

Maybe. Well I wasnt thinking it was changing the display property, I was just going to manually change it to test it out, haha. But I could maybe try using height if display doesnt work; which it probably wont cuz I was thinking more into it and Im pretty sure theres going to be some flaws. Using the height property would be as simple as just saying if p#thirdPanel's height > than 0 then change the border...Im hoping anyways, haha. I'll need to do a little research how to do this.

[Spunky]

The jQuery slide methods gradually change the height for selected elements.

Ok, so according to where I learned about the .slideToggle, yes, it is the height property that is being changed. I decided to try this method instead of the display that I was thinking because it seemed more practical. Here is my code and it doesnt work, but that could simply be because I am a little rusty with if statements:

$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");  });if($("p#thirdPanel").height<1) {		$("h4#thirdTitle").css("border-bottom","2px solid #000");	};});

I tried it with the if statement inside the function as well as outside. Personally I think it belongs outside, but, I dont know.

[thescientist]

http://api.jquery.com/height/

if($('p#thirdPanel").height() < 1){  ...};

you can always verify for yourself by alerting the value or logging it to the console, as opposed to relying on assumptions. That way if it isn't working, you'll at least know what's coming back instead. i.e.

alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());if($('p#thirdPanel").height() < 1){  ...};

[Spunky]

Ok, I am thoroughly confused. When p#thirdPanel is closed the height is 18 and when it is open it is 1.I cant even get the if statement to work. I've tried putting it inside the function and outside. Neither has any luck.

$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());	if($("p#thirdPanel").height() = 18) {		alert('If working');		$("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });if($("p#thirdPanel").height() = 18) {		alert('If working');		$("h4#thirdTitle").css("border-bottom","2px solid #000");	};

I put the If statement in both places up there just to show the two positions I have tried it. I put the alert in to see if its even being triggered. Also, I tried to make it height() = 18 because thats what it said it is when it is closed. Still nothing.lol and I guess the alert really does squat because if it triggered then...well..it would work, haha

[thescientist]

well, first thing to mention is that you are using the assignment operator (=), not the equality operator (== or ===).is it possible to get a link to this page or can you upload it somewhere, if it isn't too big to post here? Have you mentioned if you are checking/getting any errors?

[Spunky]

well, first thing to mention is that you are using the assignment operator (=), not the equality operator (== or ===).is it possible to get a link to this page or can you upload it somewhere, if it isn't too big to post here? Have you mentioned if you are checking/getting any errors?

It works.

$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());	if($("p#thirdPanel").height() == 18) {		alert('Yay');		$("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });

I don't use javascript much and I'm a terrible programmer so I often make these silly mistakes. Before I started messing with the .height() operator I wasn't getting any errors or warnings so I guess I kinda forgot about it, haha. But then even when I checked what the errors were when I was using = instead of ==, I was getting quite odd errors.Uncaught ReferenceError: Invalid left-hand side in assignment(anonymous function)downloads.js:22d.event.handlejquery.js:16d.event.add.m.k.handle.mYea I dont know what that means. lol.But at any rate, it works beautifully now. Thank you so much. Eventually I'll have worked with javascript enough to not make these silly mistakes.However, if you could help me understand this that would be great. I still don't understand why when it is closed the height is 18 and when it is open the height is 1. Knowing the height using your suggestion really helped me to use this to make the code fit it, but I dont understand why. I could just ignore this and be like "whatever it works" like some people might, but, thats not going to help me grow and use this technique again in the future the proper way.I uploaded it with the alert still for you to see: view webpage here

[thescientist]

the error was because you were trying to set the height() to 18, (height() = 18) but if you wanted to manually set it, you would have wanted to write it .height(18). hence the left-hand assignment error, which created a cascading effect in other scripts dependent on that code. as for the misleading height values, it appears it's the way jquery cache's the height value when using hidehttp://api.jquery.com/hide/

With no parameters, the .hide() method is the simplest way to hide an element:

$('.target').hide();

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

edit: good site so far, look's like you're off to a good start. One thing I noticed is that you're using the same ID (rightLinksTitle) multiple times. You should either change that to a class or use different names. alone without javascript it's not that big of a deal other than breaking validation rules, but it will cause problems with scripts if you try and access an ID that's used more than once on the page.

[Spunky]

Ok. Scratch the beautifully part. After viewing it without the alerts, it is plain to see that when I click on it to close the panel, the line appears under h4#thirdTitle. I want it to be there after it closes, not while it is closes. Ugh, Im not even sure if there is a logical way to achieve this..

[Spunky]

edit: good site so far, look's like you're off to a good start. One thing I noticed is that you're using the same ID (rightLinksTitle) multiple times. You should either change that to a class or use different names. alone without javascript it's not that big of a deal other than breaking validation rules, but it will cause problems with scripts if you try and access an ID that's used more than once on the page.

Thank you for commenting! Yea, I think I fixed that ID problem on the other pages because I noticed it and was like ugh how did I manage that. I just dont think I changed it yet for downloads.html, but that page is also not accessible from the other pages yet (note the downloads link on the right of downloads.html is none existant on any other page). But Ill make sure I get it fixed if its not already. Im usually a stickler about validation and even have one of my main websites fully validated in strict mode.

[thescientist]

Ok. Scratch the beautifully part. After viewing it without the alerts, it is plain to see that when I click on it to close the panel, the line appears under h4#thirdTitle. I want it to be there after it closes, not while it is closes. Ugh, Im not even sure if there is a logical way to achieve this..

then you would want to modify slideToggle to use what is known as a callback. It sounds/looks tricky but isn't. Basically, when a function executes, if the method (in this case slideToggle) is written to do so, it can take an argument that if it's a function, will be exectued after the original function is complete. So, let's break that down.we currently have:

$("h4#thirdTitle").click(function(){	$("p#thirdPanel").slideToggle("slow");	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());	if($("p#thirdPanel").height() == 18) {		alert('Yay');		$("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });

in this case, "slow" is an argument being passed to slideToggle telling it how quickly to animate. Now, if we look at the documentation, we can see that this method (slideToggle) can take in a callback function to be executed when the slide animation is completed.http://api.jquery.com/slideToggle/

$('#clickme').click(function() {  $('#book').slideToggle('slow', function() {	// Animation complete.  });});

so, if we follow their example, this might be what you were looking for.

$("h4#thirdTitle").click(function(){  $("p#thirdPanel").slideToggle("slow", function(){	alert('inside slideToggle callback function');	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());	if($("p#thirdPanel").height() == 18) {	  alert('Yay');	  $("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });});

and that's pretty much all there is to it. now everything defined within that callback function will happen after the "slow" animation. Callbacks are extremely useful and widely used in javascript.

[Spunky]

ok, this call back things seems fairly simple. I will need to make sure I keep a note of this because I am sure it will come in handy again sometime.I did need to change the code a little however, just when the CSS is changed because it was a little out of whack. The border on the bottom of p#thirdPanel wouldn't exist until the .slideToggle() was complete...exactly what the purpose of the callback function is that we just implemeneted. So, I took that bit of code out and made the CSS for that element pernamently have a border. Problem solved.Went from:

$("h4#thirdTitle").click(function(){  $("p#thirdPanel").slideToggle("slow", function(){	$("p#thirdPanel").css("border-bottom","2px solid #000");	$("h4#thirdTitle").css("border-bottom","0px");	if($("p#thirdPanel").height() == 18) {	  $("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });});

to:

$("h4#thirdTitle").click(function(){  $("h4#thirdTitle").css("border-bottom","0px");  $("p#thirdPanel").slideToggle("slow", function(){	if($("p#thirdPanel").height() == 18) {	  $("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });});

I also took the line that took out the border for h4#thirdTitle and placed it before the callback because I didn't want it to take out the border after it was done opening; I wanted it removed soon as it was clicked. Wanted a more smooth transition. Which brings another issue.. The height. Now, it always equals 18 whether the panel is open or closed. I put alerts in everywhere. The if is still working..it just always equals 18 now..

$("h4#thirdTitle").click(function(){alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());  $("h4#thirdTitle").css("border-bottom","0px");  $("p#thirdPanel").slideToggle("slow", function(){  alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());	if($("p#thirdPanel").height() == 18) {	  alert('p#thirdPanel height is: ' + $('p#thirdPanel').height());	  $("h4#thirdTitle").css("border-bottom","2px solid #000");	};  });});

So, I am still confused where slideToggle() gets the height from. You had posted a link to http://api.jquery.com/hide/ but it didn't really tell me anything about the height except:

When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

But according to my alerts, the height is never reaching 0. I even have an alert outside of all the functions that way it will tell me the height before I even click anything. Should I change the if to mess with the display property? At any rate Im still not understanding where 18 is coming from and why its 18 even when its hiding. But I will approach this differently if I have to.We're practically back to square 1...ugh this simple implementation of fun code is turning out to be a disaster lol. But this is good..programming is my weak point..my expertise is XHTML and CSS....I checked for javascript errors, knew I wouldn't get any and sure enough none, but just stating it to eliminate that.Here is another link to the site. I uploaded the new code so, you can see more clearly the issue.