Solved

Java Scripts interaction on page causes one to fail

Posted on 2008-10-19
8
464 Views
Last Modified: 2010-03-18
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

0
Comment
Question by:glopicon
8 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22754220
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
 

Author Comment

by:glopicon
ID: 22754279
The website is built using Joomla, could that be the problem? If so, how can I fix it?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22754440
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22754524
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22754622
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22754648
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 27647139
scrathcyboy: document.write inline is fine. document.write after page load is deadly.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now