At last, a fairly large hint. With the following code, when I put the
Javascript inline, the effect works. Whereas if I put it in an
external JS file, include that in the head and call the function (like
shown below), it doesnt work.
HTML Source
<!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"; xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/
prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/
scriptaculous.js" type="text/javascript"></script>
<script src="/javascripts/application.js" type="text/javascript"></
script>
<title>Comments</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color:
#fff; }
</style>
</head>
<body>
<a href="#" onclick="toggle_comments();; return false;">Comments</a>
<div style="display:none; background-color: red;" id="comments-
section">
HI!
<a href="#" onclick="toggle_comments();; return false;">Close</a>
</div>
</body>
</html>
application.js
function toggle_comments() {
new Effect.toggle('comments-section', 'slide');
}
... FOLLOWED BY MANY OTHER CUSTOM JS FUNCTIONS ...
What works, is the following
<!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"; xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/
prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/
scriptaculous.js" type="text/javascript"></script>
<title>Comments</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color:
#fff; }
</style>
</head>
<body>
<a href="#" onclick="new Effect.toggle('comments-section', 'slide');;
return false;">Comments</a>
<div style="display:none; background-color: red;" id="comments-
section">
HI!
<a href="#" onclick=" new Effect.toggle('comments-section',
'slide'); ; return false;">Close</a>
</div>
</body>
</html>
Think thats boils things down considerably.. Walter, any idea where I
might be breaking this in application.js? Maybe I have bad syntax in
the rest of the functions in it? But all the other functions work
fine..
On Apr 25, 7:44 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> Can you go to the tab where you see it broken, view source, copy and
> paste it into
>
> http://validator.w3.org/#validate_by_input
>
> and see if there's anything up there?
>
> Prototype is sensitive to standards, and you may eliminate some of
> your problem by starting with a clear page.
>
> Walter
>
> On Apr 25, 2009, at 7:29 AM, Vinay Seshadri wrote:
>
> > What could possibly be the difference?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
