Frage

[Dani1978]

Kann mir jemand sagen, wie die Programmiertechnik heisst, die mittlerweile auf vielen Seiten eingesetzt wird, um News zu wechseln.

Ein Bsp. unter www.sueddeutsche.de rechts "meist empfohlen" - "meistkommentiert" - "meistgesucht"

[Matthias V]

Hallo Dani,

da wird einfach immer ein anderer div-Container oder Layer sichtbar gemacht. Und dies mittels CSS, was über Javascript gesteuert ist.

Der Inhalt ist immer auf der Seite vorhanden, wird also nur nach Bedarf sichtbar gemacht.

Der Quelltext ist auch sehr leicht nachvollziehbar bzw. lesbar.
Hier mal der Quelltext:

Code: Alles auswählen

<script type="text/javascript">
function mpShow(which){
 switch(which){
  case 'emailed':
         document.getElementById('mp_emailed').style.display = 'block';
         document.getElementById('mp_comment').style.display = 'none';
         document.getElementById('mp_searched').style.display = 'none';
         document.getElementById('mp_emailed_nav').style.backgroundColor = '#D2D2D2';
         document.getElementById('mp_comment_nav').style.backgroundColor = '';
         document.getElementById('mp_searched_nav').style.backgroundColor = '';
         break;
  case 'comment':
         document.getElementById('mp_emailed').style.display = 'none';
         document.getElementById('mp_comment').style.display = 'block';
         document.getElementById('mp_searched').style.display = 'none';
         document.getElementById('mp_emailed_nav').style.backgroundColor = '';
         document.getElementById('mp_comment_nav').style.backgroundColor = '#D2D2D2';
         document.getElementById('mp_searched_nav').style.backgroundColor = '';
         break;
  case 'searched':
         document.getElementById('mp_emailed').style.display = 'none';
         document.getElementById('mp_comment').style.display = 'none';
         document.getElementById('mp_searched').style.display = 'block';
         document.getElementById('mp_emailed_nav').style.backgroundColor = '';
         document.getElementById('mp_comment_nav').style.backgroundColor = '';
         document.getElementById('mp_searched_nav').style.backgroundColor = '#D2D2D2';
         break;
 }
}
</script>

Gruß Matthias V

P.S. leider konnte ich hier nicht den ganzen Quelltext posten, da hier ein SQL-Fehler angezeigt wurde (wird der Content-Filter oder so sein)

[Dani1978]

Aha klingt interessant. Hatte das noch nicht gelesen.

Wäre interessant, wie man da aus 3 verschiedenen CPO-Rubriken was draus machen könnte.

Danke.

[MarkusR]

Wenn Du jetzt diese "3 verschiedenen ConPresso-Rubriken" einfach mal als "Content" bezeichnen würdest, dann funktioniert es genau wie auf der von Dir genannten Seite. Der Code steht da ja gut nachvollziehbar drin.

Ich benutze DHTML (falls Dich immer noch die Bezeichnung interessiert) in meinem CPO 3.4.x-Auftritt für zuschaltbare englische Texte[1] sowie einen Veranstaltungskalender[2]:
[1] http://www.manchester-terrier-deutschla ... /index.php
[2] http://www.manchester-terrier-deutschla ... ermine.htm

[Dani1978]

Starke Referenzen. Welche Ressourcenquelle verwendest Du? oder selbst programmiert?

[MarkusR]

Naja, mit der Zeit lernt man ein bißchen DHTML...

immer mit der Gewißheit, daß es bestimmt noch eleganter und auch codetechnisch korrekter geht...

[Dani1978]

Nee sieht sichtig gut aus. Kompliment. Aber Du machst das ja auch professionell.

[Dani1978]

Habe eine Ressource gefunden. Kann man diesen Code auch in eine index10.php (Includierte Datei) packen. Ich will beim Überfahren des Titel und Teasers den Detailtext lesen.

[MarkusR]

Vermutlich kann man das.

Ich kenne aber den von Dir gefundenen Code nicht.

In meinem Fall packt man Titel und Teaser in ein DIV, den Artikeltext in ein anderes DIV (das man als "nicht sichtbar" formatiert).
Für das erste DIV baut man dann für mouseover eine Funktion, die das entsprechende zweite DIV sichtbar macht und beim mouseout wirder ausblendet.
Als ID benutzt man einfach die Artikel-ID, damit der richtige Text gezeigt wird.

[Dani1978]

Habe dieses DHTML Skirpt nun verwendet.

Habe jetzt noch ein Problem.

Ich möchte die Tabs die gerade aktiviert sind, mit einer anderen Hintergrundfarbe ausstatten. Kann jemand helfen?

Hier der Style:

<style>

.tab {
background-color:#DBDBDB; border: solid #000000; border-width: 1px 1px 0px 1px; padding:0px 2px 2px 2px;
}


