nicht angemeldet
Matthias Apsel
Der Martin
Matthias Apsel
Matthias Apsel
Auge
Gunnar Bittersmann
Auge
Matthias Apsel
Auge
Moin,
an einer Stelle komme ich nicht weiter. Auf vielen Seiten sehe ich dass ich zwischen eine Listen- bzw. Gitteransicht wechseln kann. Dieses passiert scheinbar ohne dass die Seite neu geladen wird (außer es geht so schnell, dass ich es schlicht übersehe) Der Aufbau sieht bei mir gerade so aus:
<h1>Demo Bilder</h1>
<section>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das Bild</figcaption>
</figure>
</section>
<section class="ansicht">
<p><a href="#">Listenansicht</a></p>
<p><a href="#">Gitteransicht</a></p>
</section>
h1 {
margin-left: 1.23em;
}
figure {
float: left;
margin-right: 0.313em;
}
figure:nth-child(3) {
margin-right: 0em;
}
figcaption {
display: none;
}
.ansicht a {
margin-left: 2.5em;
color: #808080;
text-decoration: none;
}
Rufe ich nun die Seite auf, werden meine drei Bilder brav in einer Reihe (sollte der Platz vorhanden sein) angezeigt. Soweit ok! Jetzt möchte ich unten gerne auf einen Link klicken und die Bilder sollen nicht nebeneinander sondern untereinander angezeigt werden.
Als kleine Erweiterung wäre jetzt außerdem noch schön wenn eine Passende Beschreibung zu sehen wäre. Dachte an das neue HTML5 Element figcaption dieses müsste jetzt eingeblendet werden oder?
Vielleicht kann mir von euch hier irgendjemand weiter helfen? Würde dieses gerne umgesetzt bekommen in der Hoffnung dass es nicht so schwer ist.
Om nah hoo pez nyeetz, Thomas!
display: block und display: inline-block wechselnMatthias
Moin Matthias,
- Es besteht kein Grund, die Üaute zu verstümmeln.
warum nicht? In allen Youtube Videos die ich bis jetzt gesehen habe wird dieses so umgesetzt. Außerdem macht es mein HTML Editor (Scriptly) automatisch.
Dein Link schau ich mir gleich an. Sollte ich dazu noch Fragen habe, melde ich mich wieder.
Om nah hoo pez nyeetz, Thomas!
- Es besteht kein Grund, die Üaute zu verstümmeln.
warum nicht?
Vor Jahrmillionen, als es nur den ASCII-Zeichensatz gab, war das nötig. Heute verwendet man UTF-8, da kann man alle Zeichen so eingeben, wie man sie sieht. Einschließlich ▲, ≈ oder ähliches.
Dein HTML-Editor sollte ersetzt werden. Er ist bereits 4 Jahre alt.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>aussagekräftiger Titel deiner Seite</title>
</head>
sollten die ersten Zeilen deines Codes lauten.
Matthias
Moin Matthias,
Dein HTML-Editor sollte ersetzt werden. Er ist bereits 4 Jahre alt.
würde ich machen allerdings ist dieser kostenlos und hat eine schöne Autovervollständigung da ich einfach nicht alle HTML und CSS Eigenschaften und Elemente kenne.
@@Matthias Apsel:
nuqneH
Vor Jahrmillionen, als es nur den ASCII-Zeichensatz gab, war das nötig.
Im ASCII-Zeichensatz gibt es keine Umlaute.
Heute verwendet man UTF-8,
Ui, vermengen wir da gerade die Begriffe Zeichensatz und Zeichencodierung?
Qapla'
Moin Matthias,
- Dieser wiki-Beitrag könnte hilfreich sein
- Du könntest beispielsweise zwischen
display: blockunddisplay: inline-blockwechseln
ist aber nicht wirklich das was ich benötige. Kann es sein dass du meine Frage nicht richtig verstanden hast?
Om nah hoo pez nyeetz, Thomas!
ist aber nicht wirklich das was ich benötige. Kann es sein dass du meine Frage nicht richtig verstanden hast?
- Dieser wiki-Beitrag könnte hilfreich sein
beschäftigt sich mit deiner Frage nach figcaption
- Du könntest beispielsweise zwischen
display: blockunddisplay: inline-blockwechseln
erlaubt das Ändern der Darstellung von nebeneinander zu untereinander
Matthias
Moin Matthias,
erlaubt das Ändern der Darstellung von nebeneinander zu untereinander
wie ich etwas nebeneinander / untereinander bekomme ist mir klar. Mir geht es eher darum wie teile ich dieses dem Browser mit, was er machen soll? Der User klickt auf einen Link (wie müsste dieser aussehen) und wie geht es dann weiter?
Hallo Matthias,
- Es besteht kein Grund, die Üaute zu verstümmeln.
also besser "Ümlaute". ;-)
Ansonsten: Ja, völlig richtig.
Ciao,
Martin
Moin,
ich bin ein Schritt weiter.
<script>
$(document).ready(function(){
$("figure").click(function() {
$("figcaption").css("display", "inline")
});
});
</script>
Das heißt ich würde dann mit einem Klick auf den Link
<section class="ansicht">
<p><a href="#">Listenansicht</a></p>
<p><a href="#">Gitteransicht</a></p>
</section>
jeweils mit jQuery mein CSS abändern! Bin ich hier auf dem richtigen Weg?
Moin,
ok ging wohl doch einfacher als gedacht. Ob es richtig ist bzw. ob man es besser machen kann, weiß ich nicht, bin aber für alle weiteren Optionen / Verbesserung offen.
Mein fertiger Code sieht so aus
<h1>Demo Bilder</h1>
<section>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das Bild</figcaption>
</figure>
</section>
<section class="ansicht">
<p class="liste">Listenansicht</p>
<p class="gitter">Gitteransicht</p>
</section>
h1 {
margin-left: 1.23em;
}
figure {
float: left;
margin-right: 0.313em;
}
figure:nth-child(3) {
margin-right: 0em;
}
figcaption {
display: none;
}
.ansicht {
margin-left: 2.5em;
color: #808080;
text-decoration: none;
}
.gitter {
display: none;
}
<script>
$(document).ready(function(){
$(".liste").click(function() {
$("figcaption").css("display", "inline");
$(".liste").css("display", "none");
$(".gitter").css("display", "inline");
});
$(".gitter").click(function() {
$("figcaption").css("display", "none");
$(".liste").css("display", "inline");
$(".gitter").css("display", "none");
});
});
</script>
Om nah hoo pez nyeetz, Thomas!
Du solltest es vermeiden, CSS-Eigenschaften direkt mit JavaScript zu setzen. Es reicht, wenn du eine eine Klasse setzt und dann mit CSS entsprechend arbeitest. http://jsfiddle.net/Matthias_Apsel/qtr0fbna/
Matthias
Moin Matthias,
Du solltest es vermeiden, CSS-Eigenschaften direkt mit JavaScript zu setzen. Es reicht, wenn du eine eine Klasse setzt und dann mit CSS entsprechend arbeitest. http://jsfiddle.net/Matthias_Apsel/qtr0fbna/
vielen Dank für dein Beispiel. Sieht viel besser vom Code aus als meines. Allerdings habe ich noch eine Frage dazu.
In deinem Beispiel wird der <section> eine class="" hinzugefügt, das sieht dann so aus <section class="zeilenansicht"> wenn ich nun wieder auf Gitteransicht klicke, sieht es plötzlich so aus <section class="">. Darf ich denn einfach eine leere class schreiben?
Om nah hoo pez nyeetz, Thomas!
In deinem Beispiel wird der
<section>eine class="" hinzugefügt, das sieht dann so aus<section class="zeilenansicht">wenn ich nun wieder auf Gitteransicht klicke, sieht es plötzlich so aus<section class="">. Darf ich denn einfach eine leere class schreiben?
Ja.
Allerdings schreibst du keine leere Klasse, sondern das class-Attribut hat keinen Wert. Du kannst auch immer den Validator fragen, er beantwortet solche Fragen.
Matthias
Moin Matthias,
Ja.
Allerdings schreibst du keine leere Klasse, sondern das class-Attribut hat keinen Wert. Du kannst auch immer den Validator fragen, er beantwortet solche Fragen.
Danke für deine Hilfe.
Moin Matthias,
hätte noch eine Frage zu deinen <buttons>. Ich kann ein Button ja auf disabled setzten
<p>
<button id="gitter" disabled>Gitteransicht</button>
<button id="zeilen">Zeilenansicht</button>
</p>
Wenn ein User auf Zeilenansicht klickt, sollte oben das disabled weg und dafür beim aktuellen geklickten Button hin. Wie müsste ich dieses in dein JS Code mit einbauen? Ein addClass ist es ja nicht oder?
<h1>Demo Bilder</h1>
<p>
<button id="gitter" disabled>Gitteransicht</button>
<button id="zeilen">Zeilenansicht</button>
</p>
<section>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das erste Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das zweite Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das dritte Bild</figcaption>
</figure>
</section>
<script>
$(document).ready(function(){
$('#zeilen').click(function(){
$('section').addClass('zeilenansicht');
});
$('#gitter').click(function(){
$('section').removeClass('zeilenansicht');
});
});
</script>
h1 {
margin-left: 1.23em;
}
p {
margin-left: 2.4em;
}
figure {
display: inline-block;
}
figcaption {
display: none;
}
.zeilenansicht figure {
display: block;
padding-top: 20px;
}
.zeilenansicht figcaption {
display: block;
}
Dann hätte ich noch eine letzte Frage, ist es möglich diesen Status der vom User gewählt wurde in einer Session oder Cookie zu speichern? Wenn ja ist es sehr aufwendig?
Ich weiß dass ich eine Session so starten kann
session_start();
$_SESSION['status'] = "";
Aber wie wird der status gefüllt? Habe ich mit JS auch hier eine Möglichkeit?
Moin,
mein Problem <button> habe ich hinbekommen
<script>
$(document).ready(function(){
$('#zeilen').click(function(){
$('section').addClass('zeilenansicht');
$('#zeilen').attr('disabled', 'disabled');
$('#gitter').removeAttr('disabled', 'disabled');
});
$('#gitter').click(function(){
$('section').removeClass('zeilenansicht');
$('#zeilen').removeAttr('disabled', 'disabled');
$('#gitter').attr('disabled', 'disabled');
});
});
</script>
Jetzt geht es nur noch um folgendes:
Ist es möglich diesen Status der vom User gewählt wurde in einer Session oder Cookie zu speichern? Wenn ja ist es sehr aufwendig?
Ich weiß dass ich eine Session so starten kann
session_start();
$_SESSION['status'] = "";
Aber wie wird der status gefüllt? Habe ich mit JS auch hier eine Möglichkeit?
Hallo
Jetzt geht es nur noch um folgendes:
Ist es möglich diesen Status der vom User gewählt wurde in einer Session oder Cookie zu speichern? Wenn ja ist es sehr aufwendig?
Ich weiß dass ich eine Session so starten kann
session_start();
$_SESSION['status'] = "";
Das ist PHP. Das wird auf dem Server ausgeführt und die Ausführung ist beendet, bevor der Browser die resultierenden Daten bekommt. Das ist also nicht das Richtige für dich, da du das Cookie anhand einer Aktion im Browser setzen willst (dann, wenn ein PHP-Skript längst abgearbeitet ist).
> Aber wie wird der status gefüllt? Habe ich mit JS auch hier eine Möglichkeit?
Ja. [Google nach Cookie mit JS](https://www.google.com/search?q=Cookie+mit+JS). Welches der Suchergebnisse die beste Implementierung bietet, kann ich dir nicht sagen, da ich selbst keine per JS gesetzte Cookies nutze. Frag' bei Unklarheiten hier einfach noch einmal nach.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
@@Matthias Apsel:
nuqneH
Allerdings schreibst du keine leere Klasse, sondern das class-Attribut hat keinen Wert.
Doch, es hat einen Wert: "".
Qapla'
Moin,
wollte mein Script noch etwas erweitern und zwar um einen "sanften" Übergang. Ein Beispiel habe ich hier http://photecs.de/kategorie/studio/halterungen-und-klemmen/ die Frage ist nur, wie bekomme ich dieses hin? Gehe mal davon aus, dass ich mit CSS hier nicht allein weiter komme oder?
Vielleicht hat jemand von euch sogar eine fertige Lösung die ich verwenden kann. Meine Datei sieht derzeit so aus:
<script src="jQuery.1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#zeilen').click(function(){
$('section').addClass('zeilenansicht');
$('#zeilen').attr('disabled', 'disabled');
$('#gitter').removeAttr('disabled', 'disabled');
});
$('#gitter').click(function(){
$('section').removeClass('zeilenansicht');
$('#zeilen').removeAttr('disabled', 'disabled');
$('#gitter').attr('disabled', 'disabled');
});
});
</script>
h1 {
margin-left: 1.23em;
}
p {
margin-left: 2.4em;
}
figure {
display: inline-block;
}
figcaption {
display: none;
}
.zeilenansicht figure {
display: block;
padding-top: 20px;
}
.zeilenansicht figcaption {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Test - Seite</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Demo Bilder</h1>
<p>
<button id="gitter" disabled >Gitteransicht</button>
<button id="zeilen">Zeilenansicht</button>
</p>
<section>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das erste Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das zweite Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das dritte Bild</figcaption>
</figure>
</section>
</body>
</html>
Hier kann es Live getestet werden: http://jsfiddle.net/se44g7p1/
Moin,
Tach auch
wollte mein Script noch etwas erweitern und zwar um einen "sanften" Übergang. Ein Beispiel habe ich hier http://photecs.de/kategorie/studio/halterungen-und-klemmen/ die Frage ist nur, wie bekomme ich dieses hin? Gehe mal davon aus, dass ich mit CSS hier nicht allein weiter komme oder?
Aber doch doch. Transition ist das Zauberwort und es wird auch in allen aktuellen Browsern unterstützt.
Tschö, Auge
Om nah hoo pez nyeetz, Auge!
Aber doch doch. Transition ist das Zauberwort und es wird auch in allen aktuellen Browsern unterstützt.
Jedenfalls nicht mit der Lösung display block / inline-block
Matthias
Hallo
Aber doch doch. Transition ist das Zauberwort und es wird auch in allen aktuellen Browsern unterstützt.
Jedenfalls nicht mit der Lösung display block / inline-block
Thomas' verlinktes Beispiel läuft ja mit JS und blendet erst die eine Ansicht aus und dann die andere ein. Das sollte sich – egal, ob sinnvoll oder nicht – mit CSS nachahmen lassen. Erst die Farben zu #fff hin ausblenden, dann die Ansicht umschalten und die Farben wieder einblenden.
Tschö, Auge