[Javascript] Open / Close Div help needed

[karma]

Hey all,

I am currently implementing this http://javascriptkit.com/script/script2/dropdownpanel.shtml into a new site im doing but am having a tiny niggle with it. the code will open a little dropdown div from the top of the page and works fantastically well but..... it closes on any click to the whole div.

I am looking to add a form into the dropdown but am unable to do so as any click within the area closes the dropdown.

Can anybody shed some light on how to stop this from happening and simply have it close when the button is clicked instead?

Thanks in advance

[XgD]

try commenting out the line (by putting // at the start)

jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})

in jkpanel.js

[karma]

Thank you for your reply. This makes it so that it doesnt drop down at all.

[azcodemonkey]

The script is designed to toggle on click, although it should only be for the panel itself, and not its containing elements, so you should be able to click a link or a button. You could modify jkpanel.js to split the open/close functionality; perhaps open to onmouseover and close to onmouseout, or some variation of mouse events.

[obasi]

Hello, Change the jkpanel.js file to this and it will be how you want it. Do have a good one. Send use a link to your site when you have completed it.

//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com

var jkpanel={
	controltext: 'Panel Content',
	$mainpanel: null, contentdivheight: 0,
	$controlstick: null,

	openclose:function($, speed){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closedmainpanel.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		jkpanel.$controlstick=jkpanel.$mainpanel.find('.control		var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor})
			$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+'pxisibility:'visible'}).attr('openstate', 'closed')
					$controldiv.css({cursor:'handursor:'pointer'})
			})
			jkpanel.$controlstick.click(function(){jkpanel.openclose($, speed)})
		})
	}
}

//Initialize script: jkpanel.init('path_to_content_fileheight of content DIV in px', animation_duration)
jkpanel.init('panelcontent.htm200px', 500)

[+Nik Louch Subscriber²]

The way above seems a bit OTT to me.

In the original jkpanel.js simply replace

jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})

with

$controldiv.click(function(){jkpanel.openclosepanel($, speed); return})

[obasi]

a lot easier than my three lines.

[+Nik Louch Subscriber²]

Well, I guess 1 line < 3 lines. I utilised existing code within the code given.

[karma]

Thank you very much. It is now working perfectly. Neowin is full of really great people.

[+Nik Louch Subscriber²]

And more importantly, options. Getting 2 results is better than any 1 result!

[icon22]

Hi all

Is it just me or does the script make all other links on the page below the panel react on this funktion and thereby disable their original purpos (the normal links)?

Like here: www.icon22.com/drop

Thanks

Jan

[si.romin]

I am also using jkpanel and I am very happy with the results so far.

However, I am looking for some help - I want to set it so that wherever I click on the page, it will close the current panel. For example, the user opens the panel, but to hide it they can click anywhere on the page, rather than having to click inside the panel.

I hope someone out there can help me! Many thanks,

Si