Mobile Suche
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufgefallen
auto
blocken
boxen
code
container
display
fenster
folgen
hilfe
hintergrund
http
image
mobile design
page
panel
pop
position
problem
url
-
Hallo zusammen,
Ich benötige einmal Hilfe bezüglich der Einrichtung einer mobilen Suche. Die eigentliche Suche habe ich schon fertig jedoch habe ich an einer Stelle beim Design Schwierigkeiten.
Der Nivo-Slider ist irgendwie immer vorhanden und lässt sich auch problemlos bedienen. Dies oll allerdings nicht so sein. Sprich ich bekomme zwar mein Pop-Up Fenster auf, jedoch will nur der Slider nicht in den Hintergrund rücken.
Siehe: http://fs5.directupload.net/images/160203/erpdile4.png
Wie bekomme ich diesen in den Hintergrund?
Hier mal der Code für das search Pop Up:
#searchPanel { background-color: #1f1f1f; box-shadow: inset -1px 0 3px 0 rgba(0, 0, 0, 0.5); background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); visibility: hidden; display: block; height: 100%; width:100%; left: 0; overflow-y: auto; position: absolute; top: 44px; bottom:0; right:0; } body.searchPanel-visible #searchPanel { visibility: visible; }
Das dazugehörige JS findet sich hier:
http://marvinkleinmusic.de/assets/js/main.js
Das JS und CSS für den Nivo-Slider ist hier zu finden:
http://marvinkleinmusic.de/assets/slider/
Des Weiteren möchte ich gerne das Pop-Up Fenster von Oben "reinfallen" lassen, als Animation. Wie lässt sich so etwas realisieren?
Liebe Grüße und vielen Dank für eure Hilfe!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich habe leider nicht verstanden, was dein Problem ist.
Mir ist jedoch aufgefallen, dass es keine Möglichkeit gibt, das Suchfeld wieder zu schließen, außer Reload oder einem Link zu folgen. Das gilt sobald die Fenstergröße so klein ist, dass das mobile Design aktiviert wird. Eine Wischgeste habe ich mit der Maus nicht geschafft. -
Hallo nochmal,
test42test schrieb:
Ich habe leider nicht verstanden, was dein Problem ist.
Mir ist jedoch aufgefallen, dass es keine Möglichkeit gibt, das Suchfeld wieder zu schließen, außer Reload oder einem Link zu folgen. Das gilt sobald die Fenstergröße so klein ist, dass das mobile Design aktiviert wird. Eine Wischgeste habe ich mit der Maus nicht geschafft.
Ja ich habe einiges schon gefixt bekommen. Hat zwar ziemlich lange gedauert aber jetzt habe ich nur noch ein Problem. Aus unerfindlichen Gründen wird das searchPanel immer am Ende der Seite angezeigt, sofern die auflösung größer als 1680px ist, obwohl das Element eigentlich unsichtbar sein sollte.
Wie bekomme ich das Panel jetzt unsichtbar?
Der aktuelle Code:
/* Search Panel */ #searchPanel { background-color: #1f1f1f; box-shadow: inset -1px 0 3px 0 rgba(0, 0, 0, 0.5); background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; display: block; height: 100%; min-height: 100%; right: 0; overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: 10003; } body.searchPanel-visible #page-wrapper { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } body.searchPanel-visible #titleBar { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } body.searchPanel-visible #searchPanel { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
// Search Panel. $( '<div id="searchPanel">' + '<form name="form1" method="post" class="quick_search">' + '<input autocomplete="off" id="searchBox" name="searchinput" type="search" placeholder="Search" OnKeyup="search();">' + '</form>' + '<ul id="searchItems" class="linksMobile">' + '</ul>' + '</div>' ) .appendTo($body) .panel({ delay: 500, hideOnClick: true, hideOnSwipe: true, resetScroll: true, resetForms: true, side: 'right', target: $body, visibleClass: 'searchPanel-visible' });
@test42test Ja das ist richtig, aktuell lässt es sich nur mobil per Wischgeste schließen. Ein Button baue ich noch ein, sobald ich es aus der Desktop-Ansicht los bin.
LG -
visibility:hidden
-
bereits ausprobiert, jedoch ohne Erfolg.
-
Ich habe den Code noch nicht komplett durch, aber ich denke, ich bin deinem Problem näher gekommen:
Das Layout schaltet bei verschiedenen Bildschirmbreiten um:
Breite>1680: Suchleiste
1681>Breite>840: Keine Suchleiste
Breite<841: Mobiles Design (Suchleiste im Menü)
Edit:
Genau das war das Problem.
Verändere deine main.css wie folgt (Zeile 87) :
/* Containers */ .container { margin-left: auto; margin-right: auto; } .container.\31 25\25 { width: 100%; max-width: 1750px; min-width: 1400px; } .container.\37 5\25 { width: 1050px; } .container.\35 0\25 { width: 700px; } .container.\32 5\25 { width: 350px; } .container { width: 1400px; } #searchPanel{ display:none; } @media screen and (max-width: 1680px) {
Mit dem Einfügen von
#searchPanel{ display:none; }
wird die Suchzeile auch für Bildschirme größer als 1680px ausgeblendet
Beitrag zuletzt geändert: 6.2.2016 16:18:30 von test42test -
Ja ich habe es für alles unter 1680px gefixt. Aber der Eintrag für größere Auflösungen wird einfach ignoriert. Ich verstehe nur nicht wieso. Das Element verschwindet bis jetzt nur bei größeren Auflösungen, wenn ich dem searchPanel per Knosole noch display:none; hinzufüge. Aber der Code funktioniert ja bei der Navigation auch. Hier mal ein Vergleich zum NavPanel:
#navPanel { background-color: #1f1f1f; box-shadow: inset -1px 0 3px 0 rgba(0, 0, 0, 0.5); background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); background-image: linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png"); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translateX(-275px); -webkit-transform: translateX(-275px); -ms-transform: translateX(-275px); transform: translateX(-275px); -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; display: block; height: 100%; min-height: 100%; left: 0; overflow-y: auto; position: fixed; top: 0; width: 275px; z-index: 10002; } #navPanel .link { border-bottom: 0; border-top: solid 1px rgba(255, 255, 255, 0.05); color: #888; display: block; height: 48px; line-height: 48px; padding: 0 1em 0 1em; text-decoration: none; } #navPanel .link:first-child { border-top: 0; } #navPanel .link.depth-0 { color: #fff; } #navPanel .link .indent-1 { display: inline-block; width: 1em; } #navPanel .link .indent-2 { display: inline-block; width: 2em; } #navPanel .link .indent-3 { display: inline-block; width: 3em; } #navPanel .link .indent-4 { display: inline-block; width: 4em; } #navPanel .link .indent-5 { display: inline-block; width: 5em; } body.navPanel-visible #page-wrapper { -moz-transform: translateX(275px); -webkit-transform: translateX(275px); -ms-transform: translateX(275px); transform: translateX(275px); } body.navPanel-visible #titleBar { -moz-transform: translateX(275px); -webkit-transform: translateX(275px); -ms-transform: translateX(275px); transform: translateX(275px); } body.navPanel-visible #navPanel { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } -
Hab mein Beitrag geändert. Siehe oben
-
Dein Beitrag hatte mich gerade auf eine Idee gebracht. Ich habe mal das CSS nach navPanel durchsucht dabei bin ich auf folgenden Code gestoßen, im Bereich der Narrower.
/* Narrower */ #navPanel, #titleBar { display: none; }
Ich habe mal #searchPanel hinzugefügt und siehe da, voilla alles funktioniert! Vielen Dank für deine Hilfe! :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
