Функция js работает над настройкой спецификации типа документа - PullRequest
Новая
       0

Функция js работает над настройкой спецификации типа документа

0 голосов
/ 29 июня 2011

Я новичок в javascript. Попытался создать эту страницу, но каким-то образом сократить функция не работает при предоставлении спецификации типа документа. Я использую эту 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

, нобез указания он работает нормально
следующий полный код файла: 

<html>
<head>
<script language="javascript" >
function show(){
document.getElementById("dynamic").style.display="block";
document.getElementById("dynamic").style.opacity=1;
document.getElementById("dynamic").innerHTML="<table><tr>\n\t<td>Enter current password:</td><td><input type=\"password\" name=\"ppass\" size=\"45\"></td></tr><tr>\n<td>Enter new password:</td><td><input type=\"password\" name=\"npass1\" size=\"45\"></td></tr><tr>\n<td>Confirm password:</td><td><input type=\"password\" name=\"npass2\" size=\"45\"></td></tr><tr><td colspan=2><input type=submit value=\"Save\"></tr></table>\n";
document.setting.question[1].checked=true;
}
function hide(){
    if(document.forms.setting.question[0].checked!=true){
        fade("dynamic",50);
        }
    }
function appear(){
    document.getElementById("dynamic").style.display="block";
    document.getElementById("dynamic").style.opacity=1;
    document.getElementById("dynamic").innerHTML="<table><tr>\n\t<td>Enter password:</td><td><input type=\"password\" name=\"ppass\" size=\"45\"></td></tr><tr><td>Security Question:</td><td><input type=\"text\" name=\"ques\" size=\"100\"></td></tr><tr><td>Answer:</td><td><input type=\"password\" name=\"ans\" size=\"10\"></td></tr><tr><td colspan=2><input type=submit value=Save></tr></table>";
    document.setting.pass[1].checked=true;
    }
function disappear(){
    if(document.forms.setting.pass[1].checked){
        slide("dynamic",50);
        }
    }
function fade(id,time){
    var i=0;
    for(;i<10;i++){
        setTimeout("document.getElementById('dynamic').style.opacity-=0.1",(i*time));
        }
    i--;
    setTimeout("gayab("+id+")",(i*time));
    }
function gayab(id){
    id.style.display="none";
    id.innerHTML="";
    id.style.opacity=1;
    }
function slide(id,time){
    var i=1;
    document.getElementById(id).style.height=150;
    var b=document.getElementById(id).style.height;
    for(;i<15;i++){
        var j="shorten("+id+","+i+")";
        var k=i*time;
        setTimeout(j,k);
        }
    var j="gone("+id+")";
    var k=i*time;
    setTimeout(j,k);
    }
function shorten(id,i){
    id.style.height=(15-i)*10;
    }
function gone(id){
    id.style.display="none";
    id.style.height=150;
    }
</script>
<noscript>You are Using an Outdated Browser.<br>Please Update Your Browser</noscript>
<style>
.options{float:left;}
#dynamic{float:right;background-color:rgb(210,205,236);height:150px;opacity:1;overflow:hidden;width:720px;display:none;}
.nofloat{clear:both;}
</style>
<title>Settings</title>
</head>
<body>

<p align=right><a href=home.php>HOME</a> <a href=newpass.php>Change Password</a> <a href=logout.php>Log Out</a></p>
<form action="changepass.php" method="post" name="setting">
<div class=options>
<table>
<tr>
    <td>Change Password:</td>
    <td><input type="radio" name="pass" onClick="show();" value="1" id="Yes"><label for="Yes">Yes</label></td>
    <td><input type="radio" name="pass" onClick="hide();" value="0" id ="No" CHECKED><label for="No">No</label><br></td>
</tr>
<tr>
    <td>Change Security Question:</td>
    <td><input type="radio" name="question" onClick="appear();" value="1" id="yes"><label for="yes">Yes</label></td>
    <td><input type="radio" name="question" onClick="disappear();" value="0" id="no" CHECKED><label for="no">No</label></td>
</tr>
</table>
</div>
<div id="dynamic"></div>
<div class=nofloat>
<a href=logout.php>Logout</a>
</div>
</form>
</body>
</html>

, пожалуйста, помогите.

Ответы [ 2 ]

1 голос
/ 29 июня 2011

Ваш Doctype (несмотря на то, что он не подходит для документа, так как он не состоит из набора фреймов) запускает режим стандартов.

Это хорошо, поскольку он значительно снижает несоответствие между различными браузерами (и между браузерами).и стандарты).

В стандартном режиме большинство браузеров будут следовать спецификации CSS и рассматривать такие вещи, как height: 27, как ошибку, которую следует игнорировать, а не как ошибку, которая должна быть исправлена ​​до height: 27px.

Очевидная проблема с вашим кодом (могут быть и другие, вы опубликовали лот кода) в том, что вы присваиваете номера свойствам CSS с помощью JavaScript… и числа не имеют единиц измерения.

Взять хотя бы один пример: 

id.style.height=150;

должно быть: 

id.style.height = "150px";

Вы делаете аналогичную ошибку по крайней мере в одном другом месте.

1 голос
/ 29 июня 2011

Вы устанавливаете тип документа, который ожидает, что ваша страница состоит из наборов фреймов , но там их нет.Вместо этого вы должны использовать другой DOCTYPE, например transitional .

...