New Topic/Question
Reply
I have a div (loginP within loginDiv) for loging in. after the user logs in, the innerHtml of loginP changes via Asp.net. I also use jquery to let the user of the site move the loginDiv (that contains the loginP) up and down, maybe that matters.
here is the normal html part of the code:
<div id="loginDiv" runat="server">
<div id="loginP" runat="server">
username:<br />
<asp:TextBox runat="server" ID="user" Rows="1" class="textboxL" /><br />
password:<br />
<asp:TextBox TextMode="Password" runat="server" ID="pass" Rows="1" class="textboxL" /><br />
<div id="bottomDiv">
<asp:Button ID="RegiButton" runat="server" UseSubmitbehavior="false" CssClass="buttonC"
Text="Register" onclick="RegisterBtnClick" />
<asp:Button ID="LogButton" runat="server" UseSubmitbehavior="true" CssClass="buttonC"
Text="Login" onclick="LoginBtnClick" /><br />
<asp:CheckBox runat="server" ID="rememberME" />
<p id="rememberMe">
<font size="1" face="verdana">remember me</font>
</p>
<asp:Label Width="180px" Height="40px" Visible="true" runat="server" Text="" ID="errorLabel" />
</div>
</div>
</div>
here is the jquery part
var ldiv = $("#loginDiv");
ldiv.offset({ top: 10 });
var drag = { y: 0, state: false };
var delta = { y: 0 };
$("#user").mousedown(function () {
drag.state = false;
$("#user").focus()
});
$("#pass").mousedown(function () {
drag.state = false;
$("#pass").focus()
});
//$("#LogOutBtn").mousedown(function () {
// drag.state = false;
// return false;
//});
$(document).ready(function () {
$("#LogOutBtn").click(function () {
$.ajax({
type: "POST",
url: "sMaster.Master/LogoutBtnClick",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
});
});
});
ldiv.mousedown(function (e) {
if (!drag.state == true) {
drag.y = e.pageY;
drag.state = true;
}
return false;
});
$(document).mousemove(function (e) {
if (drag.state == true) {
delta.y = e.pageY - drag.y;
var cur_offset = $("#loginDiv").offset();
if (ldiv.cssNumber("top") + $("#loginP").cssNumber("padding-top") + delta.y > -40 && ldiv.cssNumber("top") + $("#loginP").cssNumber("padding-top") + $("#loginP").cssNumber("height") + delta.y + 60 < $(window).height()) {
if ($(window).width() >= 1305) {
$("#loginDiv").offset({ top: (cur_offset.top + delta.y) });
drag.y = e.pageY;
}
}
}
});
$(document).mouseup(function () {
drag.state = false;
});
$("#user").mousedown(function () {
drag.state = false;
$("#user").focus()
});
$("#pass").mousedown(function () {
drag.state = false;
$("#pass").focus()
});
and there is also this part of the jQuery code that moves the loginDiv when the window is too small:
$(document).ready(function () {
var dLeft = $("#greenPart").width();
dLeft += ($(window).width() - $("#greenPart").width()) / 2;
dLeft += 10;
$("#loginDiv").css("marginLeft", dLeft);
var he = $(window).height() * 2;
$("#loginDiv").css({ "height": he + "px" });
he = -($(window).height());
$("#loginDiv").css({ "top": he + "px" });
he = $(window).height();
$("#loginP").css({ "padding-top": he + "px" });
if ($(window).width() < 1305) {
$("#loginDiv").offset({ top: 10 });
$("#loginDiv").css({ "height": 120 + "px" });
$("#loginP").css({ "padding-top": 0 + "px" });
var dLeft = $("#greenPart").width();
dLeft += ($(window).width() - $("#greenPart").width()) / 2;
dLeft -= (20 + $("#loginP").width());
$("#loginDiv").css("marginLeft", dLeft - 100);
$("#lines").height("20px");
$("#lines").width("100px");
$("#bottomDiv").css("marginLeft", 165);
$("#bottomDiv").css("marginTop", -90);
$("#bottomDiv").css("width", 70);
$("#hello").css("font-weight", "bold");
$("#hello").css("color", "White");
}
return false;
});
$(window).resize(function () {
var dLeft = $("#greenPart").width();
dLeft += ($(window).width() - $("#greenPart").width()) / 2;
dLeft += 10;
$("#loginDiv").css("marginLeft", dLeft);
var he = $(window).height() * 2;
$("#loginDiv").css({ "height": he + "px" });
he = -($(window).height());
$("#loginDiv").css({ "top": he + "px" });
he = $(window).height();
$("#loginP").css({ "padding-top": he + "px" });
$("#bottomDiv").css("marginLeft", 0);
$("#bottomDiv").css("marginTop", 0);
$("#bottomDiv").css("width", 170);
$("#hello").css("font-weight", "normal");
$("#hello").css("color", "Black");
$("#loginP").css("padding-left", 0);
if ($(window).width() < 1305) {
$("#loginDiv").offset({ top: 10 });
$("#loginDiv").css({ "height": 120 + "px" });
$("#loginP").css({ "padding-top": 0 + "px" });
var dLeft = $("#greenPart").width();
dLeft += ($(window).width() - $("#greenPart").width()) / 2;
dLeft -= (20 + $("#loginP").width());
$("#loginDiv").css("marginLeft", dLeft - 100);
$("#lines").height("20px");
$("#lines").width("100px");
$("#bottomDiv").css("marginLeft", 165);
$("#bottomDiv").css("marginTop", -90);
$("#bottomDiv").css("width", 70);
$("#loginDiv").css("paddingLeft", 0);
if ($("#hello").length != 0) {
$("#hello").css("font-weight", "bold");
$("#hello").css("color", "White");
$("#loginP").css("padding-left", 120);
}
}
return false;
});
and the Asp.net part, the changeLoginDiv() changes the div and creates the problem:
protected void LoginBtnClick(object sender, EventArgs e)
{
string username = user.Text;
string password = pass.Text;
if (username != "" && username != null)
{
if (password != "" && password != null)
{
if (db.IsExist("SELECT * FROM users WHERE username='" + username + "'"))
{
if (db.IsExist("SELECT * FROM users WHERE [password]='" + password + "'"))
{
errorLabel.Text = "Loged in successfully.";
if (rememberME.Checked == true)
{
Response.Cookies["userInfo"]["username"] = username;
Response.Cookies["userInfo"]["lastVisit"] = DateTime.Now.ToString();
Response.Cookies["userInfo"].Expires = DateTime.Now.AddDays(365);
}
else
{
Session["username"] = username;
}
changeLoginDiv();
}
else errorLabel.Text = "Wrong password.";
}
else errorLabel.Text = "The username doesn't exist. \n\n\nIf you don't have a user, please register.";
}
else errorLabel.Text = "Please enter a password";
}
else errorLabel.Text = "Please enter a user name";
}
protected void LogoutBtnClick(object sender, EventArgs e)
{
Session["username"] = "";
Response.Cookies["userifnfo"]["username"] = "";
Response.Redirect(Request.RawUrl);
}
protected void MyProfileBtnClick(object sender, EventArgs e)
{
}
public void changeLoginDiv()
{
string sessionST = (string)Session["username"];
string cookiesST = (string)Request.Cookies["userifnfo"]["username"];
if ((sessionST != null && sessionST != ""))
{
//loginP changes;
string newHTML = "<span id='hello' height='22px'> Hello " + sessionST + "<br />";
newHTML += "<img id='lines' src='images/lines.png' /></span>";
newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";
//newHTML += "<asp:Button ID='LogOutBtn' Height='22px' Width='50px' runat='server' UseSubmitbehavior='false' CssClass='buttonC' Text='Logout' onclick='LogoutBtnClick' /></span>";
loginP.InnerHtml = newHTML;
loginP.Attributes.Add("style", "text-align: center;");
}
if ((cookiesST != null && cookiesST != ""))
{
//loginP changes;
string newHTML = "<span height='22px'> Hello " + cookiesST + "<br />";
newHTML += "<img id='lines' src='images/lines.png' /></span>";
newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";
loginP.InnerHtml = newHTML;
loginP.Attributes.Add("style", "text-align: center;");
}
}
thanks =]
MultiQuote
| 