I'm building a login page for my website to get into the admin side of it. I've programmed a pop-up layer to appear and then you can drag it all over the screen and stuff. When you type in the username and password the pop-up layer goes invisible and nothing happens. Well if you do it once more then you will be able to login in. Weird, I don't know why it does that and I have lots of code and include files and so I'll try and show everyone the code I think matters.
First, the layer include file which is the pop-up login console:
<!-- Beginning of Layers-->
<div id="loginWin" class="drag">
<TABLE WIDTH=250 height="337" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3 width="250" height="44"><IMG SRC="images/sign-in_01.jpg" WIDTH=250 HEIGHT=44></TD>
</TR>
<TR>
<TD WIDTH="43" HEIGHT="293" ROWSPAN=2><IMG SRC="images/sign-in_02.jpg" WIDTH="43" HEIGHT="293"></TD>
<TD width="163" height="248" valign="top" bgcolor="#cec59b">
<form action="<?php echo $PHP_SELF ?>" method="post" name="checkLogin">
<p>
<font color="#504c42" size="2" face="Arial, Helvetica, sans-serif">
<strong><br>Username: </strong>
</font>
<input name="userID" type="text" id="userID" size="22" value="<?PHP echo $status ?>">
<br><br>
<strong>
<font color="#504c42" size="2" face="Arial, Helvetica, sans-serif">Password:</font>
</strong>
<input name="passWord" type="password" id="passWord" size="22">
</p>
<p align="center">
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset">
</p>
</form>
<p align="center"><br><br>
<img src="images/closeWindow.jpg" width="70" height="17" border="0" usemap="#close">
</p>
</TD>
<TD ROWSPAN=2 WIDTH=44 HEIGHT=293><IMG SRC="images/sign-in_04.jpg" WIDTH=44 HEIGHT=293></TD>
</TR>
<TR>
<TD WIDTH=163 HEIGHT=45><IMG SRC="images/sign-in_05.jpg" WIDTH=163 HEIGHT=45></TD>
</TR>
</TABLE>
<map name="close" id="close">
<area shape="rect" coords="-1,0,70,18" href="javascript:showLayer('loginWin');">
</map>
</div>
<!-- End of layer -->
Second, my code that I use to check the database and stuff:
<?PHP
//Connecting to database
include ("connectDB.php");
$status = "Log in Please";
if ($userID != "" && $passWord != ""){
function login($userID, $passWord) {
$conn = db_connect();
$result = mysql_query("SELECT * FROM login WHERE username='$userID' and password='$passWord'");
if(!$result)
return("Query could not be executed"); // if query error
if(mysql_num_rows($result)>0) {
// if the values match values in the database
return("true");
} else {
$status = "INVALID--TRY AGAIN";
}
}
}
if ($userID != "" && $passWord != ""){
// now check the values received via the form
$result = login($userID, $passWord);
if($result == "true") {
// set //
setcookie("siteuser", $userID ,time()+3600);
setcookie("password", $passWord ,time()+3600);
// check //
if(isset($COOKIE['siteuser']) && ($COOKIE['password']))
{
$userID=$COOKIE['siteuser'];
$passWord=$COOKIE['password'];
Header("Location: projLeads.php");
}
} else {
print($result);
}
}
?>
Basically what I'd like to happen is this:
Click the log-in button and a pop-up layer shows up. You can drag it just like a browser window. You enter your login information and if it fails the username window will display the failure message. If you succeed you then move to the admin section.
This is the the drag layer code:
//drag layer functions
var ie=document.all
var ns6=document.getElementById&&!document.all
var dragapproved=false
var z,x,y
function move(e)
{
if (dragapproved)
{
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}
function drags(e)
{
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.className!="drag")
{
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.className=="drag")
{
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-----------------end of drag layer functions----------------
//Some needed Global variables
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
// N4 = false;
// N6 = false;
// IE = false;
if ((browser == "Netscape") && (browserNum < 5))
{
//Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
//N4 = true;
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
//Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
//N6 = true;
}
else
{
//Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
//IE = true;
}
//create way to remember which layer is visible
oldLayer = "none";
function showLayer(layerName)
{
//show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
//hide the layer
if (oldLayer != "none")
{
eval(layerRef + oldLayer + endLayerRef + styleRef + ".visibility = 'hidden'");
}
if (oldLayer == layerName)
{
oldLayer = "none";
}
else
{
oldLayer = layerName;
}
}
I don't think the solution will be easy to find. But then you never know? If you would like to test the code live go to: www.shabangweb.com and try to log-in.
