Results 1 to 7 of 7

Thread: Accordion Content & Lightbox problem

  1. #1
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion Content & Lightbox problem

    1) Script Title:
    Accordion Content script (v1.6) and Lightbox image viewer 2.03a

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...daccordion.htm
    http://www.dynamicdrive.com/dynamici...box2/index.htm

    3) Describe problem:
    I would like to use 2 scripts (Accordion Content & Lightbox) in the same HTML file and the result is the lightbox working but the accordion does not..

    I have follow the steps from this Thread but it still on the same problem..

    Please advice how to make it happen.

    --------------------------------------------------

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    
    <script type="text/javascript" src="ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    
    <style type="text/css">
    
    .mypets{ /*header of 1st demo*/
    cursor: hand;
    cursor: pointer;
    padding: 2px 5px;
    border: 1px solid gray;
    background: #E1E1E1;
    }
    
    .openpet{ /*class added to contents of 1st demo when they are open*/
    background: yellow;
    }
    
    .technology{ /*header of 2nd demo*/
    cursor: hand;
    cursor: pointer;
    font: bold 14px Verdana;
    margin: 10px 0;
    }
    
    
    .openlanguage{ /*class added to contents of 2nd demo when they are open*/
    color: green;
    }
    
    .closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
    color: red;
    }
    
    </style>
    
    <script type="text/javascript">
    
    //Initialize first demo:
    ddaccordion.init({
    	headerclass: "mypets", //Shared CSS class name of headers group
    	contentclass: "thepet", //Shared CSS class name of contents group
    	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    //Initialize 2nd demo:
    ddaccordion.init({
    	headerclass: "technology", //Shared CSS class name of headers group
    	contentclass: "thelanguage", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: false, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    </script>
    
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    </head>
    
    <body>
    
    <a href="#" onClick="ddaccordion.collapseall('technology'); return false">Collapse all</a>  | <a href="#" onClick="ddaccordion.expandall('technology'); return false">Expand all</a>
    
    
    <div class="technology">What is JavaScript?</div>
    <div class="thelanguage">
    
    <a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>
    
    JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>
    
    <div class="technology">Difference betwen Java & JavaScript?</div>
    <div class="thelanguage">
    Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
    </div>
    
    <div class="technology">What is Ajax?</div>
    <div class="thelanguage">
    Ajax is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.
    </div>
    
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    
    </body>
    </html>
    Last edited by rhodes; 01-29-2009 at 04:36 PM.

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Firstly, have you made the alterations that ddadmin advised you to make in the last thread?

    Secondly, please put any code in [code] tags, it's a button that looks like this : #. It makes it much easier to read and doesn't take up so much space on the page.

  3. #3
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Schmoopy View Post
    Firstly, have you made the alterations that ddadmin advised you to make in the last thread?
    already.. I replace all $ into $j in file ddaccordion.js and put at the top
    Code:
    var $j = jQuery.noConflict()
    did i overlook something?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Having two DOCTYPES and two opening <html> tags can't be helping, but oddly might not be the problem, fix that. If you want more help:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Please post a link to the page on your site that contains the problematic code so we can check it out.
    here is the link BetaTest

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You have an init on the page for mypets, but no markup for it. But once again, that's not the only problem. And I've seen this before, a rather cryptic error:

    Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://www.inselcom.web.id/BetaTest/...-1.2.6.pack.js :: anonymous :: line 11" data: no]
    Source File: http://www.inselcom.web.id/BetaTest/...-1.2.6.pack.js
    Line: 11
    I tracked it down as far as I could one time, it appears to be a conflict with scriptaculous or effects and another of the jQuery library's core variables, perhaps $$. But I'm not sure, and I couldn't find the exact cause, let alone a resolution for it.

    Here's what I would suggest, since jQuery and the support scripts for Lightbox other than prototype.js appear to be the problem, why not use a lightbox made for jQuery? I'd suggest:

    http://plugins.jquery.com/project/jquerylightbox_bal

    demo:

    http://www.balupton.com/sandbox/jquery_lightbox/

    It uses the same version of jQuery as accordion, so there should be no conflict, and no need to use the altered ddaccordion.js script. Just be sure to only link jQuery to the page once, because linking it twice might (probably will) cause problems.
    Last edited by jscheuer1; 01-29-2009 at 07:08 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for ur suggestion. It works now

Bookmarks

Posting Permissions

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