Solved

Java Scripts interaction on page causes one to fail

Posted on 2008-10-19
8
466 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How would I do a website like this? 5 54
How to hyperlink a document in MS Word w/o full path 1 26
Border and image sizing 5 17
Create tabs to show divs 9 27
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

808 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