[gelöst] Block ausgeklappt bzw. eingeklappt anzeigen, je nach Responsive Auflösung
Eingetragen von Jenna (1883)am 28.07.2014 - 13:36 Uhr in
Ich habe mit Views eine Filtergruppe erstellt für die Suche und gebe die im Bootstrap Theme in der linken Spalte aus, Inhalt im Main Bereich bis 990 px.
Unter 990px bricht die linke Spalte richtigerweise nach oben um, so das mobil der Suchblock über der Ausgabe (Main) steht.
Was ich erreichen möchte ist, das der Block bei Desktop Layout immer ausgeklappt ist und bei mobil immer eingeklappt.
Ich habe eine block--views---exp-meine-suche.tpl.php angelegt und das Bootstrap Accordion eingebaut, das funktioniert bestens mit diesen Varianten:
.collapse verbirgt den Inhalt
.collapse.in zeigt den Inhalt
.collapsing wird hinzugefügt, wenn der Übergang startet und wieder entfernt, wenn dieser vorbei ist
Nur momentan eben unabhängig, ob Desktop oder mobil.
Wie kann ich bei Desktop .collapse.in und bei mobil .collapse unterbringen (ohne 2 Blöcke zu erstellen, das hatte ich schon, geht natürlich, ist aber sehr unpraktisch und performance technisch nicht sinnvoll.)
Wenn jemand einen Ansatz dazu hat, würde ich mich sehr über einen Tipp freuen.
Grüße Jenna
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich löse ähnliche
am 31.07.2014 - 09:42 Uhr
Ich löse ähnliche Problematiken via JS.
D.h. erst baue ich in das jeweiligen CSS, das über Media Query eingefügt wird Folgendes ein
body:after {content: 'mobil';
display:none;
}
bzw.
body:after {content: 'web';
display:none;
}
Dann weiß die Seite schon mal, ob sie mobil oder anders ist.
Dazu kommt dann so ein JS:
//Unterschiedliche Schreibweisen für unterschiedliche Browser
if(window.parent.getComputedStyle){
mode = window.parent.getComputedStyle(window.parent.document.body,':after').getPropertyValue('content');
}
if(window.parent.currentStyle){
mode = window.parent.currentStyle(window.parent.document.body,':after').getAttribute('content');
}
if(mode && (mode == '"mobil"' || mode == 'mobil'))
{
//Tue was immer Du für Mobil tun willst
}
Ich konnte es nun doch ohne
am 04.08.2014 - 14:24 Uhr
Ich konnte es nun doch ohne zusätzliches Java Script lösen indem ich in der eigenen block.tpl.php eine weitere ID um den Search Filter gelegt habe und in dem Bootstrap Theme die Anweisung
für "collapse" per Media Queries ab 991px auf display:none; setze.
Somit bleibt der Block ausgeklappt ab 991px und eingeklappt unter 991px.
@montviso, dein Tipp ist super, ich habe mich daran auch versucht und normale Java Script Funktionen werden perfekt ausgeführt je nach web oder mobil.
Mein Problem lag eher daran das ich nicht wußte wie ich das Javascript für diese Anweisung schreiben müßte.
Da aber noch einiges kommt wo ich sicher Java Script benötige hast du mir mit diesem Ansatz schon sehr weiter geholfen, ich friemel mich gerade in Java Script etwas ein und dein Tipp löst schon mal das Problem der grundsätzlichen Abfrage.
Viele Grüße Jenna
Solche CSS-Manipulationen
am 04.08.2014 - 14:51 Uhr
Solche CSS-Manipulationen mache ich heute alle mit jQuery, was viel cooler ist, als JS.
Da rentiert sich wirklich die Beschäftigung mit.
Aber wenn Du eine Lösung ganz ohne JS gefunden hast, ist das natürlich noch besser.
Könntest Du das genauer schreiben, wie du das mit jquery machst?
am 22.11.2014 - 18:11 Uhr
Hallo,
ich benutze das ein Subtheme von Zen unter Drupal 7 und habe im Kopfbereich auch einige Blöcke, die ich auf dem Handy ausblenden will.
Mich würde interessieren, wie Du das mit jquery machst.
Außerdem überlege ich gerade dafür media-queries gerade auch für Handys im Theme einzubinden und noch weitere css-Dateien. Nur bin ich mir unsicher, wie ich es bei diesem Theme machen muss.
Könnest Du oder jemand anderes mir da weiterhelfen.
Vielen Dank.
Viele Grüße
Marita Betz
Guten Morgen Marita, Du
am 24.11.2014 - 08:18 Uhr
Guten Morgen Marita,
Du kannst z.B. mal bei http://www.berggenuss.de den Bildschirm auf Smartphone-Größe schrumpfen.
Dann verändert sich oben die Navi:
Das jQuery dazu geht mit toogle, hide und show.
Ich habe eben mal in der JS-Datei geschaut:
$('#block-block-7 p').text('NAVIGATION EINSCHALTEN');$('#block-block-7').toggle(function() {
$('#block-jquerymenu-4').show();
$('#block-block-7 p').text('NAVIGATION AUSSCHALTEN');
}, function() {
$('#block-jquerymenu-4').hide();
$('#block-block-7 p').text('NAVIGATION EINSCHALTEN');
});
Heute würde ich das vermutlich nicht mehr selbst machen, sondern ein Theme suchen, wo schon vieles automatisch passiert.
Danke für die Info.
am 24.11.2014 - 18:10 Uhr
Liebe Regine,
vielen Dank für Deine Erläuterung. Ist sehr interessant, was alles so machbar ist.
Aber du hast recht, ich suche möglichst auch ein Theme wo möglichst viel schon kann.
Viele herzliche Grüße
Marita