Java Scripts interaction on page causes one to fail

I added this code:
<script type="text/javascript" src="http://www.formspring.com/forms/js.php?441587-jmzgSCORze"></script>

To add a test contact form to the right-hand side of this page:
http://www.onezer.com/pricing2 

And it caused my header slideshow that can be seen working correctly on this page to disappear:

Attached is the source of the page where the slideshow is not showing up after I inserted the code above to try to insert a contact form
<!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>
	  <base href="http://www.onezer.com/pricing2" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="ONEzer, websites made easy, webdesign, web design, web maintenance, webhosting, web hosting, website design, website, build websites," />
  <meta name="title" content="Pricing 2" />
  <meta name="author" content="Administrator" />
  <meta name="description" content="ONEzer the easiest way to get your own website. We build it. We maintain it. You can edit it." />
 
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Pricing 2</title>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>
  <script type="text/javascript" src="http://www.onezer.com/modules/mod_rokheadrotator/tmpl/rokheadrotator.js"></script>
 
	
<link rel="shortcut icon" href="/images/favicon.ico" />
 
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/template.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/rokslidestrip.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/light.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/css/menustyle4-light.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_hivemind_j15/rokzoom/rokzoom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	div.wrapper { margin: 0 auto; width: 962px;padding:0;}
	/* clear fixes for pure css layout */
	    #maincol {float: left; margin-right: -250px; width: 100%;}
    #maincol-container {margin-right:250px;}
    #sidecol {float: right; width: 250px;}
    </style>	
<script type="text/javascript" src="/templates/rt_hivemind_j15/js/rokslidestrip.js"></script>
<script type="text/javascript" src="/templates/rt_hivemind_j15/rokzoom/rokzoom.js"></script>
<script type="text/javascript" src="/templates/rt_hivemind_j15/js/rokfonts.js"></script>   
<script type="text/javascript">
	window.addEvent('load', function() {
		var modules = ['module','module-menu','module-color1','module-color2','module-color3','module-color4','module-style1','module-style1-color1','module-style1-color2','module-style1-color3','module-style1-color4','module-style2','module-style2-color1','module-style2-color2','module-style2-color3','module-style2-color4'];
		var header = "h3";
			    RokBuildSpans(modules, header);
        	});
</script>
	
 
<!--[if IE]>
<script type="text/javascript" src="/templates/rt_hivemind_j15/js/ie_suckerfish.js"></script>
<![endif]-->
	
<script type="text/javascript">
	window.addEvent('load', function() {
		RokZoom.init({
			imageDir: '/templates/rt_hivemind_j15/rokzoom/images/',
			resizeFX: {
				duration: 700,
				transition: Fx.Transitions.Cubic.easeOut,
				wait: true
			},
			opacityFX: {
				duration: 500,
				wait: false	
			}
		});
	});
</script>
	</head>
	<body id="ff-optima" class="f-default light">
		<!-- begin wrapper -->
		<div class="wrapper">
			<!-- begin top section -->
			<div id="top">
				
 
									
			</div>
 
			<!-- end top section -->
			<!-- begin mainbody -->
			<div id="mainbody-top">
				<div id="mainbody-top2">
					<div id="mainbody-top3">
					</div>
				</div>
			</div>
			<div id="mainbody">
 
				<!-- begin header -->
				<div id="header">
					<a href="/" class="nounder"><img src="/images/blank.png" border="0" alt="" id="logo" /></a>
					<div id="horiz-menu" class="splitmenu menustyle4">
						<div id="horiz-menu2">
															<ul class="menutop"><li class="item1"><a href="http://www.onezer.com/"><span>Home</span></a></li><li class="item41"><a href="/pricing"><span>Pricing</span></a></li><li class="item42"><a href="/themes"><span>Themes</span></a></li><li class="item43"><a href="/faq"><span>FAQ</span></a></li><li class="item44"><a href="/customer-support"><span>Support</span></a></li></ul>								
						</div>
 
					</div>
				</div>
				<!-- end header -->
								<div id="mainbody-padding">
					<!-- begin maincolumn -->
					<div id="maincol">
					    <div id="maincol-container">
	    					    						<div id="showcase">
    									<div class="module">
 
			<div>
				<div>
					<div>
												<div id="rokheadrotator"></div>
	<script type="text/javascript">
		window.addEvent('load', function(){
				var headers = [];
 
									headers.push('http://www.onezer.com/images/stories/showcase/light/1_slide.jpg');
									headers.push('http://www.onezer.com/images/stories/showcase/light/2_slide.jpg');
									headers.push('http://www.onezer.com/images/stories/showcase/light/3_slide.jpg');
									headers.push('http://www.onezer.com/images/stories/showcase/light/4_slide.jpg');
								
				var rok = new RokHeadRotator('rokheadrotator', headers, {
        		    'duration': 1000,
        		    'delay': 9000,
        			'start': 0,
        			'autoplay': 1,
        			'controls': 0,
        			'blank': 'http://www.onezer.com//images/blank.png'
        		});
			
			});
			</script>
					</div>
				</div>
			</div>
 
		</div>
	
    						</div>
    						    						    						
    						<div id="body-padding">
							    
<table class="contentpaneopen">
 
 
 
