• 0

[Javascript] Open / Close Div help needed


Question

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

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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.

Link to comment
Share on other sites

  • 0

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')=='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')
			jkpanel.$controlstick=jkpanel.$mainpanel.find('.control')
			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', 'closed')
					$controldiv.css({cursor:'hand', cursor:'pointer'})
			})
			jkpanel.$controlstick.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', '200px', 500)

Link to comment
Share on other sites

  • 0

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})

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

This topic is now closed to further replies.