FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS help

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


morfeusman
i am having some trouble with DHTML
i am trying to display a div after someone enters the correct password.
what am i doing wrong:
Code:
<html>
<head>
<script type="text/javascript">
function start()
{
mydiv = document.getElementById("mydiv");
mydiv.style.display = "none"; //to hide it
//mydiv.style.visibility = "block"; to show it
}
function go()
{
var pass=document.getElementById('bi').value;
if (pass=="password")
{
alert("correct password");
alert("the password you typed was:" + pass);
mydiv2 = document.getElementById("mydiv");
mydiv2.style.visibility = "block";
}
else
{
alert("you typed the wrong password");
alert("the password you typed was:" + pass);
}
}
</script>
</head>
<body onload="start()">
<input type="password" id="bi" />
<input type="button" onclick="go()" value="Submit" />
<div id="mydiv">
<p> you got in to the system!</p>
</div>
</body>
</html>


also, i can't even seem to change textcolor:

Quote:
<html>
<head>
<title>getElementById example</title>
<script type="text/javascript">
function changeColor(newColor){

elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
</head>
<body>
<p id="mytext">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>


thanks!
and also, sorry for pasting huge chunks of code but i cant seem to use the pastewebsite.
Marcuzzo
you used visibility instead of display...the correct way is
Code:
mydiv2.style.display = "block";


this is working
Code:
<html>
<head>
<script type="text/javascript">
function start(){
mydiv = document.getElementById("mydiv");
mydiv.style.display = "none"; //to hide it
//mydiv.style.visibility = "block"; to show it
}

function go(){
   var pass=document.getElementById('bi').value;
   if (pass=="password"){
      alert("correct password");
      alert("the password you typed was:" + pass);
      mydiv2 = document.getElementById("mydiv");
      mydiv2.style.display = "block";
   }else{
      alert("you typed the wrong password");
      alert("the password you typed was:" + pass);
   }
}
</script>
</head>
<body onload="start()">
<input type="password" id="bi" />
<input type="button" onclick="go()" value="Submit" />
<div id="mydiv">
<p> you got in to the system!</p>
</div>
</body>
</html>


however... 2 remarks
1. this is not safe, everybody can read the password in the source
2. why use the onload to hide the div, it has an ID so in css:
Code:
 #mydiv{display:none;}



and in the second one you try to get the handle of an elenent with ID para1...
Code:
elem = document.getElementById("para1");


while your HTML shows:
Code:

<body>
<p id="mytext">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>

there is no element with ID para1, try mytext

you really need to check your code properly, check for type-o's, or in this case incorrect values or ID 's.

hope this helps you out
morfeusman
thanks for the help.

i know it is a insecure password protect but thats all i need
also, i like DHTML more than CSS so i use it instead. but i gues it is easier to:
Code:
 mydiv{display:none}

than:
Code:

var x = document.getElementById('id');
x.style.display = block;


so thanks!
Marcuzzo
morfeusman wrote:
i like DHTML more than CSS so i use it instead.


in that case I would use:
Code:
document.getElementById('id').style.display = "block";
sonam
Quote:
i am trying to display a div after someone enters the correct password.


Did you think about security isue. I think JavaScript is not enought secure for checking passwords because many hackers can easily read your source and log in without permision. If you need something similar to JavaScript (displaying content without reloading) then you can use Ajax in combination with PHP.

Sonam
rickylau
sonam wrote:
If you need something similar to JavaScript (displaying content without reloading) then you can use Ajax in combination with PHP.
For using AJAX I would recommend prototype.js, it ease a lot in writing JavaScript, not only AJAX, others as well. Just like what this topic is originally asking about, it is very simple with prototype:
Code:
element.show();
That's all.
Marcuzzo
why would he want to use a framework to dispaly a div.
rickylau
Marcuzzo wrote:
why would he want to use a framework to dispaly a div.
If he would only need to perform such simple work I would rather not recommend the framework of course (Absolutely I know you don't need a thousand lines of code in the framework for just one line of code). However the previous post is in reply for sonam's comment of using AJAX, I am saying that if some other functionalities are needed it would be better using framework in my opinion. I love to make AJAX web applications with prototype, I think it eases me a lot for AJAX and DOM processing, especially I don't have to concern too much about browser compatibility and actually
Code:
element.show ();
seems to be easier and more understandable in comparison with
Code:
document.getElementBtId (elementId).style.display = "block";
Doesn't it for example? (Sorry I hate so much to type "document.getElementById" therefore I use only "$" with prototype, I am so lazy [Also I know the function "$" just need quite little code, however I am just very lazy Laughing])
I don't have to know whether I should use "display" or "visibility" properties and what value should I use (for "display" there are "none", "inline", "block", and something special, which make the effects differ), simply hide () and show ().
Marcuzzo
I don't get the whole $("id")...
I just might aswell write a function called G that returns a handle to the ID.
from what I was tought... using special chars as a function is a big No no.

this is the same
Code:
function G(id){
    return document.getElementById(id);
}
Related topics

CSS Help needed : Table emulation with divs
CSS Help...
Basic CSS help needed regarding IE vs FF
Joomla CSS Help Just like any CSS Help
CSS help with existing "roll overs"
CSS help needed with list style menubar
CSS Help
new to css: help with positioning
CSS Help
CSS help positioning div
Basic CSS help (ID)
CSS Powered Ads
Any One good at webdesign
inline css help
I need help with CSS
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.