glopicon
asked on
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
<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"> </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> </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>
ASKER
The website is built using Joomla, could that be the problem? If so, how can I fix it?
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.
"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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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>
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>
scrathcyboy: document.write inline is fine. document.write after page load is deadly.
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.