onLoad und hide
martin
- javascript
0 bernd
hallo habe folgendes prob.:
möchte einen hide button und einen show button erstellen.
wenn man die seite betritt soll ein text darstehen und die möglichkeit auf hide zu klicken, damit der text verschwindet. während dessen soll aber show nicht zu sehen sein. klickt man auf hide, soll anschließend der hide button verschwinden und der show button erscheinen. habe folgenden script geschrieben, der allerdings nicht funktioniert. frage: kann mir jemand bei dem problem helfen? ist wichtig.. vielen vielen dank im voraus, viele grüsse, martin
<script type="text/javascript">
<!--
function hideMyDiv(){
var myDiv = document.getElementById('myDiv');
myDiv.style.display='none';
}
function showMyDiv(){
var myDiv = document.getElementById('myDiv');
myDiv.style.display='';
}
}
function hideButton(){
var Button = document.getElementById('Button');
Button.style.display='none';
}
//-->
</script>
</head>
<body onLoad="hideButton()">
<p id="myDiv">
TEST
</p>
<a href="javascript:hideMyDiv()">hide</a>
<span id="Button">
<a href="javascript:showMyDiv()">show</a>
</span>
Hi,
ist wichtig.. vielen vielen dank im voraus, viele grüsse, martin
<html>
<head>
<title>Hide/Show Demo</title>
<script type="text/javascript">
<!--
function GetElementById (id, wnd)
{
var elm;
var doc;
wnd = wnd || window;
doc = wnd.document;
if (doc.all)
{
elm = doc.all[id];
elm = (elm ? elm : null);
}
else if (doc.getElementById)
{
elm = doc.getElementById(id);
}
else
{
elm = null;
}
return elm;
}
function HideElement (elm)
{
if (document.layers)
elm["visibility"] = "hide";
else if (elm.style)
elm.style["visibility"] = "hidden";
}
function ShowElement (elm)
{
if (document.layers)
elm["visibility"] = "show";
else if (elm.style)
elm.style["visibility"] = "visible";
}
function OnShow ()
{
var elmButtonShow = GetElementById("ShowButton");
var elmButtonHide = GetElementById("HideButton");
var elmMessage = GetElementById("Message");
if (!elmButtonShow || !elmButtonHide || !elmMessage)
return;
HideElement(elmButtonShow);
ShowElement(elmButtonHide);
ShowElement(elmMessage);
}
function OnHide ()
{
var elmButtonShow = GetElementById("ShowButton");
var elmButtonHide = GetElementById("HideButton");
var elmMessage = GetElementById("Message");
if (!elmButtonShow || !elmButtonHide || !elmMessage)
return;
ShowElement(elmButtonShow);
HideElement(elmButtonHide);
HideElement(elmMessage);
}
//-->
</script>
</head>
<body>
</head>
<body onLoad="OnShow();">
<span id="HideButton"><a href="javascript:OnHide();">Hide</a></span>
<span id="ShowButton"><a href="javascript:OnShow();">Show</a></span>
<div id="Message">
Blabla... Was ich schon immer mal wissen wollte ...
</div>
</body>
</html>
Läuft allerdings nicht im NC 4.x. Da musst du GetElementById noch entspr. abändern. Wenn du mehr mit solchen Sachen hantierst, dann solltest du dich mal mit der Geschichte der entspr. Browser befassen, sofern du die Zeit dazu hast. Ansonsten sei gesagt, dass mann diese Hürden "leicht" nur mit Erfahrung nimmt. Selbst SelfHTML kann und wird dir dies nicht abnehmen, auch wenn dort eine "allg. Bibliothek zum Zugriff auf Eigenschaften von Elementen" zur Verfügung steht. Das Web und die Browser sind halt alt.
hth
bernd
PS: Das Beispiel wurde nur im IE6, Moz 1.1a und Opera 7.11 getestet.