lightbox2 conflict with other js

[mrdon]

I am using lightbox2 http://huddletogether.com/projects/lightbox2/

It looks like the prototype.js file for the lightbox script is conflicting with another js I have running on the page.

I have read that it may have to do with variable w/ the same name in both scripts, but I can't seem to find anything.

Here is my js code (the highlighted part is what I am having problems with):

subject_id = '';
    function handleHttpResponse() {
        if (http.readyState == 4) {
            if (subject_id != '') {
                document.getElementById(subject_id).innerHTML = http.responseText;
            }
        }
    }
    function getHTTPObject() {
        var xmlhttp;
        /*@cc_on
        @if (@_jscript_version >= 5)
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                    xmlhttp = false;
                }
            }
        @else
        xmlhttp = false;
        @end @*/
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            try {
                xmlhttp = new XMLHttpRequest();
            } catch (e) {
                xmlhttp = false;
            }
        }
        return xmlhttp;
    }
    var http = getHTTPObject(); // We create the HTTP Object
 
    function getScriptPage(div_id,content_id)
    {
        subject_id = div_id;
        content = document.getElementById(content_id).value;
        http.open("GET", "script_page.php?content=" + escape(content), true);
        http.onreadystatechange = handleHttpResponse;
        http.send(null);
        if(content.length>0)
            box('1');
        else
            box('0');
 
    }    
 
  function highlight(action,id)
    {
      if(action)    
        document.getElementById('word'+id).bgColor = "#C2B8F5";
      else
        document.getElementById('word'+id).bgColor = "#F8F8F8";
    }
    function display(word)
    {
        document.getElementById('insured').value = word;
        document.getElementById('box').style.display = 'none';
        document.getElementById('insured').focus();
    }
    function box(act)
    {
      if(act=='0')    
      {
        document.getElementById('box').style.display = 'none';
 
      }
      else
        document.getElementById('box').style.display = 'block';
    }

The part of the code above that is having the problem is:

function highlight(action,id)
    {
      if(action)    
        document.getElementById('word'+id).bgColor = "#C2B8F5";
      else
        document.getElementById('word'+id).bgColor = "#F8F8F8";
    }

Here is prototype.js: http://pastebin.com/m15b418e9



Thanks in advance for any help.
Brandon

[JimmyP]

Try 'backgroundColor' instead of 'bgColor'.

Also, if you're using Prototype then why not take advantage of it?

// Normal (what you're using):
document.getElementById('word'+id)
// Prototype:
$('word'+id)

[mrdon]

Thanks for your reply. That didn't seem to fix it. I think there may be a conflict between my js script that uses

function highlight (action,id)

and my lightbox that uses prototype.js or scriptaculous.js.

I'm not 100% that this is what is causing the problem (I'm a newb with js) but that is kind of what I am thinking.

[JimmyP]

To test your theory you could try renaming the function...

[mrdon]

I could have sworn I already tried that...but, I guess I didn't, because that worked. Something so simple...thanks Jimmy, I really appreciate it!

Originally Posted by JimmyP

To test your theory you could try renaming the function...