Solved

JQuery and Prototype (lightbox) conflict

Posted on 2008-10-14
12
7,134 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
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 …

776 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