Jump to content

Expandable definition list


kurt.santo
 Share

Recommended Posts

Want the dd to expand/show when user clicks unto them, but have messed up the function. Where is my error?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Expandable Definition list</title><style>dd	{display:none;}</style><script>domReady(function(){var dt=tag("dt");for(var i=0;i<dt.length;i++){	addEvent(dt[i],"click",function(){		var open=attr(this,"open");		next(this).style.display=open?'none':'block';		attr(this,"open",open ?'':'yes');		});	}});</script></head><body><dl><dt>Issue 1</dt><dd>Text 1</dd><dt>Issue 2</dt><dd>Text 2</dd><dt>Issue 3</dt><dd>Text 3</dd></dl></body></html>

Then I read about closures today (to add even more to my general JavaScript confusion). Is someone able to explain in a a closures for dummies version? This would be great! Also, do you guys use those libraries around? It seems every one uses a complete different JavaScript style and I get quite lost with those...Kurt

Link to comment
Share on other sites

Error: domReady is not definedSource File: definitions.htmlLine: 8
Line: 8Char: 4Error: Object expectedCode:0URL: definitions.html
JavaScript - definitions.htmlInline script threadError:name: ReferenceErrormessage: Statement on line 11: Reference to undefined variable: domReadyBacktrace: Line 11 of inline#1 script in definitions.html domReady((function (){ var dt = tag("dt"); for (var i = 0;i < dt.length;i++) { addEvent(dt, "click", (function (){ var open = attr(this, "open"); (next(this)).style.display = open ? "none" : "block"; attr(this, "open", open ? "" : "yes");})); }}));
Did you not even check your browser's error console?And I have no idea what closures are... investigating. EDIT: Now I do, and realize that I've been using them (unknowingly and at a low level) for a while, but don't think I can teach them to you.
Link to comment
Share on other sites

Did you not even check your browser's error console?And I have no idea what closures are... investigating. EDIT: Now I do, and realize that I've been using them (unknowingly and at a low level) for a while, but don't think I can teach them to you.
Yes, I saw this in the IE error console. But as it does not ring a bell I thought some of you guys might know...Kurt
Link to comment
Share on other sites

This line is not right:domReady(function(){Closures are fairly complex, they deal with defining functions inside of a local scope that eventually goes out of scope, but the function is still defined in the global scope (even though the function might have previously-local variables that it relies upon). When the function gets executed an execution context gets created with the local variables that the function needs to run. This page describes the concepts:http://www.jibbering.com/faq/faq_notes/closures.html#clClose

Link to comment
Share on other sites

This line is not right:domReady(function(){Closures are fairly complex, they deal with defining functions inside of a local scope that eventually goes out of scope, but the function is still defined in the global scope (even though the function might have previously-local variables that it relies upon). When the function gets executed an execution context gets created with the local variables that the function needs to run. This page describes the concepts:http://www.jibbering.com/faq/faq_notes/closures.html#clClose
Kind of cannot figure out why it does not work as expected, but kind of have a feeling the problem lies not in the domReady bit... I mean it does hide the <dd>, so this part works... It is only the clicking bit, what is kind of strange with the given error message...Thank you for the info about closures, will read through the given website. I still have not figured out how to open my pop-up, which makes me think it might be a bit too advanced for my brain;-)KurtKurt
Link to comment
Share on other sites

The line I copied is not right, you are trying to execute a function called domReady and sending it an anonymous function as a parameter. I don't think that's what you're meaning to do.
You are right, completely incorrect. Changed the whole lot to
domReady:function(){var dt=document.getElementsByTagName('dt');for(var i=0;i<dt.length;i++){	addEvent(dt[i],"click",function(){		var open=attr(this,"open");		next(this).style.display=open?'none':'block';		attr(this,"open",open ?'':'yes');		});	}};

IE does not show any error any more. The definition list still just does not expand...Kurt

Link to comment
Share on other sites

[...] Then I read about closures today (to add even more to my general JavaScript confusion). Is someone able to explain in a a closures for dummies version? This would be great! [...]
Try this, noting that the author warns:
My explanations of closures and stack-frames etc are not technically correct - they are gross simplifications intended to help understanding. Once the basic idea is grokked, you can pick up the details later.
It may help.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...