[Løst]Ødelagt spoiler HTML-kode.

kaffebryggare · 8. april 2009

Jeg klarte nylig å "ødelegge" min spoiler HTML kode. (Eller koder, det er 3 i 1)

Den skal egentlig vise 3 trykkbare spoiler-knapper, men bare den øverste virker..

Her er hele HTML-koden:

<html>
<head>
<title>Spoiler HTML code</title>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
	inner.style.display = "";
else
	inner.style.display = "none";
}
</script>
</head>
<body>
<h1></h1>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Click to show tutorials" />
<div class="inner" style="display:none;">
<b><br>- Build vehicles [WIP]<br><br>
- Stations [WIP]<br><br>
- Signals [WIP]<br><br>
<A HREF="http://bennythen00b.webs.com/openttdnewgrfs.htm">- NewGRFs</A><br><br><b>
</div>
</div>
</body>
</html>

<html>
<head>
<title>Spoiler HTML code</title>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
	inner.style.display = "";
else
	inner.style.display = "none";
}
</script>
</head>
<body>
<h1></h1>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Click to show links" />
<div class="inner" style="display:none;">

<b>
<br><A HREF="http://www.tt-forums.net">- TT-Forums</A><br><br>
<A HREF="http://wiki.openttd.org/Main_Page">- The OpenTTD wiki</A><br><br>
<A HREF="http://www.openttd.org"> - OpenTTD webpage</A><br><br>
<b>
</div>
</div>
</body>
</html>

<html>
<head>
<title>Spoiler HTML code</title>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
	inner.style.display = "";
else
	inner.style.display = "none";
}
</script>
</head>
<body>
<h1></h1>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Click to show OpenTTD downloads" />
<div class="inner" style="display:none;">
<b>
<br><A HREF="http://www.openttd.org/en/download-stable">- Latest stable (0.7.0)</A><br><br>
<A HREF="http://www.openttd.org/en/download-trunk">- Latest nightly</A><br><br>
<A HREF="http://www.openttd.org/en/download-cargodest">- Latest Cargodest</A><br><br>
<b>
</div>
</div>
</body>
</html>

EDIT: Jeg driver og tester noen andre spoiler HTML-koder nå.

EDIT2: Fikset.

Endret 8. april 2009 av Bennythen00b

arthoz · 8. april 2009

Er bare slik i Firefox, fungerer fint i IE, Opera & Chrome, rart :o

kaffebryggare · 8. april 2009

Da får jeg vel bare prøve meg frem med forskjellige løsninger. =P

Edit: kan det ha noe med freewebs å gjøre? Hadde koden virket på en vanlig webside? (f.eks "www.bennythen00b.com")

Endret 8. april 2009 av Bennythen00b

kaffebryggare · 8. april 2009

Jeg har nå prøvd med en annen kode, med samme resultat.. Firefox åpner bare den første spoileren..

Kode #2:

<html>
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Tutorials:</b> 
<input type='button'  value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';		this.innerText = ''; this.value = 'Hide'; } else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
<b><br>- Build vehicles [WIP]<br><br>
- Signals [WIP]<br><br>
- Stations [WIP]<br><br>
<A HREF="http://bennythen00b.webs.com/openttdnewgrfs.htm">- NewGRFs</A><br><br><b>
</div>
</div>
</div>
</html>


<html>
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Links:</b> 
<input type='button'  value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';		this.innerText = ''; this.value = 'Hide'; } else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
<b>
<br><A HREF="http://www.tt-forums.net">- TT-Forums</A><br><br>
<A HREF="http://wiki.openttd.org/Main_Page">- The OpenTTD wiki</A><br><br>
<A HREF="http://www.openttd.org"> - OpenTTD webpage</A><br><br>
<b>
</div>
</div>
</div>
</html>


<html>
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Downloads:</b> 
<input type='button'  value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';		this.innerText = ''; this.value = 'Hide'; } else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
<b>
<br><A HREF="http://www.openttd.org/en/download-stable">- Latest stable (0.7.0)</A><br><br>
<A HREF="http://www.openttd.org/en/download-trunk">- Latest nightly</A><br><br>
<A HREF="http://www.openttd.org/en/download-cargodest">- Latest Cargodest</A><br><br>
<b>
</div>
</div>
</div>
</html>

Cleaf · 8. april 2009

Firefox åpner ingen for meg men men :/

maheath · 8. april 2009

Ja du har vel klart å kopiere headingen ned i body minst 2 ganger - det skal ikke være style eller title der, og funksjonen ShowSpoiler skal bare være definert i headingen. Noe sånt, det ser ut til å fungere både i IE og Firefox. (sorry for alle de blanke linjene det er Kompozer som gjør det):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Spoiler HTML code</title>


 <style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
 </style>
 <script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
 </script>
</head>
<body>

<div class="spoiler">
<input onclick="showSpoiler(this);" value="Click to show tutorials" type="button">
<div class="inner" style="display: none;"><br>

- Build vehicles [WIP]<br>

<br>

- Stations [WIP]<br>

<br>

- Signals [WIP]<br>

<br>

<a href="http://bennythen00b.webs.com/openttdnewgrfs.htm">-
NewGRFs</a><br>

<br>

</div>

</div>

<div class="spoiler">
<input onclick="showSpoiler(this);" value="Click to show links" type="button">
<div class="inner" style="display: none;"><br>

<a href="http://www.tt-forums.net">- TT-Forums</a><br>

<br>

<a href="http://wiki.openttd.org/Main_Page">- The OpenTTD
wiki</a><br>

<br>

<a href="http://www.openttd.org"> - OpenTTD webpage</a><br>

<br>

</div>

</div>

<div class="spoiler">
<input onclick="showSpoiler(this);" value="Click to show OpenTTD downloads" type="button">
<div class="inner" style="display: none;"><br>

<a href="http://www.openttd.org/en/download-stable">-
Latest stable (0.7.0)</a><br>

<br>

<a href="http://www.openttd.org/en/download-trunk">-
Latest nightly</a><br>

<br>

<a href="http://www.openttd.org/en/download-cargodest">-
Latest Cargodest</a><br>

<br>

</div>

</div>

</body>
</html>

kaffebryggare · 8. april 2009

Åja, så jeg trengte ikke å putte på <html> og </html> mellom hver spoiler.

Takker for clean og fin HTML-kode.

Logg inn

[Løst]Ødelagt spoiler HTML-kode.

Anbefalte innlegg

kaffebryggare

Lenke til kommentar

Videoannonse

arthoz

Lenke til kommentar

kaffebryggare

Lenke til kommentar

kaffebryggare

Lenke til kommentar

Cleaf

Lenke til kommentar

maheath

Lenke til kommentar

kaffebryggare

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer