View Full Version : Conflict between pre-fab and self-made scripts

11-30-2010, 06:28 AM
I'm using the LightWindow (http://www.p51labs.com/lightwindow/) package on my website for image previews, and I recently added some javascript to use HTTPObject requests to speed-up load times between pages. However, I cannot get both scripts to work at the same time. :(

Both scripts use Hijax methods to affect the behavior of different elements on the page by altering the 'onclick' values :thumbsup:. LightWindow uses scriptaculous to grab all anchors with the class 'lightwindow' and my script uses basic DOM scripting to get all anchors inside of the divider with id='navtop.' Both scripts work fine in their own right:), but cannot co-operate.:mad:

The current behavior is that, if my navigation() function gets called and the document is populated with the code for the lightwindow links, the lightwindow script is unable to re-snag the anchors by their class.

What could be causing this conflict, and in what ways can I resolve it? :confused:

11-30-2010, 06:48 AM
My Javascript code for the navigation. Lightwindow's code is incredibly long, so I wont be able to post all of it.

function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
return xhr;
function navigation(file){
var dest = getHTTPObject();
if (dest) {
dest.onreadystatechange = function(){
dest.open("GET", file, true);
function moveTo(dest){
if (dest.readyState == 4) {
if (dest.status == 200 || dest.status == 304) {
var newC = dest.responseText;
var oldC = document.getElementById("content");
while (oldC.hasChildNodes()) {
oldC.innerHTML = newC;
window.onload = prepareLinks;
function prepareLinks() {
var navList = document.getElementById("navtop");
var navLinks = navList.getElementsByTagName("a");
for (var i=0; i<navLinks.length; i++) {
navLinks[i].onclick = function() {
var want = this.getAttribute("name");
navigation("ind/fragments/" + want + "_f.html");
return false;

My HTML (abridged)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/zero.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/buy.css" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<link rel="stylesheet" type="text/css" href="cgi/lightwindow/css/lightwindow.css">
<script type="text/javascript" src="cgi/nav.js"></script>
<script type="text/javascript" src="cgi/lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="cgi/lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="cgi/lightwindow/javascript/lightwindow.js"></script>
<div id="wrap">
<div id="head">
<div id="navtop">
<li><a href="index.html" name="index">Home</a></li>
<li><a href="ind/services.html" name="services">Services</a></li>
<li><a href="ind/contact.html" name="contact">Contact</a></li>
<div id="content">
// Bunch of Stuff
<li><span class="is"><p>Affiliate Marketing</p><a href="img/products/Affiliate.png" class="lightwindow" params="lightwindow_width=700,lightwindow_height=529">preview</a></span></li>
<li><span class="is"><p>Domain Marketing</p><a href="img/products/Domain.png" class="lightwindow" params="lightwindow_width=700,lightwindow_height=529">preview</a></span></li>
<li><span class="is"><p>WordPress</p><a href="img/products/WPconfidential.png" class="lightwindow" params="lightwindow_width=700,lightwindow_height=529">preview</a></span></li>
<li><span class="is"><p>Internet Marketing</p><a href="img/products/IMSpeed.png" class="lightwindow" params="lightwindow_width=700,lightwindow_height=529">preview</a></span></li>
<div id="footer">

The structure of the site is set up so that, if Javascript is unavailable, the user can click through each page like they normally would, but with Javascript, the browser instead asks for a different file that contains only the text that appears inside of <div id="content">. It's going to be a pain to update, but at the very least it's a very small site.

Any suggestions for how I could just parse out the original files directly would be great as well.