Frage

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Frage

Beitrag von 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"
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von 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)
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von 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.
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von 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
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von Dani1978 »

Starke Referenzen. Welche Ressourcenquelle verwendest Du? oder selbst programmiert?
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

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

immer mit der Gewißheit, daß es bestimmt noch eleganter und auch codetechnisch korrekter geht...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von Dani1978 »

Nee sieht sichtig gut aus. Kompliment. Aber Du machst das ja auch professionell.
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von 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.
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von 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.
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von 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>
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

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

document.getElementById('elementID').style.backgroundColor = ...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von 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>
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von 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>
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Dani1978
ConPresso-Checker
Beiträge: 217
Registriert: 15.12.2005 09:27
Hat sich bedankt: 1 Mal
Danksagung erhalten: 2 Mal

Beitrag von Dani1978 »

Nochmal Danke. Funzt :)
Antworten