Solved

JQuery and Prototype (lightbox) conflict

Posted on 2008-10-14
12
7,151 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 14

Expert Comment

by:ziffgone
ID: 22716740
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
ID: 22717713
You are calling jQuery.noConflict() at the wrong time.
Replace $jQuery = jQuery.noConflict(); with $jQuery = jQuery;
0
 

Author Comment

by:onlineinnovations
ID: 22718670
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:onlineinnovations
ID: 22718762
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
ID: 22719301
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
ID: 22719464
Put $jQuery = jQuery; into menu.js
0
 

Author Comment

by:onlineinnovations
ID: 22719503
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
ID: 22719677
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
ID: 22719681
<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
ID: 22719788
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
ID: 22720114
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
ID: 22720219
Sorted thanks
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

739 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