Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery and Prototype (lightbox) conflict

Posted on 2008-10-14
12
Medium Priority
?
7,179 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 2000 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

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!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
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.

688 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