CSS3: fun with target

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css3_fun_with_target_97624/page_1 - zur Vollversion wechseln!

nitschi schrieb am 04.11.2003 um 13:44

:eek: Verschiebbare und anklickbare Fenster nur mit HTML/CSS (und Javascript für das drag-feature ).

http://www.virtuelvis.com/gallery/c.../interface.html

Funktioniert nur mit Mozilla/Firebird bzw. Safari auf Mac.

Spikx schrieb am 04.11.2003 um 13:57

hm, geil

Jedi schrieb am 04.11.2003 um 13:59

blödsinn, in Selfhtml gibts das Beispiel auch und das geht überall

nachtrag:

Zitat
without any use of Javascript.

ups...
ok, ich bin beeindruckt :eek:

Spikx schrieb am 04.11.2003 um 14:01

im ie 6.0 net

Jedi schrieb am 04.11.2003 um 14:04

aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen

Spikx schrieb am 04.11.2003 um 14:23

Zitat von Jedi
aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen

Zitat von nitschi
Verschiebbare und anklickbare Fenster nur mit HTML/CSS.

Rektal schrieb am 04.11.2003 um 14:27

Leute, lesen!

Das "without Javascript" bezieht sich nur auf die :target Pseudoklasse, d.h. wenn du unten auf ein Icon klickst damit das jeweilige Fenster "aktiv" wird.

Das Drag&Drop ist sehr wohl in Javascript realisiert; steht ja auch dort:

Zitat
I've made added a few lines of script that should enable you to drag the windows around to your own liking.

x3 schrieb am 04.11.2003 um 14:27

:eek:
beeindruckt
aber ein rand wer net schlecht
also oben und auf der seiten
denn sonst schiebt man das fenster vl ganz nach oben und man bekommts nicht mehr runter!

nitschi schrieb am 04.11.2003 um 14:39

Zitat von Rektal
Das "without Javascript" bezieht sich nur auf die :target Pseudoklasse, d.h. wenn du unten auf ein Icon klickst damit das jeweilige Fenster "aktiv" wird.

Das Drag&Drop ist sehr wohl in Javascript realisiert; steht ja auch dort:

Das hab ich in der Tat übersehen. Mea culpa.

Oculus schrieb am 04.11.2003 um 15:02

schöne spielereien

aber wer braucht sowas?
erhöht net grad die usability solcher seiten

nitschi schrieb am 04.11.2003 um 15:14

Zitat von Oculus
aber wer braucht sowas?
erhöht net grad die usability solcher seiten

Ich denke, dass diese Demonstration nicht ohne Grund mit "fun with target" betitelt wurde.

Jedi schrieb am 04.11.2003 um 15:36

auf die art kann man wunderschön Tabpages simulieren

das mit dem Verschieben der Layer ist allerdings wirklich eine eher unnötige Spielerei

Rektal schrieb am 04.11.2003 um 16:06

Zitat von Jedi
Zitat von fabsko
evtl. a Deixbuch ?

@Jedi: Um Tabpages zu simulieren brauchst das :target nicht. Das funktioniert jetzt auch schon mit minimalen code, like

Code:

<div id="tab">
    <div id="tab-canvas">
        <a id="trigger-tab-1" href="">Tab 1</a>
        <a id="trigger-tab-2" href="">Tab 2</a>
    </div>
</div>
<div id="tab-content">
    <div id="tab-1" class="tab-content">
    </div>
    <div id="tab-2" class="tab-content">
    </div>
</div>

Vom HTML her ist nicht mehr noetig als das; mit dem richtigen CSS & Javascript kann das wie im Screenshot aussehen (bis auf die Borders; Moz-Only feature

); auf allem was nicht grad NS4-Aera ist.

Jedi schrieb am 04.11.2003 um 16:15

Zitat von Rektal
@Jedi: Um Tabpages zu simulieren brauchst das :target nicht. Das funktioniert jetzt auch schon mit minimalen code, like
Code:
...

ich meinte eben: man kann auf die Art Tabpages ohne Javsacript machen

Rektal schrieb am 04.11.2003 um 16:51