Results 1 to 9 of 9

Thread: Conflicting JavaScript ?

  1. #1
    Join Date
    Mar 2010
    Location
    Essex, UK
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Conflicting JavaScript ?

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2010
    Location
    Essex, UK
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2010
    Location
    Essex, UK
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mingis View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •