Disapearing DIV

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: May 2008
Posts: 257
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 20
samarudge samarudge is offline Offline
Posting Whiz in Training

Disapearing DIV

 
0
  #1
Jul 25th, 2008
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
My Blog, Life and everything that matters to me - SamRudge.co.uk

2x Macbook Pro's, 1x Mac Pro, 1x iMac, 2x Macbook's running Fedora linux - In conclusion, I hate windows =)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Disapearing DIV

 
0
  #2
Jul 25th, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 257
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 20
samarudge samarudge is offline Offline
Posting Whiz in Training

Re: Disapearing DIV

 
0
  #3
Jul 25th, 2008
•
•
•
•
Originally Posted by Troy III View Post
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
My Blog, Life and everything that matters to me - SamRudge.co.uk

2x Macbook Pro's, 1x Mac Pro, 1x iMac, 2x Macbook's running Fedora linux - In conclusion, I hate windows =)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Disapearing DIV

 
0
  #4
Jul 25th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 257
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 20
samarudge samarudge is offline Offline
Posting Whiz in Training

Re: Disapearing DIV

 
0
  #5
Jul 25th, 2008
•
•
•
•
Originally Posted by Troy III View Post

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
My Blog, Life and everything that matters to me - SamRudge.co.uk

2x Macbook Pro's, 1x Mac Pro, 1x iMac, 2x Macbook's running Fedora linux - In conclusion, I hate windows =)
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Disapearing DIV

 
0
  #6
Jul 26th, 2008
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. }
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 257
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 20
samarudge samarudge is offline Offline
Posting Whiz in Training

Re: Disapearing DIV

 
0
  #7
Jul 26th, 2008
Could You Explain This More.
Regards,
Sam Rudge
My Blog, Life and everything that matters to me - SamRudge.co.uk

2x Macbook Pro's, 1x Mac Pro, 1x iMac, 2x Macbook's running Fedora linux - In conclusion, I hate windows =)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Disapearing DIV

 
0
  #8
Jul 26th, 2008
•
•
•
•
Originally Posted by samarudge View Post
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Disapearing DIV

 
0
  #9
Jul 27th, 2008
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate api automatically blackjack browser bug calendar captchaformproblem checkbox child class close cookies createrange() cursor dependent disablefirebug dom dropdown editor element embed engine events explorer ext file firehose flash form forms game google gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha media microsoft object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php player post progressbar rated regex runtime scroll search security session shopping size software sql star stars stretch synchronous text textarea tweet twitter unicode validation web webservice website window windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC