Skip to main content

Using javascript within dcontainer

1 reply [Last post]
rrussell339
Offline
Joined: 2007-12-30
Points: 0

I am new to using jMaki. I'm trying to develop a simple PHP site using the accordion widget to select pages to display in the dcontainer widget. Within one of the pages displayed in the dcontainer I have been trying to use the Animated Collapsible DIV from Dynamic Drive (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm) within the PHP page.

When I load the page into the container it appears to load correctly, except the animation does not work. According to the Firefox error console the javascript functions (collapse1(), collapse2(), etc.) are not defined. As a test page I'm using the example from the dynamic drive web site (see link above).

Below is the page I'm trying to load. Note, I've moved the load of animatedcollapse.js to my index.php page with no luck. Is there something basic I'm missing? Any help would be greatly appreciated.

Bob

Source for PHP file:

/***********************************************
* Animated Collapsible DIV- (C) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

Example 1:

Slide Down || Slide Up

Content inside DIV!
Note: CSS height attribute defined

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 1000, false)

Example 2:

Show/ Hide DIV

Content inside DIV!
Content inside DIV!
Note: No CSS height attribute defined. Persistence enabled.

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

Example 3:

Slide Down || Slide Up

Content inside DIV!
Note: DIV set not to collapse initially. Note that if "enablepersist" is enabled, cookie value overrides this setting.

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse3=new animatedcollapse("fish", 1000, false, "block")

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
rrussell339
Offline
Joined: 2007-12-30
Points: 0

I have found the answer. I needed to add "iframe : true" to my item definition.

addWidget( array(
"name" => "jmaki.dcontainer",
"subscribe" => "/jmaki/main",
"value" => "{
items : [
{ id : 'collapse_test', include : 'collapsable.php', [b]iframe : true, [/b]lazyLoad : true}
]
}"
) );

Bob