Action sur panneau Javascript type DropDown à partir du formulaire inséré dedans

Bon bah finalement, avec quelques recherches sur le "jkpanel" sur Google, j'suis tombé sur un forum Anglais qui m'a mis sur la voie, du coup mon prob' est résolu.

Pour les intéressés, voilà le code correspondant, et quand mon portfolio sera mis en ligne, je publierais le lien pour vous permettre de voir la démo.

Note : le code publié ci-dessous corrige les bugs exposés plus bas.

CSS : (bloc concernant uniquement les div qui composent le panneau tombant)

#dropDownPanel { /* Div haute du panneau */
position:absolute;
width:100%;
left:0;
top:0;
visibility:hidden;
z-index:5;
}

#dropDownPanel .contentdiv{ /* Div contenant le contenu AJAX */
background:url('../PNG/black_bg.png');
padding:20px;
}

JavaScript (jkpanel.js, fonction permettant l'animation de déploiement/repli du panneau tombant) :

var jkpanel={
$mainpanel: null, contentdivheight: 0,

openclose:function($, speed){
this.$mainpanel.stop()
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>').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)})
})
}
}
// Script d'initialisation, transmettant à la fonction init les paramètres suivants : fichier à charger, hauteur du panneau déployé, durée de l'animation de déploiement et de repli.
jkpanel.init('../PHP/admin_access.php', '80px', 500)

JavaScript (functions.js, fonction permettant le contrôle du formulaire ainsi que la gestion des réactions du panneau) :
function verif() {
if((document.getElementById('login').value == "") && (document.getElementById('pass').value == "")) {
alert ("Renseignez le formulaire.");
jkpanel.openclose();
return false;
}
else if(document.getElementById('login').value == "") {
alert ("Renseignez votre login !");
jkpanel.openclose();
return false;
}
else if(document.getElementById('pass').value == "") {
alert ("Renseignez votre mot de passe !");
jkpanel.openclose();
return false;
}
}
// L'instruction jkpanel.openclose(); permet de garder le panneau déployé en cas d'échec d'identification (identifiants eronnés, absence du mot de passe ou du login ou des deux)

PHP (fichier contenant le formulaire de connexion) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
</head>
<body>
<div class="center">
<form name="form_admin" id="form_admin" method="post" action="back_office.php" onsubmit="return verif(); jkpanel.openclose()">
<label>Login administrateur :</label> <input name="login" id="login" type="text" size="20" onclick="jkpanel.openclose()"/>
<label>Mot de passe :</label> <input name="pass" id="pass" type="password" size="20" onclick="jkpanel.openclose()"/>
<br/><br/>
<input type="submit" value="Valider"> <input type="reset" value="Annuler">
</form>
</div>
</body>
</html>
// L'instruction jkpanel.openclose(); permet de garder le panneau déployé en cas de clic sur les champs de saisies. Elle conserve également le panneau déployé après le passage de la fonction de contrôle du formulaire.
Autrement dit, dans tous les cas (échec ou réussite), le formulaire restera visible, mais en cas de réussite, nous passons au fichier contenant l'administration, donc le panneau n'apparaitra plus sur index.php (fichier de départ) quand on y retournera.

Observation :
En l'occurence et parce que je n'en avais pas besoin, j'ai supprimé une 3ème div nommée "controldiv". Elle n'apparaît donc plus dans mon CSS ni dans le code JavaScript. Cette div servait initialement à contenir une image, un texte ou autre qui serve de bouton sur lequel cliquer pour tirer le panneau vers le bas. Tout le panneau était invisible à l'écran, excepté cette dite div, figurant un bouton en haut de la page.

Bugs :
Dans mon cas, j'insère un formulaire d'accès admin' dans le panneau. Soucis : sur le moindre clic dans le panneau, il se repliait. Plusieurs choses étaient donc impossibles :
- saisie des informations de connexion. Un clic sur les champs de textes dans le but d'y saisir les identifiants faisait replier le panneau.
- validation d'informations eronnées. Si on admet que l'utilisateur saisit de mauvais identifiants et clique sur "Valider", le panneau l'avertissait de son erreur mais se repliait également. Gênant car nécessite le redéploiement dudit panneau pour refaire un essai de connexion.

Bonne chance à ceux qui souhaiteraient utiliser cette fonction, si vous avez des questions, n'hésitez pas ;)

Bonne journée à tous !

Alexandre