:: 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/dynamici...pdownpanel.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:

Code:

<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:

Code:

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

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

Code:

<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:

HTML 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>

Originally Posted by jscheuer1

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

Code:

<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:

Code:

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

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

Code:

<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

Code:

<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.