...

View Full Version : Javascript: Accordion & Lightbox conflict



mlynnc
03-20-2009, 09:50 AM
Hi,

I am currently working on an online portfolio.

http://mportfolio.110mb.com

I have an accordion script and a lightbox script. Individually, I know these scripts both work. Together, the accordion works - the lightbox doesn't.

I got the accordion script from here: http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions

I am using the Lightbox 2.03 script.


Any ideas? Thank you! :thumbsup:

tosbourn
03-20-2009, 10:18 AM
Do you have any JavaScript debuggers? If so are they reporting anything? IE7 has an option to display JavaScript errors as they appear and ask you to debug, many times I have found that even the small error it originally produces is enough to get me in the right direction.

abduraooft
03-20-2009, 10:22 AM
Have a try by removing the highlighted part from
<body onload="new Accordian('basic-accordian',5,'header_highlight');"> and then commenting the
document.observe('dom:loaded', function () { new Lightbox(); }); part from your http://mportfolio.110mb.com/js/lightbox.js

After that add a script element inside your <head> tag like

<script type="text/javascript" >
window.onload=function(){
new Lightbox();
new Accordian('basic-accordian',5,'header_highlight');
}
</script>
Your ultimate aim is to prevent overriding of window.onload event handlers.

mlynnc
03-20-2009, 12:26 PM
tosbourn, IE debugger says 'Line 3974 Error: 'Null' is null or not an object.'


Have a try by removing the highlighted part from
<body onload="new Accordian('basic-accordian',5,'header_highlight');"> and then commenting the
document.observe('dom:loaded', function () { new Lightbox(); }); part from your http://mportfolio.110mb.com/js/lightbox.js

After that add a script element inside your <head> tag like

<script type="text/javascript" >
window.onload=function(){
new Lightbox();
new Accordian('basic-accordian',5,'header_highlight');
}
</script>
Your ultimate aim is to prevent overriding of window.onload event handlers.

Thanks for your help abduraooft!

I'm pretty sure I followed your directions carefully.

http://mportfolio.110mb.com/test

The Accordion script is no longer working. The Lightbox script is still not working. :(

abduraooft
03-20-2009, 12:55 PM
<!--document.observe('dom:loaded', function () { new Lightbox(); });-->
javascript comment is like

/*document.observe('dom:loaded', function () { new Lightbox(); });*/

mlynnc
03-20-2009, 01:34 PM
javascript comment is like

/*document.observe('dom:loaded', function () { new Lightbox(); });*/

Oh, sorry.

Thank you for the correction.

Unfortunately, both scripts are still not working :confused:

http://mportfolio.110mb.com/test

abduraooft
03-20-2009, 01:44 PM
Where is your rel attribute added for the lightbox links?

btw, it's always a good practice to validate your markup, when using complex javascript libraries. See the errors in your current markup (http://validator.w3.org/check?uri=http%3A%2F%2Fmportfolio.110mb.com%2Ftest&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606).

mlynnc
03-20-2009, 03:07 PM
Where is your rel attribute added for the lightbox links?

btw, it's always a good practice to validate your markup, when using complex javascript libraries. See the errors in your current markup (http://validator.w3.org/check?uri=http%3A%2F%2Fmportfolio.110mb.com%2Ftest&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606).

Thank you for your help and patience.


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Is this what you're talking about?


As you can tell, I'm not very good with javascript yet. Thanks again for your help!

abduraooft
03-20-2009, 03:18 PM
Is this what you're talking about?
Could you get your lightbox work when you remove accordion?

mlynnc
03-20-2009, 03:54 PM
Could you get your lightbox work when you remove accordion?

Yes, the lightbox works when I remove accordion... and vice versa.

Philip M
03-20-2009, 04:34 PM
Have a try by removing the highlighted part from
<body onload="new Accordian('basic-accordian',5,'header_highlight');"> and then commenting the
document.observe('dom:loaded', function () { new Lightbox(); }); part from your http://mportfolio.110mb.com/js/lightbox.js

After that add a script element inside your <head> tag like

<script type="text/javascript" >
window.onload=function(){
new Lightbox();
new Accordian('basic-accordian',5,'header_highlight');
}
</script>
Your ultimate aim is to prevent overriding of window.onload event handlers.

Try this excellent advice again, but this time spell accordion correctly.

mlynnc
03-20-2009, 05:36 PM
Try this excellent advice again, but this time spell accordion correctly.

Thanks, I have corrected all of the spelling errors.

http://mportfolio.110mb.com/test

Still no luck!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum