views:

467

answers:

1

I have this external JS file included in a web page. It is a absolute positioned footer toolbar with toggle view functionality. It works perfect in FF3. But IE8 gives error 'animatedcollapse' is undefiened and it is just hanging at the bottom of the page. Could you please figure out what is missing here?

document.write("<link href=\"css\/catfish.css\" rel=\"stylesheet\" media=\"screen\">");
document.write("<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js\"><\/script>");
document.write("<script type=\"text\/javascript\" src=\"js\/animatedcollapse.js\"><\/script>");
document.write("<script type=\"text\/javascript\">");
document.write("animatedcollapse.addDiv('catfish', 'fade=0,speed=400,group=pets,hide=0');");
document.write("animatedcollapse.ontoggle=function($, divobj, state){};");
document.write("animatedcollapse.init();");
document.write("<\/script> ");
document.write("<div id=\"catfish_wrap\">");
document.write(" <div id=\"btn_toggle\"><a href=\"#\" style=\"border:0px;\" rel=\"toggle[catfish]\" data-openimage=\"images\/collapse.png\" data-closedimage=\"images\/expand.png\"><img src=\"images\/collapse.png\" border=\"0\" \/><\/a><\/div>");
document.write("    <div id=\"catfish\">");
document.write("        <div id=\"sub_form\">");
document.write("              <form name=\"subscribe_newsletter\" id=\"subscribe_newsletter\">");
document.write("                   <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.write("                      <tr>");
document.write("                        <td width=\"58%\"><h3>Subscribe me to your fantastic newsletter<\/h3>");
document.write("                                <input name=\"fullname\"  onClick=\"select()\" class=\"txtBox\" id=\"fullname\" value=\"Enter Full Name!\">");
document.write("                                &nbsp;&nbsp;&nbsp;&nbsp;<input name=\"email\" onClick=\"select()\" class=\"txtBox\" id=\"email\" value=\"Valid E-mail Address!\">");
document.write("                               <\/td>");
document.write("                        <td width=\"42%\" align=\"right\"><input   type=\"image\" src=\"images\/btn_subscribe.png\" style=\"padding-top:8px;\" value=\"Subscribe Newsletter\"><\/td>");
document.write("                      <\/tr>");
document.write("                   <\/table>         ");
document.write("              <\/form>");
document.write("        <\/div>");
document.write("    <\/div>");
document.write("    ");
document.write("<\/div>");
+1  A: 

see javascripts-document-write-inline-script-execution-order

AndrewWithey
+1, and also try to avoid document.write when possible.
Alex