943,587 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Disapearing DIV
Ad:
Permalink
Jul 25th, 2008
0

Disapearing DIV

Expand Post »
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
Reputation Points: 26
Solved Threads: 31
Posting Whiz
samarudge is offline Offline
354 posts
since May 2008
Permalink
Jul 25th, 2008
0

Re: Disapearing DIV

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
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
505 posts
since Jun 2008
Permalink
Jul 25th, 2008
0

Re: Disapearing DIV

Click to Expand / Collapse  Quote originally posted by Troy III ...
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
Reputation Points: 26
Solved Threads: 31
Posting Whiz
samarudge is offline Offline
354 posts
since May 2008
Permalink
Jul 25th, 2008
0

Re: Disapearing DIV

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
Last edited by Troy III; Jul 25th, 2008 at 10:49 am.
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
505 posts
since Jun 2008
Permalink
Jul 25th, 2008
0

Re: Disapearing DIV

Click to Expand / Collapse  Quote originally posted by Troy III ...

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.
]
Right i have done that but now the box doesn't disappear at all
This is my javascript from logbox.js
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. // Javascript for showing the log in box:
  2.  
  3. //Hide
  4. function hidebox() {
  5. if (document.getElementById) { // DOM3 = IE5, NS6
  6. document.getElementById('LoginBox').style.visibility = 'hidden';
  7. }
  8. else {
  9. if (document.layers) { // Netscape 4
  10. document.LoginBox.visibility = 'hidden';
  11. }
  12. else { // IE 4
  13. document.all.LoginBox.style.visibility = 'hidden';
  14. }
  15. }
  16. }
  17.  
  18. hidebox();
  19.  
  20. //Show
  21. function LoginBox() {
  22. if (document.getElementById) { // DOM3 = IE5, NS6
  23. document.getElementById('LoginBox').style.visibility = 'visible';
  24. }
  25. else {
  26. if (document.layers) { // Netscape 4
  27. document.LoginBox.visibility = 'visible';
  28. }
  29. else { // IE 4
  30. document.all.LoginBox.style.visibility = 'visible';
  31. }
  32. }
  33. }

Regards,
Sam Rudge
Reputation Points: 26
Solved Threads: 31
Posting Whiz
samarudge is offline Offline
354 posts
since May 2008
Permalink
Jul 26th, 2008
0

Re: Disapearing DIV

Well,

use innerHTML property.

javascript Syntax (Toggle Plain Text)
  1. // Javascript for showing the log in box:
  2.  
  3. //Hide
  4. function hidebox() {
  5.  
  6. var loginDiv = document.getElementById('LoginBox');
  7. loginDiv.innerHTML = "";
  8. }
  9.  
  10.  
  11. //Show
  12. function LoginBox() {
  13. var loginDiv = document.getElementById('LoginBox');
  14. loginDiv.innerHTML = "Your login div inner HTML as String";
  15.  
  16. }
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Permalink
Jul 26th, 2008
0

Re: Disapearing DIV

Could You Explain This More.
Regards,
Sam Rudge
Reputation Points: 26
Solved Threads: 31
Posting Whiz
samarudge is offline Offline
354 posts
since May 2008
Permalink
Jul 26th, 2008
0

Re: Disapearing DIV

Click to Expand / Collapse  Quote originally posted by samarudge ...
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?
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
505 posts
since Jun 2008
Permalink
Jul 27th, 2008
0

Re: Disapearing DIV

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
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
505 posts
since Jun 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Looking for code in ajax for dropdownlist date.
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: expanding block script works in safari - not in firefox 3





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC