Javascript Drop Down Panel problem. Help.

[Hazeroth]

Hello everyone,

I joined this forum (which I found very useful) because I need to resolve a little problem regarding a JavaScript DropdownPanel that I found at Javascriptkit.com which can be found here: http://javascriptkit.com/script/script2/dropdownpanel.shtml

The drop down Panel adds a pull down panel to the top of a page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. But the problem is that clicking anywhere on the panel again closes it, and I don't want that action to happen, I just want it to close when the Panel button is clicked.

Here's the JavaScript Code:




var jkpanel={
controltext: 'OPEN TAB',
$mainpanel: null, contentdivheight: 0,

openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},

init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'open')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}

//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('panelcontent.htm', '400px', 500)


I need to find out how to do it, thanks in advance!

[Deleted]

The drop down Panel adds a pull down panel to the top of a page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. But the problem is that clicking anywhere on the panel again closes it, and I don't want that action to happen, I just want it to close when the Panel button is clicked.

Here's the JavaScript Code:




var jkpanel={
controltext: 'OPEN TAB',
$mainpanel: null, contentdivheight: 0,

openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},

init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'open')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}

//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('panelcontent.htm', '400px', 500)


I need to find out how to do it, thanks in advance![/QUOTE]


Why does the JavaScript do this?


if (this.$mainpanel.attr('openstate')=='closed') // Closed?
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'}) // Then Open?
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'}) // Then Closed again?