Solved

JQuery and Prototype (lightbox) conflict

Posted on 2008-10-14
12
7,148 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
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to use IFS to get output of range in comma separator in bash? 2 42
Session on Html 8 37
Jquery if else not working ... WHY? 5 23
AngularJS: ng-repeat 25 19
This article will show, step by step, how to integrate R code into a R Sweave document
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

685 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