SELFHTML Forum
SELFHTML Forumsarchiv
2007
Oktober
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: M@co, 31. 10. 2007, 15:23
Hallo zusammen
Meine Frage:
Ich will auf meiner Website ein News-system machen. Die News sollen aber nur als titel angezegt werden, wenn man draufklickt soll sich die News untendran zeigen (bsp: www.wow-europe.com/de ; Das Newsystem ebenda).
Sollte ja mit JavaScript gehen (wenn möglich auf jeden fall PHP-Frei). Google hat mir leider auch nichts schlaues verraten wollen.
Der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Marco Amstuz" />
<meta name="language" content="de" />
<meta name="description" content="Fan-Website über das Spiel Lemmings" />
<meta name="keywords" content="lemmings, lemming, lemminge, computerspiel, Marco Amstuz" />
<title>Die Lemmings</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="everything">
<div id="header"></div>
<div id="middle">
<div id="left_column">
<div id="navigation">
<b>Das Spiel</b><br />
<hr />
<br />
<a href="index.html">Home</a> <a href="pages/spiel.html">Das Spiel</a> <a href="pages/geschichte.html">Geschichte</a> <a href="pages/tippstricks.html">Tipps & Tricks</a> <a href="pages/versionen.html">Versionen</a> <a href="pages/bilder.html">Bilder</a> <a href="pages/sound.html">Sound</a> <a href="pages/downloads.html">Downloads</a><br />
<br />
<b>Sonstiges</b><br />
<hr />
<br />
<a href="pages/links.html">Links</a> <a href="pages/impressum.html">Impressum</a> <a href="pages/kontakt.html">Kontakt</a>
</div>
<div id="more_information"></div>
</div>
<div id="middle_column" class="two_column">
<div class="date_break">
<b>News</b><br />
<hr />
<br />
</div>
<div class="post">
<h1>Site Online!</h1>
<div class="post_body">
<p>Hier ist der Inhalt der ersten News, dieser soll zuerst Versteckt sein.</p>
</div>
<div class="postedby">
Von: Marco Amstuz
</div>
<div class="timestamp">
am 31.10.07 um 13:00 Uhr
</div>
</div>
<div class="post">
<h1>Title</h1>
<div class="post_body">
<p>Hier ist Platz für eine zweite News!</p>
</div>
<div class="postedby">
Von: Marco Amstuz
</div>
<div class="timestamp">
am 31.10.07 um 13:00 Uhr
</div>
</div>
<div class="post">
<h1>Title</h1>
<div class="post_body">
<p>Hier ist Platz für eine dritte News!</p>
</div>
<div class="postedby">
Von: Marco Amstuz
</div>
<div class="timestamp">
am 31.10.07 um 13:00 Uhr
</div>
</div>
</div>
</div>
<div id="footer">
<div id="subnav">
<a href="../pages/impressum.html">Impressum</a> | <a href="../pages/kontakt.html">Kontakt</a> | <a href="../pages/links.html">Links</a>
</div><span class="copyright">(c) 2007 bei Marco Amstuz<br />
Lemmings(c) und DMA-Design(c) sind eingetragene Warenzeichen von DMA-Design in den USA und/oder anderen Ländern.<br />
Verwendete Bezeichnungen, Logos, Grafiken und weitere Materialien unterliegen dem Copyright von DMA-Design und/oder Marco Amstuz. Diese Seite steht in keiner Beziehung zu DMA-Design.</span>
</div>
</div>
</body>
</html>
Die folgende Nachricht zum Thema stammt von: gungosh, 31. 10. 2007, 15:42
Hallo.
Nur ein schneller Tipp als Denkanstoß ;)<div id="newsheader" onClick="document.getElementById('newscontent').style.visibility='visible'">
Click here for the world's most interesting news!
</div>
<div id="newscontent" style="visibility: hidden">
Just joking, no interesting news here.
</div>
Grüße,
Gun
Die folgende Nachricht zum Thema stammt von: M@co, 31. 10. 2007, 15:45
»» Hallo.
»»
»» Nur ein schneller Tipp als Denkanstoß ;)
»»
»» »» <div id="newsheader" onClick="document.getElementById('newscontent').style.visibility='visible'">
»» Click here for the world's most interesting news!
»» </div>
»» <div id="newscontent" style="visibility: hidden">
»» Just joking, no interesting news here.
»» </div>
»»
»»
»» Grüße,
»» Gun
Danke dir, das funktioniert schon mal sehr schön. Aber da kommt eine weitere Fragen:
Ich möchte es auch möglich machen, sie wieder einzuklappen ;)
Greets und danke dir viel mal!
Die folgende Nachricht zum Thema stammt von: gungosh, 31. 10. 2007, 15:53
Natürlich gehört der Javascript-Code in eine Funktion und das CSS auch nicht direkt in die HTML-Tags. Denkanstoß heißt, selbst weiterforschen ;)
Du kannst die visibility eines Elements abfragen (if ... visibility == 'hidden') und das Element abhängig davon in ein und derselben onClick-Funktion entweder auf 'visible' oder 'hidden' setzen.
Selbst forschen/spielen hilft mehr als copy/paste ;)
Die folgende Nachricht zum Thema stammt von: M@co, 31. 10. 2007, 15:56
Das stimmt ;)
Danke dir viel mal und noch einen schönen Abend
Greets M@co
© 1998-2006 
Impressum, Software: Classic Forum
(JAVASCRIPT)