Conflicting JavaScript ?

**Tissy** · 03-26-2010, 04:38 PM

First posting here, so not quite sure the format.

I am having a few issues with some JavaScripting.

Individually each piece of code works well. One is for LightBox and the other is for a drop down menu system.

However, when they are both on the same page, it is causing problems.

The header of the HTML is as follows

Code:

<HEAD>
<TITLE>Test Page.</TITLE>

<LINK rel=stylesheet type=text/css href="../index.css" media=screen>

<SCRIPT language=javascript type=text/javascript src="../jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../navigation.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../jquery.hoverIntent.js"></SCRIPT>

<LINK rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen">

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

<script type="text/javascript">
	function LightboxGroupLink(id) {
	var slideLink = document.getElementById(id);
	objLightbox.start(slideLink);
	}
</script>

</head>

The error changes depending on what piece of script i put first.

With the above, the drop down menu doesn't work, however if i swap them over, the Lightbox doesn't work.

With the above i get this error:

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NAP 1.1)
Timestamp: Fri, 26 Mar 2010 16:36:20 UTC


Message: 'null' is null or not an object
Line: 7
Char: 3
Code: 0
URI: http://www.mytestsite.co.uk/navigation.js

Never had a conflict in JavaScript before, can anyone assist in pointing me in the right direction please.

Many thanks,

Steve

**jscheuer1** · 03-27-2010, 03:37 PM

If that's lightbox 2.04, as appears to be the case, you can put jQuery into no conflict mode. However, the script(s) that use jQuery must be able to operate in no conflict mode. Some editing of the the script(s) using jQuery may be required.

With a little luck though, this might work:

Code:

<head>
<title>Test Page.</title>

<link rel=stylesheet type=text/css href="../index.css" media=screen>

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../navigation.js"></script>
<script type="text/javascript" src="../jquery.hoverintent.js"></script>

<script type="text/javascript">
jQuery.noConflict();
</script>

<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen">

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

<script type="text/javascript">
	function LightboxGroupLink(id) {
	var slideLink = document.getElementById(id);
	objLightbox.start(slideLink);
	}
</script>

</head>

Alternatively, you could use a jQuery based lightbox type script.

**Tissy** · 03-27-2010, 04:39 PM

Thanks for taking the time to reply John, its apprciated.

Unfortuanatly no joy, i still get the null error which is related to the drop down menu script.

I also tried swapped the order of the JavaScripts to read the following:

Code:

<HTML>
<HEAD>
<TITLE>Test Page</TITLE>

<script type="text/javascript">
	jQuery.noConflict();
</script>

<LINK rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen">

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

<script type="text/javascript">
	function LightboxGroupLink(id) {
	var slideLink = document.getElementById(id);
	objLightbox.start(slideLink);
	}
</script>

<LINK rel=stylesheet type=text/css href="../index.css" media=screen>

<SCRIPT language=javascript type=text/javascript src="../jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../navigation.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../jquery.hoverIntent.js"></SCRIPT>


</head>

However, i still get the following error which is related to the LightBox script:

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NAP 1.1)
Timestamp: Sat, 27 Mar 2010 16:33:03 UTC


Message: 'jQuery' is undefined
Line: 8
Char: 1
Code: 0
URI: http://www.ajk-woodflooring.co.uk/gallery/index_test.html


Message: Object doesn't support this property or method
Line: 3974
Char: 9
Code: 0
URI: http://www.mytestsite.co.uk/js/prototype.js

I'll be honest, im still trying to learn JavaScript by using examples, so when you say i can use a jQuery LightBox script, i'm a little lost

Thanks again for you help.

**jscheuer1** · 03-27-2010, 07:09 PM

I went to your:

http://www.ajk-woodflooring.co.uk/gallery/index_test.html

page and made a local mock up. I changed the order back to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>AJK Woodflooring LTD, Timber flooring specialists.</TITLE>

<LINK rel=stylesheet type=text/css href="../index.css" media=screen>

<LINK rel=stylesheet type=text/css href="../index.css" media=screen>
<LINK rel=stylesheet type=text/css href="../index(1).css" media=print>

<SCRIPT language=javascript type=text/javascript src="../jquery-1.3.2.min.js"></SCRIPT>

<SCRIPT language=javascript type=text/javascript src="../navigation.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../jquery.hoverIntent.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../jquery.nyroModal-1.5.0.min.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../custom-animations.js"></SCRIPT>
<SCRIPT language=javascript type=text/javascript src="../jquery.validate.min.js"></SCRIPT>

<script type="text/javascript">
	jQuery.noConflict();
</script>

<LINK rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen">

<script type="text/javascript" src="../js/prototype.js"></script>

<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

<script type="text/javascript">
	function LightboxGroupLink(id) {
	var slideLink = document.getElementById(id);
	objLightbox.start(slideLink);
	}
</script>

Got rid of the BOM:

Code:

at the very beginning of the file, and changed:

Code:

