PDA

View Full Version : Drop Down Help Needed



evan5
07-04-2009, 02:03 AM
DD Drop Down Panel

http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

Hey guys, I have this drop down menu implemented on my website. My question is, is it possible to add another tab to it? I looked through the script, but I am not experienced enough to figure this it. If anyone has any insight, please let me know, would really appretiate it. :)

ddadmin
07-04-2009, 03:39 PM
By another tab, do you mean two drop down panels on the same page?

evan5
07-05-2009, 12:48 AM
hey,
well if you go to that link.. there is a tab saying "toggle". is it possible to have another tab attached to the top, "toggle2" containing different info?

evan5
07-05-2009, 12:51 AM
In the script it says
"where "defaultpanel" should be an arbitrary but unique variable to reference the current Drop Down Panel instance. If you're defining more than one Drop Down Panel, this variable must be unique in each case."

So i am figuring that you can have more panels, tabs, or whatever you want to call them, sticking out?

ddadmin
07-07-2009, 01:42 AM
The script does support multiple copies of itself, which as you've mentioned simply requires that you give each Drop Down Panel and its various controls (3 of them) unique IDs in each case, and call the init() function on each instance. For example, here's what your initialization code (at the bottom of the .js file) would look like for 2 instances of the panels:


var defaultpanel=new ddpanel({
ids: ["mypanel", "mypanelcontent", "mypaneltab"], // 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?
})

var defaultpanel2=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?
})

The corresponding HTML looks like this:


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

<p style="padding:10px">
<img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" />The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: <a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white">Wikipedia</a>.
</p>
<br style="clear: left" />
<p>Note: Click on any link or the Milky Way Image auto closes the panel.</p>

</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>Toggle</span></a>
</div>

</div>

<br style="break:both" /><br style="break:both" />

<div id="mypanel2" class="ddpanel">
<div id="mypanelcontent2" class="ddpanelcontent">

<p style="padding:10px">
<img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" />The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: <a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white">Wikipedia</a>.
</p>
<br style="clear: left" />
<p>Note: Click on any link or the Milky Way Image auto closes the panel.</p>

</div>
<div id="mypaneltab2" class="ddpaneltab">
<a href="#"><span>Toggle</span></a>
</div>

</div>