#content1 {
border: 0px solid #000000;
display: block;
}
#content2 {
border: 0px solid #000000; display: none;
}
</style>

[MarkusR]

Vielleicht wäre ja der eine oder andere der oben zitierten style.background= Befehle hilfreich?

document.getElementById('elementID').style.backgroundColor = ...

[Dani1978]

Wie nachfolgend? Funktioniert aber nicht.

<script language="javascript">

function show(content){
// Zuvor blende ich alle aus
for (e=1;e<=2;e++){
var unsel='content'+e;
document.getElementById(unsel).style.backgroundColor="FFFFFF";
}

// Hier blende ich den angeklickten wieder ein
var sel='content'+content;
document.getElementById(sel).style.display='block';
}

</script>

<style>

.tab {
background-color:#DBDBDB; border: solid #000000; border-width: 1px 1px 0px 1px; padding:0px 2px 2px 2px;
}


#content1 {
border: 0px solid #000000;
display: block;
}
#content2 {
border: 0px solid #000000; display: none;
}
</style>

[MarkusR]

Wrum änderst Du denn die Farbe des Content-Blocks?
Ich dachte es ginge um den Tab???

Hier mal was zum Grübeln (was übrigens funktioniert)

Code: Alles auswählen

<style> 
.tab { 
	background-color:#DBDBDB; 
	border: solid #000000; 
	border-width: 1px 1px 0px 1px; 
	padding:0px 2px 2px 2px; 
} 
.tabunsel { 
	background-color:white; 
	border: solid #000000; 
	border-width: 1px 1px 0px 1px; 
	padding:0px 2px 2px 2px; 
} 
#content1 { 
	border: 0px solid #000000; 
	display: block; 
} 
#content2 { 
	border: 0px solid #000000; 
	display: none; 
} 
</style>

<script language="javascript">
function show(content){
	// Zuvor blende ich alle aus
	for (e=1;e<=2;e++){
		document.getElementById('content'+e).style.display='none';
		document.getElementById('tab'+e).style.backgroundColor='white';
	}
	// Hier blende ich den angeklickten wieder ein
	document.getElementById('content'+content).style.display='block';
	document.getElementById('tab'+content).style.backgroundColor='#DBDBDB';
}
</script>

<TABLE cellspacing="0" cellpadding="2" width="100%" border="0">
  <TBODY>
	<TR>
	  <TD width="320" cellpadding="3">
	  <a id="tab1" class="tab" href="javascript:void(0);" onclick="show('1')"><b>Nachwuchs</b></a>
	  <a id="tab2" class="tabunsel" href="javascript:void(0);" onclick="show('2')"><b>Frauen</b></a>
	  <br>
	  <div id="content1">
	  <A title="Informationen zum Jugendfussball beim Dresdner SC im Sportpark Ostragehege" href="http://www.dsc-fussball98.de/content/conpresso/nachwuchs_start/index.html">&raquo;
			Informationen zur Nachwuchsabteilung</A><BR>
			<a href="http://www.dsc-fussball98.de/content/conpresso/nachwuchscontent/index.html">&raquo; Sponsoren & Partner des Nachwuchses</a><br>
			<A href="http://www.dsc-fussball98.de/content/conpresso/fverein/index.php">&raquo;
			Nachwuchsf&ouml;rderverein des Dresdner SC Fu&szlig;ball 98</A><BR>
			<A title="Nachwuchsfussball beim Dresdner SC - Probetraining jederzeit möglich" href="http://www.dsc-fussball98.de/content/conpresso/scouting/index.php"><b>&raquo; Aktuell: Probetraining in allen Altersklassen möglich!</b></A><BR>
			 <A href="http://www.dsc-fussball98.de/content/conpresso/vereinspiele">&raquo; Alle
			Begegnungen unseres Vereines</A></div>
	  <div id="content2">
	  <A title="Informationen zum Frauenfussball beim Dresdner SC im Sportpark Ostragehege" href="http://www.dsc-fussball98.de/content/conpresso/frauencontent/index.html">&raquo;
			Informationen zur Frauenabteilung</A><BR>
			<a href="http://www.dsc-fussball98.de/content/conpresso/frauennews/index.html">&raquo; Neuigkeiten aus dem Frauenbereich</a><br>
			<A title="Frauenfussball beim Dresdner SC - Probetraining jederzeit möglich" href="http://www.dsc-fussball98.de/content/conpresso/scouting/index.php"><b>&raquo; Junge Fußballerinnen Willkommen!</b></A><BR>
			 <A href="http://www.dsc-fussball98.de/content/conpresso/vereinspiele">&raquo; Alle
			Begegnungen unseres Vereines</A>
			</div>
	  </TD>
	</TR>
  </TBODY>
</TABLE>

[Dani1978]

Nochmal Danke. Funzt