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: 232
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 19
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: 232
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 19
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: 232
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 19
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: 232
Reputation: samarudge is an unknown quantity at this point 
Solved Threads: 19
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



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select session shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC