WinFuture-Forum.de: HTML/Java? bei Klick Box mit Inhalten anzeigen - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

HTML/Java? bei Klick Box mit Inhalten anzeigen


#1 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 870
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 14. Oktober 2013 - 13:57

Hallo,

ich würde gerne in einer Tabelle bzw. Liste auf meiner Homepage eine Box einrichten, die bei Klick auf ein Wort etc. aufgeht.

Bsp:

Ich habe einen Namen und daneben den button/das Wort "Kontakt".
Bei Klick darauf soll eine kleine Box erscheinen, die Inhalte wie E-Mail, Webpage oder Telefonnummer anzeigt.
Es soll also kein mouseover sein, dass beim Wegbewegen der Maus verschwindet.
Die Inhalte der Box sollte man anklicken/kopieren können.

Ich weiß nicht genau welche Sprachen daran beteiligt sind und würde mich daher umso mehr freuen, wenn mir jemand einen Tip oder sogar eine Anleitungen geben könnte :-)

Beste Grüße,
akorsak
0

Anzeige



#2 Mitglied ist offline   Mondragor 

  • Gruppe: aktive Mitglieder
  • Beiträge: 391
  • Beigetreten: 22. Februar 12
  • Reputation: 44
  • Geschlecht:Männlich

geschrieben 14. Oktober 2013 - 15:22

Hallo,

was Du suchst, kann man mit Javascript umsetzen.
Dafür kann ich mir verschiedene Ansätze vorstellen.
Falls der Inhalt dieser Box statisch ist, also beispielsweise die Mail aus deinem Beispiel, die nicht von Aktionen des Benutzers auf der Seite abhängt, ist es relativ einfach. Dann könnte man beispielsweise einen div fest in jede Zeile einbauen, dem über den "onclick"-handler die Klasse divvisible zugewiesen wird, die via CSS als sichtbar definiert ist. Standardmäßig hat er dann in dem Beispiel die Klasse divinvisible, die im CSS als invisible deklariert wird. Mit Javascript kannst Du dann beispielsweise eine Funktion "swapvisibility" schreiben, die dem div dann die entsprechende Klasse zuweist.
Solltest Du Hilfe beim Quellcode brauchen, sag Bescheid, dann versuch ich, Dir zu helfen. Dafür wäre aber ein Praxisnahes Beispiel - wie ein Auszug aus der Tabelle, die Du im Beispiel erwähnst, nicht schlecht.

Grüße,
Mondragor

Dieser Beitrag wurde von Mondragor bearbeitet: 14. Oktober 2013 - 15:50

0

#3 Mitglied ist offline   aeris 

  • Gruppe: aktive Mitglieder
  • Beiträge: 129
  • Beigetreten: 06. September 08
  • Reputation: 12
  • Geschlecht:unbekannt

geschrieben 14. Oktober 2013 - 15:34

Ich glaube es ist einfacher schon fertige Scripts zu benutzen, als wenn man sich ohne Vorkenntnisse etwas selber basteln will.
Schau dir mal diese an, eventuell ist da ja was dabei:
http://www.smashinga...al-plugins.html

jQuery muss bei denen allerdings auch eingebunden werden.
0

#4 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 870
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 14. Oktober 2013 - 16:13

Hallo Zusammen und danke für die Ratschläge.

Ihr habt mein Problem erkannt! Ebenso, dass ich eine absolute Niete in HTML & Co. bin :rolleyes:

@Mondragor: Dein Vorschlag klingt so, als benötigt man viele Programmierkenntnisse. Ich habe mal eine Beispieldatei angehängt, vll kannst du mir da etwas basteln wenn es nicht zu lange dauert!

@aeris: Die Vorlagen sehen schön und passend aus. Da ich aber null Ahnung vom Code habe, weiß ich nicht wie ich die einbauen soll, geschweige denn welche HTML/PHP Datei ich vom Server zur Bearbeitung nehmen soll.

Angehängte Datei(en)


0

#5 _d4rkn3ss4ev3r_

  • Gruppe: Gäste

geschrieben 14. Oktober 2013 - 16:42

Übrigens:
Das Thema heißt HTML/Java

Wann lernt ihr endlich, dass Java und JavaScript völlig verschiedene Sprachen sind?
Es ist hier sicher JavaScript gemeint.
0

#6 Mitglied ist offline   Mondragor 

  • Gruppe: aktive Mitglieder
  • Beiträge: 391
  • Beigetreten: 22. Februar 12
  • Reputation: 44
  • Geschlecht:Männlich

geschrieben 14. Oktober 2013 - 18:32

@ d4rkn3ss4ev3r

ich glaube der Threadersteller kennt weder noch, sodass man ihm dies nachsehen sollte.

@akorsak

Okay, also dafür gibt es ne einfache Lösung, die ich dir hier morgen mal rein schreibe.
Für heute mach ich erst mal Feierabend, Frau wartet schon :)
Grüße
Mondragor
0

#7 Mitglied ist offline   Mondragor 

  • Gruppe: aktive Mitglieder
  • Beiträge: 391
  • Beigetreten: 22. Februar 12
  • Reputation: 44
  • Geschlecht:Männlich

geschrieben 15. Oktober 2013 - 09:30

Hallo,

ich habe mal ein paar Sachen eingefügt. Schau Dir die Datei mal an, im CSS- und JS-Bereich stehen ein paar hoffentlich erkennbare Kommentare im Quelltext, ich hoffe, Du kannst damit etwas anfangen.
Was hier passiert, ist erst einmal nur, dass der Text nach Klick auf "Kontakt" sichtbar wird.
Nach klick auf den sichtbar gewordenen Text wird dieser wieder unsichtbar.
Wie Dir sicher aufgefallen ist, belegt der Text aber die ganze Zeit den Platz in der Spalte. Um den Text nun kopieren zu können, kannst Du beispielsweise den Event "onclick" in diesem <p>-Element zu "ondblclick" ändern.
Dies ist der einfachste Ansatz.

Angehängte Datei(en)


Dieser Beitrag wurde von Mondragor bearbeitet: 15. Oktober 2013 - 09:33

0

#8 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 870
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 15. Oktober 2013 - 12:26

Beitrag anzeigenZitat (Mondragor: 15. Oktober 2013 - 09:30)

Hallo,

ich habe mal ein paar Sachen eingefügt. Schau Dir die Datei mal an, im CSS- und JS-Bereich stehen ein paar hoffentlich erkennbare Kommentare im Quelltext, ich hoffe, Du kannst damit etwas anfangen.
Was hier passiert, ist erst einmal nur, dass der Text nach Klick auf "Kontakt" sichtbar wird.
Nach klick auf den sichtbar gewordenen Text wird dieser wieder unsichtbar.
Wie Dir sicher aufgefallen ist, belegt der Text aber die ganze Zeit den Platz in der Spalte. Um den Text nun kopieren zu können, kannst Du beispielsweise den Event "onclick" in diesem <p>-Element zu "ondblclick" ändern.
Dies ist der einfachste Ansatz.


Danke für deine Mühe!
Gibt es die Möglichkeit den Text auf einer neuen Ebene anzeigen zu lassen?
Also so wie in einem der templates, die aeris erwähnt hat?
Das Problem ist nämlich wirklich, dass der erscheinende Text in der gleichen Zelle erscheint.
Ich habe zu Testzwecken auch "ondblclick" eingefügt (in verschiedenen kombinationen mit und ohne "onclick").
Der Text lies sich also kopieren, jedoch war er nicht mehr wegzubekommen.
0

#9 Mitglied ist offline   Mondragor 

  • Gruppe: aktive Mitglieder
  • Beiträge: 391
  • Beigetreten: 22. Februar 12
  • Reputation: 44
  • Geschlecht:Männlich

geschrieben 15. Oktober 2013 - 12:36

ondblclick heißt "auf Doppelklick" - nach Doppelklick verschwindet es.
Grundsätzlich ist es auch möglich, das Ganze außerhalb der Tabelle zu platzieren, dann sieht der Aufruf aber deutlich anders aus und man muss halt vorher wissen, wohin man den div dann tut, damit man nicht evtl. andere, wichtige Elemente dabei überdeckt. Sicher geht das auch als "alert", sodass Du ein kleines Fenster erhältst, in dem die Kontaktdaten stehen, allerdings ist dann solange der Hintergrund ausgegraut. Durch einen Klick auf "ok" würde man dies dann wieder verschwinden lassen und könnte weiter lesen...
Wenn Du vielleicht eine Tabelle mit mehreren Zeilen hast, und mir exemplarisch da irgendwelche Dummy-Kontaktinformationen rein schreibst, kann ich besser einschätzen, wie lang die Zeichenketten sind, die da kommen und wie man die am besten platziert...
Bei dieser Version erscheint / verschwindet der Text komplett durch Klick auf "Kontakt"...

Angehängte Datei(en)


Dieser Beitrag wurde von Mondragor bearbeitet: 15. Oktober 2013 - 16:49

0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0