onlineinnovations
asked on
JQuery and Prototype (lightbox) conflict
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.pac
<script language="javascript">
$jQuery = jQuery.noConflict();
</script>
<script src="menu/menu.js" type="text/javascript"></s
<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/lightbo
<script src="lightbox/js/prototype
<script src="lightbox/js/scriptacu
<script src="lightbox/js/lightbox.
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
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.pac
<script language="javascript">
$jQuery = jQuery.noConflict();
</script>
<script src="menu/menu.js" type="text/javascript"></s
<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/lightbo
<script src="lightbox/js/prototype
<script src="lightbox/js/scriptacu
<script src="lightbox/js/lightbox.
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
You are calling jQuery.noConflict() at the wrong time.
Replace $jQuery = jQuery.noConflict(); with $jQuery = jQuery;
Replace $jQuery = jQuery.noConflict(); with $jQuery = jQuery;
ASKER
Ok I've replaced $jQuery = jQuery.noConflict(); with $jQuery = jQuery;
<script src="menu/jquery-1.2.6.pac
<script language="javascript">
$jQuery = jQuery;
</script>
<script src="menu/menu.js" type="text/javascript"></s
<link rel="stylesheet" type="text/css" href="menu/style.css" />
<link rel="stylesheet" href="lightbox/css/lightbo
<script src="lightbox/js/prototype
<script src="lightbox/js/scriptacu
<script src="lightbox/js/lightbox.
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">
<script src="menu/jquery-1.2.6.pac
<script language="javascript">
$jQuery = jQuery;
</script>
<script src="menu/menu.js" type="text/javascript"></s
<link rel="stylesheet" type="text/css" href="menu/style.css" />
<link rel="stylesheet" href="lightbox/css/lightbo
<script src="lightbox/js/prototype
<script src="lightbox/js/scriptacu
<script src="lightbox/js/lightbox.
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">
ASKER
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.getComputed
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
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.getComputed
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>
If possible, can you provide the code for menu.js?
Are you sure that menu.js only makes use of $jQuery?
Are you sure that menu.js only makes use of $jQuery?
Put $jQuery = jQuery; into menu.js
ASKER
Putting it into menu.js makes no difference.
Here is menu.js
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();});
I used your files and was unable to reproduce the problem. Works here.
<script src="js/scriptaculous.js?l
<script src="js/scriptaculous.js?l
<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?
//$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?
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorted thanks
http://leandrovieira.com/projects/jquery/lightbox/