Hi,
I have created a login box that appears on the click of a button that says login (Obviously) but when I load the page the div appears until the page loads. How do I get the div to appear immediately?
You can see the page here or http://freeform.ath.cx
Regards,
Sam Rudge
Well Sam,
Remove: onload="javascript:hidebox()" from your BODY element and you're OK to go.
(the part i red of the following html code in your document) <body onload="javascript:hidebox()"> Cheers
Well Sam,
Remove:onload="javascript:hidebox()"from your BODY element and you're OK to go.(the part i red of the following html code in your document)
<body onload="javascript:hidebox()">Cheers
But then it is still there. I probably should explain the problem better. I want the login box to appear when the user clicks on the LogIn link in the account tab but unless the user has clicked on LogIn I want the div to be invisible.
Regards,
Sam Rudge
P.S. Thanks for helping
1. You can:Set your initial login box visibility to: hidden.
Your css #yourLoginboxID{visibility:hidden} .
2.Or do it the "right way":
Leave the code as is right now (that is remove the body "onload function call" - as I said in my previous post) and append this function call hidebox() to your external js file, right after the "function hidebox()" end.]
you're a go!
p.s.: Remove the <body onload="javascript:hidebox()"> from all other pages using it.
Cheers
2.Or do it the "right way":
Leave the code as is right now (that is remove the body "onload function call" - as I said in my previous post) and append this function callhidebox()to your external js file, right after the "function hidebox()" end.]
Right i have done that but now the box doesn't disappear at all
This is my javascript from logbox.js
// Javascript for showing the log in box:
//Hide
function hidebox() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('LoginBox').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.LoginBox.visibility = 'hidden';
}
else { // IE 4
document.all.LoginBox.style.visibility = 'hidden';
}
}
}
hidebox();
//Show
function LoginBox() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('LoginBox').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.LoginBox.visibility = 'visible';
}
else { // IE 4
document.all.LoginBox.style.visibility = 'visible';
}
}
}Regards,
Sam Rudge
Well,
use innerHTML property.
// Javascript for showing the log in box:
//Hide
function hidebox() {
var loginDiv = document.getElementById('LoginBox');
loginDiv.innerHTML = "";
}
//Show
function LoginBox() {
var loginDiv = document.getElementById('LoginBox');
loginDiv.innerHTML = "Your login div inner HTML as String";
}Could You Explain This More.
Regards,
Sam Rudge
Right i have done that but now the box doesn't disappear at all
That's PROBABLY because your Website - is still NOT AWARE that you've made the change here on your PC. I think you should do something about that.
-How about replacing your old js file with this one on the server?
Or, how about replacing that long oldfashion conditional with something compact like this:
var LoginBox =
/*IE4*/ LoginBox||
/*NN4*/ document.LoginBox||
/*W3C*/ document.getElementById('LoginBox');
LoginBox=LoginBox.style||LoginBox;
function hidebox(){
LoginBox.visibility="hidden";
}
function showBox(){
LoginBox.visibility="visible"
}
hidebox();One thing I forgot to tell you is that you should never link your script files in the document head if your aim is to manipulate dom style and similar during load time that is on before load event. Placing scripts on document head was allowed because of content prelloading scripts. Script tag is legitimate body element. So this script should also be linked somewhere before the body end tag.
p.s.: not to forget, you should also update the new function name at the lines of function call with the new one. ...showBox(), instead of LoginBox() because that name is now reserved for global var.
Cheers
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.