Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Northants, UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript: Accordion & Lightbox conflict

    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/...ipt-accordions

    I am using the Lightbox 2.03 script.


    Any ideas? Thank you!

  • #2
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a try by removing the highlighted part from
    Code:
    <body onload="new Accordian('basic-accordian',5,'header_highlight');">
    and then commenting the
    Code:
    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
    Code:
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Northants, UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    tosbourn, IE debugger says 'Line 3974 Error: 'Null' is null or not an object.'

    Quote Originally Posted by abduraooft View Post
    Have a try by removing the highlighted part from
    Code:
    <body onload="new Accordian('basic-accordian',5,'header_highlight');">
    and then commenting the
    Code:
    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
    Code:
    <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.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <!--document.observe('dom:loaded', function () { new Lightbox(); });-->
    javascript comment is like
    Code:
    /*document.observe('dom:loaded', function () { new Lightbox(); });*/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Northants, UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    javascript comment is like
    Code:
    /*document.observe('dom:loaded', function () { new Lightbox(); });*/
    Oh, sorry.

    Thank you for the correction.

    Unfortunately, both scripts are still not working

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

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Last edited by abduraooft; 03-20-2009 at 01:46 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Northants, UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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.
    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!

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Is this what you're talking about?
    Could you get your lightbox work when you remove accordion?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Northants, UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Could you get your lightbox work when you remove accordion?
    Yes, the lightbox works when I remove accordion... and vice versa.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,141
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by abduraooft View Post
    Have a try by removing the highlighted part from
    Code:
    <body onload="new Accordian('basic-accordian',5,'header_highlight');">
    and then commenting the
    Code:
    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
    Code:
    <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.

  • #12
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Northants, UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •