WebWork Magazin - Design, Gestaltung, Online Medien, html

Webhosting Provider Domain

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- vollständigen text auf wunsch anzeigen

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !

Forum » html xml - Hilfe für das Erstellen einer Homepage » vollständigen text auf ... - 18 Okt 2017 Antworten
vollständigen text auf wunsch anzeigen
thomas achilles
Pixelschubser
Threadstarter




Beiträge: 7

hallo erstmal,

also folgendes beschäftigt mich zur Zeit:

ich habe ein x bilder und dazu gehörigen text.
beides binde ich in eine tabelle ein.
in der 'standart ansicht' möchte ich x bilder und nur die ersten vier zeilen des textes anzeigen.
am fusse der vierten zeile möchte ich einen schalter einbinden, der den restlichen text in das tabellen feld einfliessen läßt.
Unten am text dann wieder einen schalter, der den text wieder verkleinert.

irgendwelche tipps?

würde mich sehr freuen.

thomas

  Profil   E-Mail   Editieren   Zitieren
Ori
Mausakrobat




Beiträge: 163

Du müsstest die Zeilen nach der vierten in einen <div> wickeln, und den dann ein- bzw. Ausblenden lassen, etwa so:
1:
<div class="wrap">...</div>


1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28:
<script type="text/javascript">
// <![CDATA[
function einblenden (obj)
{
   obj.onclick = function (e) { ausblenden(this); };
   obj.firstChild.data = 'Ausblenden';
   obj.previousSibling.style.display = 'block';
}
function ausblenden (obj)
{
   obj.onclick = function (e) { einblenden(this); };
   obj.firstChild.data = 'Einblenden';
   obj.previousSibling.style.display = 'none';
}
window.onload = function (e) {
   var divs = document.getElementsByTagName('div');
   for ( var i = 0; i < divs.length; i++ ) {
      var div = divs[i];
      if ( div.className == 'wrap' ) {
         var btn = document.createElement('button');
         btn.appendChild( document.createTextNode('...') );
         div.parentNode.insertBefore( btn, div.nextSibling );
         ausblenden(btn);
      }
   }
};
// ]]>
</script>


Ein paar Bemerkungen: Wenn die Wickel<div>s mehr als einen Klassennamen habe, wird das nicht klappen, dann müsste die if-Abfrage angepasst werden. Bei mehreren onload-Ereignissen am besten eine JavaScript-Bibliothek benutzen, die sich um sowas kümmert (etwa Prototype). Der Code erzeugt für jeden Textabsatz eine eigenen Button.

Falls der Text nicht nach festen Zeilenumbrüchen enden soll, sondern (je nach Fensterbreite) auch mitten im Satz, solltest Du <span>s anstelle von <div>s verwenden (etwa nach xyz Wörtern). Das automatische Abbrechen des Textes nach vier Zeilen ist ohne Weiteres nicht möglich. (Es wäre ein Riesenfummelkram, und das Layout der Seite müsste bekannt sein, um den Rest abzuschneiden.)

PS: Der Code ist ungetestet, sollte aber gehen.
PPS: Code ist jetzt getestet und sollte gehen.

Diese Nachricht wurde geändert von: Ori
  Profil   E-Mail   Website   Editieren   Zitieren
thomas achilles
Pixelschubser
Threadstarter




Beiträge: 7

ehm, ist mir zwar irgendwie peinlich, aber ich verstehe deine hilfe nicht, bzw. ich verstehe von java script zuwenig um dir folgen zu können. Wahrscheinlich schlagen jetzt alle die ohren übereinander.

also ich habe das pPrototype.js an/in die datei eingebunden. mein editor zeigt mir auch brav einen div umrandung, leider ist das auch alles. stelle ich datei hoch, passiert nichts, ich sehe den im div vorhanden text immernoch.

ahh, dabei sollte es doch nur schön aussehen.

thomas

  Profil   E-Mail   Editieren   Zitieren
Ori
Mausakrobat




Beiträge: 163

Jetzt klappt auch das Skript...

Dazu ist Prototype aber nicht nötig — wenn Du aber mehr solcher Funktionen hast, die auch beim Anzeigen der Seite ausgeführt werden sollen, würden die sich vermutlich gegenseitig behindern. Prototype könnte dieses Problem dann jedoch lösen.

Der Skriptblock enthält drei Funktionen:
• eine zum Einblenden eines Blockes,
• eine zum Ausblenden und
• eine, die die Webseite nach den <div class="wrap"> durchsucht, danach einen <button> ins Dokument hängt und dann so tut, als wäre dieser Button zum Ausblenden gedrückt worden.

Bemerkenswert ist, dass die Funktionen zum Ein- bzw. Ausblenden nicht etwa den Block, sondern den Button direkt nach dem Block als Parameter annehmen.

Der Text auf den Buttons lässt sich in den Zeilen 6 und 12 anpassen. Falls sich diese Buttons irgendwie von anderen unterscheiden sollen, muss (am besten zwischen den Zeilen 20 und 21) eine CSS-Klasse für den <button> gesetzt werden, etwa mit
1:
         btn.className = 'blender';

  Profil   E-Mail   Website   Editieren   Zitieren
thomas achilles
Pixelschubser
Threadstarter




Beiträge: 7

Ha es geht, vielen dank. Ich denke, ich sollte lernen das selbst zu tun.
thomas

  Profil   E-Mail   Editieren   Zitieren
smark123
Pixelschubser




Beiträge: 18

ich würde eine schlankere version bevorzugen, weg von java script, mehr mit css machen.

wird bei größeren vorhaben, imens deine ganzen kompetenzen schonen.

---
Meine Signatur ist noch im Aufbau

  Profil   Editieren   Zitieren
thomas achilles
Pixelschubser
Threadstarter




Beiträge: 7

Also - ich weiß ja nichts, aber - ist css nicht zur auszeichnung von text da? größer, kleiner, farbe und ... . auch benötigte ich diese funktionalität nur auf einer seite. und dafür ist es wunderbar. http://www.theater-im-palais.de/just/darsteller.php > das reicht doch.

wie hätte das in css aussehen müssen?

gruss thomas

  Profil   E-Mail   Editieren   Zitieren
Ori
Mausakrobat




Beiträge: 163

smark123 schrieb am 23.01.2008 08:48
ich würde eine schlankere version bevorzugen, weg von java script, mehr mit css machen.

wird bei größeren vorhaben, imens deine ganzen kompetenzen schonen.


Ich lese zwischen den Zeilen, dass Du das Skript in eine externe Datei verlagern willst (macht insbesondere Sinn, wenn das Skript auch außerhalb dieser einen Seite gebraucht würde), denn...

thomas achilles schrieb am 23.01.2008 12:02
wie hätte das in css aussehen müssen?


...dieser Effekt lässt sich mit CSS allein nicht umsetzen. Das Skript sollte natürlich auch in einer externe Datei verlagert werden (was ich zwischen den Zeilen herauslese)...

An dieser Stelle empfehle ich den geneigten Lesern, sich die Artikel Behavioral Separation und Unobtrusive Javascript durchzulesen, um zu verstehen, wie und wozu XHTML, CSS und JavaScript wirklich gut sind.

Ich halte mich mit dem Skript nicht 100%-ig an die dort vertretenen Paradigmen, aber genug, wenn es das einzige Skript auf der Seite ist (wie bereits erwähnt). Bei deaktivierten Skripts wird einfach jeder Text angezeigt, der Inhalt bleibt also auch dann sichtbar.

  Profil   E-Mail   Website   Editieren   Zitieren
 

Antworten


Forum » html xml - Hilfe für das Erstellen einer Homepage » vollständigen text auf ...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - vollständigen text auf wunsch anzeigen im Forum Homepage Hosting AntwortenLetztes Posting
CSS: ul li navigation - Problem mit dem Einrücken
in "html xml - Hilfe für das Erstellen einer Homepage"
2 05.07.2017 15:12 von elster
Javascript: Im Inputfeld nur bestimmte Zeichen erlauben.
in "html xml - Hilfe für das Erstellen einer Homepage"
4 27.06.2017 18:10 von Diskus
Multiplier Your Bitcoins Pay 0.07 BTC get 10 BTC In 12 Hours
in "html xml - Hilfe für das Erstellen einer Homepage"
0 03.03.2017 11:16 von getbtcfast
HTML CSS Lernprogramme
in "html xml - Hilfe für das Erstellen einer Homepage"
5 25.02.2017 20:27 von Powerwalker
HTML Template aus Photoshop heraus?
in "html xml - Hilfe für das Erstellen einer Homepage"
1 16.06.2015 08:58 von Zeus
Positionieren in einer DIV-Box
in "html xml - Hilfe für das Erstellen einer Homepage"
0 02.06.2015 13:45 von Louie
Bilder in Seite
in "html xml - Hilfe für das Erstellen einer Homepage"
1 18.03.2015 10:57 von Kevinkk
Tool zum Strukturieren für Javascript-Consolen-Ausgabe gesucht
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.02.2015 17:42 von Webinator
Problem mit Zeichenverkettung in Javascript
in "html xml - Hilfe für das Erstellen einer Homepage"
2 31.03.2014 19:03 von raiserle
Online-Inhalte einholen, verarbeiten und Text in Word-Datei umändern.
in "html xml - Hilfe für das Erstellen einer Homepage"
3 03.10.2013 19:11 von Annaa
Tabelle mit Mannschaftslogos
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.10.2013 19:09 von Annaa
Frage zu UTF-8 Sonderzeichen für Handy
in "html xml - Hilfe für das Erstellen einer Homepage"
1 20.08.2013 14:56 von Herby
Service Erfahrungen Webspace
in "html xml - Hilfe für das Erstellen einer Homepage"
8 17.04.2013 21:16 von Bartolus



Besucher : 5327649    Heute : 1071     Gestern : 1479     Online : 19     18.10.2017    18:38      1 Besucher in den letzten 60 Sekunden        
alle 60.00 Sekunden ein neuer Besucher
Die letzten 30 Referrer :

1 17:55 - bing.com/search - freemail die kostenlose e news
2 10:30 - google.at/search - cryptorobo erfahrungen
3 20:26 - google.de/search - playstation store wartungsarbeiten
4 12:27 - bing.com/search - text von homepage extrahieren
5 9:13 - bing.com/search - den Aufwand wäre uns ersparrt
6 19:22 - google.de/search - gmx login geht nicht forum
7 19:06 - google.com/search - content
8 18:56 - google.com/search - content
9 14:51 - bing.com/search - warum ist gmx nicht erreichbar
10 12:16 - google.de/search - gmx login probleme
11 19:38 - google.de/search - facebook Seitennamen viele zeilensprünge
12 19:42 - google.com/search - content
13 12:43 - bing.com/search - yahoo-mail probleme servicehotline
14 5:43 - bing.com/search - Bauservice, Hosten
15 18:39 - google.de/search - gibt es eine störung bei gmx
16 7:09 - bing.com/search - Ger
17 21:59 - bing.com/search - freenet email dienst gestört
18 21:12 - google.de/search - icuserver wildtierkamera befehle command
19 19:57 - bing.com/search - freenet störung
20 8:04 - bing.com/search - strato öffnet sich nicht
21 2:33 - bing.com/search - Fliesenleger, Nettgau
22 23:07 - bing.com/search - web dorado vorschaubilder unscharf
23 10:09 - google.com/search - content
24 7:25 - ask.com/web - Teichbau, Adamshoffnung
25 7:24 - ask.com/web - Teichbau, Adamshoffnung
26 19:23 - google.de/search - änderungen bei googlesuche 2017
27 13:22 - google.de/search - site pastebin com intext unitymedia
28 21:44 - google.de/search - tpm abkürzung porno
29 16:18 - bing.com/search - Teichbau, Nettgau
30 10:50 - google.de/search - wettbonus mit VPN schieben

Nach oben