Solved

JQuery and Prototype (lightbox) conflict

Posted on 2008-10-14
12
7,124 Views
Last Modified: 2008-10-15
I am trying to run an outlook style menu alongside lightbox.

The menu uses JQuery for the slide effect etc. and lightbox is used for images on the same page.
I've had a look on the web and I seem to get a lot of the same on the issue.

So this is what I have
    <script src="menu/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
    <script language="javascript">
    $jQuery = jQuery.noConflict();
    </script>
    <script src="menu/menu.js" type="text/javascript"></script>    
    <link rel="stylesheet" type="text/css" href="menu/style.css" />

menu.js contains javascript functions to open and close menu items using $jQuery. etc.
The menu works fine like this. Now when adding the following:

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>

This is where the problems start.

Error: element.style is undefined
Source File: lightbox/js/lightbox.js
Line: 45
Line 45 : element.style.width = w +"px";

Is there something else I need to be doing to run jQuery en Lightbox to run alongside each other?
Thanks
0
Comment
Question by:onlineinnovations
  • 6
  • 5
12 Comments
 
LVL 14

Expert Comment

by:ziffgone
Comment Utility
Maybe try using the jQuery only version and ditch the Prototype/Scriptlicious version:

http://leandrovieira.com/projects/jquery/lightbox/
0
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
You are calling jQuery.noConflict() at the wrong time.
Replace $jQuery = jQuery.noConflict(); with $jQuery = jQuery;
0
 

Author Comment

by:onlineinnovations
Comment Utility
Ok I've replaced $jQuery = jQuery.noConflict(); with $jQuery = jQuery;

<script src="menu/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
$jQuery = jQuery;
</script>
<script src="menu/menu.js" type="text/javascript"></script>    
<link rel="stylesheet" type="text/css" href="menu/style.css" />

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>


I no longer get the error as before but clicking on a thumbnail does not open lightbox it just opens the larger version in the browser:
<a href="big/IMG123.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/IMG123.jpg" alt=""  border="0">

0
 

Author Comment

by:onlineinnovations
Comment Utility
Please ignore my comment above. I was looking at another test attemp.

I did do the replace as per your suggestion. Lightbox now workd but the menu I made now does not work. Using firefox error console I get :
Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: jquery-1.2.6.pack.js :: anonymous :: line 11"  data: no]
Source File: jquery-1.2.6.pack.js
Line: 11

IE still reports font.style is null or not an object on line 25.

Thanks again
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery lightBox plugin</title>

<script src="jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>

<script language="javascript">

    //$jQuery = jQuery.noConflict();

	$jQuery = jQuery;

    </script>

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

<link rel="stylesheet" type="text/css" href="style.css" />

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

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

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

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

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><ul id="menu1" class="menu">

        <li><a class="m1" href="#">Menu 1</a>

          <ul>

            <li><a href="#">Sub Menu 1.1</a></li>

            <li><a href="#">Sub Menu 1.2</a></li>

          </ul>

        </li>

        <li><a href="content.asp?pageID=">Menu 2</a></li>

        <li><a class="m3" href="#">Menu 3</a>

          <ul>

            <li><a class="m3_m1" href="#">Sub Menu 3.1</a>

              <ul>

                <li><a href="#">Sub Menu 3.1.1</a></li>

                <li><a href="#">Sub Menu 3.1.2</a></li>

                <li><a href="#">Sub Menu 3.1.3</a></li>

              </ul>

            </li>

            <li><a class="m3_m2" href="#">Sub Menu 3.2</a>

              <ul>

                <li><a href="#">Sub Menu 3.2.1</a></li>

                <li><a href="#">Sub Menu 3.2.2</a></li>

              </ul>

            </li>

            <li><a href="#">Sub Menu 3.3</a></li>

          </ul>

        </li>

      </ul></td>

    <td><a href="big/_MG_4324 copy.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/_MG_4324 copy.jpg" alt=""  border="0"></a> <a href="big/_MG_4326 copy.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/_MG_4326 copy.jpg" alt=""  border="0"></a> <a href="big/_MG_4328 copy.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/_MG_4328 copy.jpg" alt=""  border="0"></a> 

  </tr>

</table>

</html>

Open in new window

0
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
If possible, can you provide the code for menu.js?
Are you sure that menu.js only makes use of $jQuery?
0
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
Put $jQuery = jQuery; into menu.js
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:onlineinnovations
Comment Utility
Putting it into menu.js makes no difference.
Here is menu.js
$jQuery = jQuery;
 

function setCookie(c_name,value,expiredays)

{	

	var exdate=new Date();

	exdate.setDate(exdate.getDate()+expiredays);

	document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}
 

function getCookie(c_name)

{

	if (document.cookie.length>0)

	  {

	  c_start=document.cookie.indexOf(c_name + "=");

	  if (c_start!=-1)

		{ 

		c_start=c_start + c_name.length+1; 

		c_end=document.cookie.indexOf(";",c_start);

		if (c_end==-1) c_end=document.cookie.length;

		return unescape(document.cookie.substring(c_start,c_end));

		} 

	  }

	return "";

}
 

function initMenus() {

	 $jQuery('ul.menu ul').hide();

	 $jQuery.each( $jQuery('ul.menu'), function(){
 

		var cookie = getCookie('currentmenu');

		

		if(cookie != null && String(cookie).length < 1) {

			 $jQuery('#' + this.id + '.expandfirst ul:first').show();

		}

		else {		

			var currcookies = getCookie('currentmenu').split('_');

            for (var i = 0; i < currcookies.length - 1; i++) 

			{

				 $jQuery('#' + this.id + ' .' + currcookies[i]).next().show();	

            }

			 $jQuery('#' + this.id + ' .' + getCookie('currentmenu')).next().show();

			

		}

	});

	 $jQuery('ul.menu li a').click(

		function() {

			var checkElement =  $jQuery(this).next();

			var parent = this.parentNode.parentNode.id;

			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {

				if( $jQuery('#' + parent).hasClass('collapsible')) {

					 $jQuery('#' + parent + ' ul:visible').slideUp('normal');

				}

				return false;

			}

			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) 

			{

				 $jQuery('#' + parent + ' ul:visible').slideUp('normal');

				if (String(this.className).length > 0) 

				{

					setCookie('currentmenu',this.className,1);

				}

				checkElement.slideDown('normal');

				return false;

			}

		}

	);

}

 $jQuery(document).ready(function() {initMenus();});

Open in new window

0
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
I used your files and was unable to reproduce the problem.  Works here.

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

Expert Comment

by:sh0e
Comment Utility
<script language="javascript">
    //$jQuery = jQuery.noConflict();
        $jQuery = jQuery;
    </script>
Also make sure you removed this section after adding it to menu.js.

Is there a demo site I can see?
0
 

Author Comment

by:onlineinnovations
Comment Utility
I did remove that yes.
See the link
http://demo.onlineinnovations.com/test
As you'll see lightbox works but the outlook style menu does not. (Accordian style)
Level 1 : black
Level 2 : grey
Level 3 : pink
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility
It appears the older version of Prototype you are using is causing conflicts.

There is also a newer version of lightbox2, might as well update everything
http://www.lokeshdhakar.com/projects/lightbox2/
0
 

Author Comment

by:onlineinnovations
Comment Utility
Sorted thanks
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now