$(document).ready(function()

at the beginning of both navigation.js and custom-animations.js to:

Code:

jQuery(function($)

That took care of all of the errors and everything seemed to work, except the lightbox. But that was working on the live page, and since it's tied in with the Flash, probably won't work in a local mock up anyway. It didn't work in the mock up even before I started making the changes. It should work on the live page.

**Tissy** · 03-27-2010, 07:53 PM

John, what can i say but THANK YOU SO MUCH, you are a true gent.

I had been struggling for a few days but had to admit defeat in the end and turn to the Pros.

People like yourself willing to give their time and experience to help others make forums like this such a great thing.

Thank you again,

Steve

**mingis** · 09-15-2010, 07:03 AM

I'm having a similar issue, I have a dynamic drop-down div that works fine on Firefox and Chrome, but IE reports the same 'Message: Object doesn't support this property or method' error on line 291 of my site:

Code:

var entry = $('container').select('div.entry').first();

I'm using wordpress so unfortunately a lot of the jquery is inserted automatically into the

Code:

wp_head();

function.

I just wondered if there was anything I could change at line 291 that could get this working.

This is (unfortunately) happening on one of my live sites, you can reproduce the error by scrolling to the bottom of the homepage at: http://www.outlookbathrooms.com.au/

Any help would be most appreciated.

Cheers.

**jscheuer1** · 09-15-2010, 03:06 PM

Originally Posted by mingis

I'm having a similar issue

Well, yes and no. You have a script conflict. But it has nothing to do with jQuery. It's a conflict between mootools and prototype. I'm aware of no fix for this other than eliminating one of the libraries. And I'm a bit surprised that it works in any browser, but not too surprised.

I know you say you cannot change the head, so you may be out of luck. But you can use jQuery instead, and it looks like that would work. To do so, get rid of this:

Code:

<script type="text/javascript">

function pageScroll() {
    var x = document.viewport.getDimensions().height + document.viewport.getScrollOffsets().top - (entry.getHeight() + entry.cumulativeOffset().top);
    if (x > 0) {
        if (parseInt(share_popout.getStyle('top')) != 0)
            share_popout.morph({top: '0px'}, {duration: 0.5});
    }
    else {
        if (parseInt(share_popout.getStyle('top')) != -250)
            share_popout.morph({top: '-250px'}, {duration: 0.5});
    }
}

</script>

and this:

Code:

<script type="text/javascript">
	var entry = $('container').select('div.entry').first();
    var share_popout = $('share_popout');
    if(window.addEventListener) {
        window.addEventListener('scroll', pageScroll, false);
    }
    else if(window.attachEvent) {
        window.attachEvent('onscroll', pageScroll);
    }
</script>

Then replace either one of them not both with this:

Code:

<script type="text/javascript"> 
jQuery(function($){
	var entry = $('#container div.entry').first(), share_popout = $('#share_popout'), w = $(window), x;
	function pageScroll(){
		x = w.height() + w.scrollTop() - (entry.height() + entry.offset().top);
		if (x > 0){
			if (parseInt(share_popout.css('top')) !== 0){
				share_popout.stop(true).animate({top: '0px'}, {duration: 500});
			}
		} else {
			if (parseInt(share_popout.css('top')) !== -250){
				share_popout.stop(true).animate({top: '-250px'}, {duration: 500});
			}
		}
	}
	w.scroll(pageScroll);
});
</script>

A different solution would be to simply (as you don't appear to be using it) get rid of this:

Code:

<!-- begin nextgen-smooth scripts -->
          <script type="text/javascript"  src="http://www.outlookbathrooms.com.au/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/scripts/mootools.v1.11.js"></script>
          <script type="text/javascript"  src="http://www.outlookbathrooms.com.au/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/scripts/jd.gallery.js"></script>
          <script type="text/javascript"  src="http://www.outlookbathrooms.com.au/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/scripts/jd.gallery.transitions.js"></script>          
          <link   type="text/css"        href="http://www.outlookbathrooms.com.au/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/css/jd.gallery.css" rel="stylesheet" media="screen" />
        <!-- end nextgen-smooth scripts -->

You could do both and it would speed up load time. You might even be able to get rid of the two prototype scripts as well. Getting rid of all that code would be a great idea if it works out.

**mingis** · 09-18-2010, 12:48 PM

Hi John,

I'd just like to add to the above sentiment that you are an absolute legend!

I was tackling this after a long day in front of the screen and just couldn't figure it out. I will be sure to take a close look at your solutions and learn from them.

I went for option 1 as I believe the SmoothGallery scripts are controlling the transitions in the header images, but I'll be sure to run some speed tests and see if the load time can be improved any more.

Thanks again for your help - most appreciated!

Cheers,
Al.

**WesNileMusic** · 04-16-2011, 06:39 PM

I am having a very similar issue & any help would be appreciated. My thread can be found here: http://www.dynamicdrive.com/forums/s...443#post251443 Thanks in advance.

Thread: Conflicting JavaScript ?

Thread Tools

Search Thread

Conflicting JavaScript ?

Bookmarks

Bookmarks

Posting Permissions