<tr>
<td valign="top">
<p align="right"><img src="/images/stories/pricing_graphic_11.jpg" border="0" /></p><table border="0" width="350" align="right"><tbody><tr><td><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=405544"><img src="/images/stories/btn_buynowcc_lg.gif" border="0" /></a></td><td><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=405399"><img src="/images/stories/btn_buynowcc_lg.gif" border="0" /></a></td><td><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=405553"><img src="/images/stories/btn_buynowcc_lg.gif" border="0" /></a></td></tr></tbody></table>
 
</td>
</tr>
 
</table>
<span class="article_separator">&nbsp;</span>
 
							</div>
    						    					</div>
					</div>
					<!-- end maincolumn -->
					<!-- begin sidecolumn -->
											<div id="sidecol">
							<div id="sidecol-padding">
 
																		<div class="module">
			<div>
				<div>
					<div>
											<a href="/pricing"><div style="text-align: center"><img src="/images/stories/go_purchase_3.jpg" border="0" /></div></a>					</div>
				</div>
			</div>
		</div>
 
			<div class="module">
			<div>
				<div>
					<div>
											<a href="/pricing"><div align="center"> <img src="/images/stories/picture11.png" border="0" /></div></a><a href="/pricing"><div style="text-align: center"> </div><div style="text-align: center"> </div></a><p align="center"><a href="http://www.redcurbwebsites.com" target="_blank"><img src="/images/stories/picture12.png" border="0" /></a></p>					</div>
				</div>
			</div>
 
		</div>
			<div class="module">
			<div>
				<div>
					<div>
													<h3>form test</h3>
											<script type="text/javascript" src="http://www.formspring.com/forms/js.php?441587-jmzgSCORze">a</script>					</div>
 
				</div>
			</div>
		</div>
								</div>
						</div>
										<!-- end sidecolumn -->
					<div class="clr"></div>
				</div>
			</div>
 
			<!-- end mainbody -->
			<!-- begin bottom section -->
						<div id="mainbody-bottom">
				<div id="mainbody-bottom2">
					<div id="mainbody-bottom3">
					</div>
				</div>
			</div>
			<!-- end bottom section -->
 
							<div align="center">
				<div id="footer">
							<div class="moduletable">
					<p align="center"><a href="http://www.onezer.com"><br />Home</a> | <a href="/../pricing">Pricing</a> | <a href="/../themes">Themes</a> | <a href="/../support">Support</a> | <a href="/../faq">FAQ</a> </p><p align="center">Copyright © 2008 ONEzer.com - All Rights Reserved</p><p align="center">A <a href="http://www.redcurbsolutions.com/">RedCurb Company</a></p><p>&nbsp;</p>		</div>
 
	
				</div>
				</div>
					</div>
		<!-- end wrapper -->
 
<!-- START Google Analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5986150-1");
pageTracker._trackPageview();
</script>
<!-- END Google Analytics -->
 
	</body>
 
</html>

Open in new window

glopiconAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

scrathcyboyCommented:
First, you do NOT want to link to a javascript file on an external website.  What if that site is down, or what if they move the page?  That is a PHP query link, they can change any and every week.  Bad practice.

Second, it is ALL done in document.write -- that causes the ENTIRE page to be refreshed and only the code in that file will appear on the page.  i.e. no matter what else you have on a page, a series of document.writes will cause a complete page clear and ONLY the stuff in that file will appear.

So you need to use functions and write what you want.  If this is a form, you put everything you want in the form, and do not use document.write for any of it.
0
glopiconAuthor Commented:
The website is built using Joomla, could that be the problem? If so, how can I fix it?
0
scrathcyboyCommented:
yes joomla can be a problem, but in your case, a javascript involving document.write(s) is the problem.  
"And it caused my header slideshow that can be seen working correctly on this page to disappear:"
That is exactly what document.write will do.  Why not just say what you want to add to the page, and add it correctly in the HTML without using someone else's code that does not apply to your site.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

sh0eCommented:
It's not a problem with Joomla.
You are using MooTools library, and the script you included uses Prototype.  MooTools and Prototype are not compatible, and it's going to be very painful trying to make them work together.

I recommend that you load the form in an iframe.
Something like this:
test.html:
<iframe src="test1.html"></iframe>
 
test1.html:
<script type="text/javascript" src="http://www.formspring.com/forms/js.php?441587-jmzgSCORze"></script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
scrathcyboyCommented:
look at the link given at the very Top of the question -- this is all document writes, and as such, it will overwrite any page content with what is in the document write code -- which is exactly what he sees.  What library it comes from is irrelevant -- document.writes cause a page rewrite, and that needs to be removed if he wants his page to remain as he coded it.
0
sh0eCommented:
The  document.write is not the problem.
MooTools is failing because the included script uses Prototype, and thus his slideshow no longer works.
Prototype and MooTools both use many same named global variables, as well as many other issues.
Thus causing his slideshow (based on MooTools) to fail.

If the included script from formspring is contained in an iframe, it will not effect the parent page.
So all he needs to do is create a page like test1.html with the script included.
And then add an <iframe src="test1.html"></iframe> to his main page in place of the div he used.
0
Michel PlungjanIT ExpertCommented:
scrathcyboy: document.write inline is fine. document.write after page load is deadly.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.