Accordion Content & Lightbox problem

**rhodes** · 01-29-2009, 04:20 PM

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>

**Schmoopy** · 01-29-2009, 04:24 PM

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.

**rhodes** · 01-29-2009, 04:52 PM

Originally Posted by Schmoopy

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?

**jscheuer1** · 01-29-2009, 04:57 PM

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.

**rhodes** · 01-29-2009, 05:43 PM

Originally Posted by jscheuer1

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

**jscheuer1** · 01-29-2009, 06:59 PM

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.

**rhodes** · 01-30-2009, 04:33 AM

Thanks for ur suggestion. It works now

Thread: Accordion Content & Lightbox problem

Thread Tools

Search Thread

Accordion Content & Lightbox problem

Bookmarks

Bookmarks

Posting Permissions