Log in

View Full Version : Drop Down Panel Script from Javascript kit


lasa2
09-03-2010, 03:01 PM
I've got two questions ( my test site: www.threefooter.com/dropdown )

1)
How to have the panel retract on mouse-out instead of click? (click to open mouseout to close)

2)
How to be able to place the panel lower on the page not on top? (example 100px from top)

This is what is in the jkpanel.js..
-------------------------------------------------------------------------


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

var jkpanel={
controltext: 'Added Content',
$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', 'closed')
$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', '140px', 500)

------------------------------------------------------------------------
Any help is greatly appreciated..

Lasa2
jscheuer1
09-04-2010, 07:41 AM
Well, it might be hard to integrate this into an actual layout - not impossible, just a bit tricky. With that in mind, try this page out:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Web Page</title>
<meta name="generator" content="Antenna 3">
<link rel="stylesheet" type="text/css" href="http://www.threefooter.com/dropdown/antenna.css" id="css">
<style type="text/css">.abs {position:absolute}</style>
<script type="text/javascript" src="http://www.threefooter.com/dropdown/antenna/auto.js"></script>

<script type="text/javascript" src="http://www.threefooter.com/dropdown/jquery-1.2.2.pack.js"></script>

<style type="text/css">
#putithere {
position: relative;
top: 100px;
height: 170px;
overflow: hidden;
}
#dropdownpanel{ /*Outermost Panel DIV*/

position: absolute;
width: 966px;
left: 50%;
margin-left:-483px;
top: 0;
visibility:hidden;
z-index:4;
}

#dropdownpanel .contentdiv{ /*Div containing Ajax content*/
background: black;
color: white;
padding: 10px;
}

#dropdownpanel .control{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: bold;
text-align: center;
background: transparent url("http://www.threefooter.com/dropdown/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}

</style>


<script type="text/javascript">/* src="jkpanel.js" */

/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com

var jkpanel={
controltext: 'Added Content',
$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, targ, at_end){
targ = targ || 'body';
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>');
if(at_end){jkpanel.$mainpanel.appendTo(targ);}else{jkpanel.$mainpanel.prependTo(targ);}
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', 'closed')
$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, target_element, at_end)
jkpanel.init('panelcontent.htm', '140px', 500, '#putithere')
</script>
</head>
<body class="global ctt">
<div class="ctr global" style="width:967px">
<div id="lays339jtizb">
</div>

<div id="lays425zbsfc">
<div id="panl425junoy" class="pnl hid abs" style="left:1px; top:0px; width:966px; height:293px;"></div>
<div id="text356trpvu" class="aut abs" style="left:26px; top:337px; width:200px; height:125px;">
<p>jkpanel.init(''panelcontent.htm', '200px', 500)</p> <p>&nbsp;</p> <p>z-index:1</p> <p>&nbsp;</p> <p>Need to be edited...</p>
</div>
</div>
<div id="putithere">

</div>
<div id="lays339ufftq">
<div id="vhtm339ibzqn" class="hid abs" style="left:0px; top:0px; width:966px; height:103px;"></div>
</div>
</div></body></html>
lasa2
09-04-2010, 10:56 AM
Thanks John very much appricated... I'll give it a run :)
Lasa2