PDA

View Full Version : :: DD Drop Down Panel - Expanded by default



bedsingar
09-14-2012, 12:14 PM
1) Script Title: :: DD Drop Down Panel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

3) Describe problem:
Hello I need to get this script to have the drop down expanded by default when the page innitially loads - I.E the user has to click "toggle" to hide the content.

I've already tried adding onload to the body to call the <body onload="togglepanelplus('down') ;"> function.

This gives the following error:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; HO32600; HO32501; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; HO32600)
Timestamp: Fri, 14 Sep 2012 12:13:19 UTC

Message: Object expected
Line: 24
Char: 1
Code: 0
URI: file:///U:/FBS/Transformation/Sharepoint/FM/Monopoly/complete/board.html


Does anybody know how to achieve this please?

Thanks

jscheuer1
09-14-2012, 02:30 PM
What's your panel instance? You need that. For example to toggle a panel you created with:


<script type="text/javascript">

var testpanel=new ddpanel({
ids: ["mypanel2", "mypanelcontent2", "mypaneltab2"], // id of main panel DIV, content DIV, and tab DIV
stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

</script>

You would do:


<body onload="testpanel.togglepanelplus('down');">

But since the panel also initializes onload, you probably need a timeout:


<body onload="setTimeout(function(){testpanel.togglepanelplus('down');}, 300);">

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

bedsingar
09-14-2012, 03:49 PM
Hi There,

I've not changed from the default panel id mypanel. I tried adding that but it hasn't had the desired effect. Here is the site code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>mon_board</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>

<link rel="stylesheet" type="text/css" href="javascript/dddropdownpanel.css" />

<script type="text/javascript" src="javascript/dddropdownpanel.js">

/***********************************************
* DD Drop Down Panel- (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
***********************************************/
</script>

</head>
<body onload="mypanel.togglepanelplus('down');">

<div id="mypanel" class="ddpanel">

<div id="mypanelcontent" class="ddpanelcontent">

<table width="100%" border="0">
<tr>
<td align="center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="mon_board" align="middle">
<param name="movie" value="mon_board.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mon_board.swf" width="550" height="400">
<param name="movie" value="mon_board.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></td>
<td align="center" valign="middle">&nbsp;</td>
</tr>
</table>

</div>

<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>Show/Hide Board</span></a>
</div>

</div>
<div>
<p>&nbsp;</p>
<iframe name="IFRM01" height ="800" width = "100%" src="pages/1.html" scrolling="yes" id="I1" border="0" frameborder="0"></iframe>
<p>&nbsp;</p>
</div>



</body>
</html>






What's your panel instance? You need that. For example to toggle a panel you created with:


<script type="text/javascript">

var testpanel=new ddpanel({
ids: ["mypanel2", "mypanelcontent2", "mypaneltab2"], // id of main panel DIV, content DIV, and tab DIV
stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

</script>

You would do:


<body onload="testpanel.togglepanelplus('down');">

But since the panel also initializes onload, you probably need a timeout:


<body onload="setTimeout(function(){testpanel.togglepanelplus('down');}, 300);">

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

jscheuer1
09-14-2012, 05:48 PM
<body onload="setTimeout(function(){defaultpanel.togglepanelplus('down');}, 300);">

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

bedsingar
09-17-2012, 08:06 AM
Thanks for your help, that worked perfectly :)

Josh