Results 1 to 2 of 2

Thread: Javascript Drop Down Panel problem. Help.

  1. #1
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Javascript Drop Down Panel problem. Help.

    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/scri...ownpanel.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:

    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!

  2. #2
    Join Date
    Feb 2013
    Location
    Eastern, Kentucky
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    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?

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

Similar Threads

  1. DD Drop Down Panel - IE Problem
    By drmeisner in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-23-2011, 01:18 AM
  2. Drop Down Panel Script from Javascript kit
    By lasa2 in forum JavaScript
    Replies: 2
    Last Post: 09-04-2010, 10:56 AM
  3. Problem with Drop Down Panel
    By trend in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-22-2010, 01:48 PM
  4. Resolved drop down panel customization problem in IE
    By davelf in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-06-2010, 10:20 AM
  5. Problem with DD drop down panel script
    By malt in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-09-2008, 05:22 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •