[GELÖST] responsive website: bootstrap popover und tooltip

PatriziaF · 02. Dezember 2013 20:52

liebe cmsler,

ich stehe schon wieder vor einem problem.
und zwar habe ich auf trapa.webdots.at das bootstrap popover für diverse module im einsatz (die kleinen icons rechts).
benutzer: editor
pw: kiska01

das heißt unter diesen icons habe ich einen multilang-switch, eine suche, einen loginbereich und news versteckt.

soll: man klickt auf das icon und kann dann den inhalt bearbeiten.

ich dachte dabei an die trigger-funktion click oder focus. leider funktioniert keine der beiden.
warum?

bei focus habe ich das problem, dass wenn ich zb auf das suche-feld klicke dann schnappt das popover wieder zu (weil das popover nur auf dem kleinen icon liegt denke ich)

bei click hab ich das problem, dass wenn ich auf eines der elemente klicke die site neu geladen wird und damit auch die sprachauswahl beim teufel ist.

habt ihr dafür eine lösung?

lg patrizia

mike-r · 03. Dezember 2013 23:10

Schwierig rauszufinden, welcher Klick da welches/e Element/e aktiviert und deaktiviert.
Sicher ne recht einfache Geschichte für einen JS-Hacker.

Ich werf mal ein, dass direkte Links für den Benutzer (und für Dich als Snowboarder...) die bessere Lösung wären.
Klick auf de/en/fr nimmt auf dem Display etwa fürchterliche(!!!111eins) 8em in Anspruch, Deine Lösung mehrere sinnlose Klicks und mind. 180em.
Suche ist nicht ganz so desaströs, aber kann man auch direkt einbinden.
Login das selbe in Grün. Da gehört auf nen Link ne Loginseite her und fertig.

Das Schlimmste an diesem ganzen überflüssigen Wackelzeug ist, dass es von Suchmaschinen nicht vernünftig indiziert wird. (Wenn man mal echte Menschen aussen vorlässt, die aus welchen Gründen auch immer $welche Browser verwenden)

PatriziaF · 03. Dezember 2013 23:17

1. ist das nur für desktop und tablet und da ist die breite völlig legitim
2. brauche ich diese dinge nicht im index (wer braucht schon nen login-bereich im index?)
3. ist das design bereits fixiert ;-) und ich kein designer
4. gibts für smartphone ne alternative
5. wird es auch zusätzlich noch direkte links geben (also seiten dafür)

lang-selection ist aktuell auf focus
search auf click
login auf click
news auf click

wäre also für infos sehr dankbar ;-)

mike-r · 03. Dezember 2013 01:04

Welchen Teil von:

Ich werf mal ein, dass direkte Links für den Benutzer (und für Dich als Snowboarder...) die bessere Lösung wären

hast Du jetzt genau nicht verstanden?

1. ist das nur für desktop und tablet und da ist die breite völlig legitim

Weil?

2. brauche ich diese dinge nicht im index (wer braucht schon nen login-bereich im index?)

Wer genau sagte da was dazu?

3. ist das design bereits fixiert ;-) und ich kein designer

Sehr gut. Dann kannst Du dem Designer der den Quatsch verbrochen will sicher sagen, dass er ein Honk ist.

4. gibts für smartphone ne alternative

Fein!

5. wird es auch zusätzlich noch direkte links geben (also seiten dafür)

Sehr gut. Wenn man sich das mal live anschauen kann, wenn es aktiv ist ... wäre recht zielführend für konkrete Hilfeangebote.

Beitrag geändert von mike-r (03. Dezember 2013 01:06)

NaN · 03. Dezember 2013 10:11

Also um die Kritik mal etwas konstruktiver werden zu lassen:

Mike-r hat schon nicht unrecht.
Deine Seite funktioniert ohne Javascript nicht.
D.h. die Icons habe keinerlei Funktion.
Das solltest Du ändern.

Am besten Du gibst den Links eine echte URL zu einer Seite, die das ausgibt, was man hinter diesem Icon vermutet. D.h. bei Klick auf Suche -> eine Seite mit Suchformular, bei Login -> eine Login-Seite. Bei News ... usw.

Bei der Sprachauswahl ist es nicht ganz so einfach. Da wäre pro Sprache ein Link die bessere Wahl. (Kannst Du ja dann mit Javascript wieder ausblenden um nur den Popover-Link anzuzeigen)

Wenn das dann funktioniert, kannst Du ja mit Javascript die sogenannte User-Experience verfeinern und die Formulare (und auch die Sprachlinks) mit diesem Popover anzeigen. Woher die Formulare kommen, ist jetzt erstmal trivial. Entweder sie stehen bereits im Quelltext und werden dann nur eingeblendet, oder sie werden via Ajax von den zugehörigen Seiten geladen.

Das nennt man Unobtrusive JavaScript. Ist ne feine Sache. Weil man dann immer auf der sicheren Seite ist.

Was die Größe angeht, kann man ja später nochmal drüber reden.

Zu Deiner Frage:
Ich blick bei Bootsraps popover nicht so ganz durch, was das soll.
Da wird der Inhalt eines HTML-Elements kopiert und woanders angezeigt.
Technisch gesehen ist das Suchformular bei Klick auf das Icon dann doppelt vorhanden.
Wozu?
Das ist vor allem dann blöd, wenn da IDs drin vorkommen. Die dürfen nämlich nicht doppelt vorkommen. Das kann nämlich Javascript-Funktionen verwirren.

Ich bin mir sicher dass die Bootstrap-Jungs damit irgendeinen Plan verfolgt haben, ich bezweifle allerdings, dass der Aufbau Deiner Seite tatsächlich Teil dieses Plans war.
Konkret: da Dein Suchformular ja normalerweise "Hidden" ist, muss es ja nur eingeblendet werden. Da muss nix kopiert und im Quelltext gleich daneben nochmal eingefügt werden. (beobachte mal im Firefox, was da beim Klick passiert. Irgendwie verwirrend, oder? wink )
Da wäre es doch einfacher, die Links mit einer simplen jQuery Funktion zu belegen. Der kann man dann auch ein Callback mitgeben. D.h. nach dem Einblenden -> Focus auf dieses oder jenes Textfeld setzen.

Wenn Du unbedingt bei popover bleiben willst, dann schau Dir doch mal den Aufruf genauer an:

$(function () {
$("#fo-search").popover({
html : true,
placement: 'right',
content: function() {
return $('#popover_content_search').html();
}
});
});

Da ist eine Funktion, die vorgibt, was als Inhalt angezeigt werden soll. (Hier würde sich übrigens hervorragend eine AJAX-Funktion anbieten wink )
Bevor also der Inhalt des Containers mit der ID "popover_content_search" zurückgegeben wird, kannst Du Doch in diesem Container den Focus auf das Suchfeld setzen:

$(function () {
$("#fo-search").popover({
html : true,
placement: 'right',
content: function() {
$("#popover_content_search input.search-input").focus();
return $('#popover_content_search').html();
}
});
});

Edit: Nee. Klappt doch nicht. Hab's gerade ausprobiert.
Hätte auch klar sein müssen. Es wird ja nur das HTML zurückgegeben, aber nicht der Fokus. Der bleibt im hidden div.
Ich glaube wirklich, popover() ist hier die falsche Wahl.

Nimm lieber jQuery .toggle()

Beitrag geändert von NaN (03. Dezember 2013 10:22)

czarnowski · 03. Dezember 2013 13:17

Folgende Meldung wird geliefert:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

NaN · 03. Dezember 2013 16:23

Folgende Meldung wird geliefert:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Und das hilft bei der Lösung des Problems inwiefern?
Das stammt mit Sicherheit aus der verwendeten jQuery-Version oder einem der Bootstrap-Javascripts und ließe sich bestimmt mit einem Update der Scipte beheben.. Aber das ist weder Ursache noch Lösung des hier genannten Problems. Oder hab ich das Problem falsch verstanden?

czarnowski · 03. Dezember 2013 18:00

NaN schrieb:

Und das hilft bei der Lösung des Problems inwiefern?

Nur wenn man dem nachgeht, sonst nichts.
Browser und Versionen können da recht unterschiedlich reagieren.
Immerhin geht es um ein returnValue der mit Sicherheit ausgewertet wird.

Unter Chrome last stable Linux funktioniert der Sprachschalter nicht.

Suchschalter funzt.
Loginschalter funzt.
News funzt - ist aber nicht bearbeitbar.

Aber es werden immer Probleme beim returnValue angezeigt.

PatriziaF · 03. Dezember 2013 22:10

NaN schrieb:

Also um die Kritik mal etwas konstruktiver werden zu lassen:
Mike-r hat schon nicht unrecht.
Deine Seite funktioniert ohne Javascript nicht.
D.h. die Icons habe keinerlei Funktion.
Das solltest Du ändern.

danke fürs konstruktive kritik lassen - damit kann ich dann auch was anfangen ;-)
mike-r ich kann am design nichts ändern - der zug ist abgefahren :-P

javascript: das haben sie aber mit deiner lösung dann auch nicht oder? weil du schlägst ja auch jquery vor. oder check ich da was nicht?

NaN schrieb:

Am besten Du gibst den Links eine echte URL zu einer Seite, die das ausgibt, was man hinter diesem Icon vermutet. D.h. bei Klick auf Suche -> eine Seite mit Suchformular, bei Login -> eine Login-Seite. Bei News ... usw.

das heißt hinter den icons echte seiten (die zb im menü ausgeblendet sind). news würde ich dann eher direkt anzeigen (also ohne wegklapp effekt oder?)

NaN schrieb:

Bei der Sprachauswahl ist es nicht ganz so einfach. Da wäre pro Sprache ein Link die bessere Wahl. (Kannst Du ja dann mit Javascript wieder ausblenden um nur den Popover-Link anzuzeigen)

ja aber da bin ich ja dann genau bei der variante die ich jetzt auch habe oder? und da hab ich ja auch wieder das problem mit javascript? wobei dann irgendwie gar nichts funktionieren würde mittlerweile :-)

NaN schrieb:

Wenn das dann funktioniert, kannst Du ja mit Javascript die sogenannte User-Experience verfeinern und die Formulare (und auch die Sprachlinks) mit diesem Popover anzeigen. Woher die Formulare kommen, ist jetzt erstmal trivial. Entweder sie stehen bereits im Quelltext und werden dann nur eingeblendet, oder sie werden via Ajax von den zugehörigen Seiten geladen.

ja das hab ich und brauch ich nicht wirklich ;-)

NaN schrieb:

Das nennt man Unobtrusive JavaScript. Ist ne feine Sache. Weil man dann immer auf der sicheren Seite ist.

hab ich das richtig verstanden: nur feintuning? keine grundsätzlichen funktionalitäten?

ich hab mich mal mittlerweile mit meiner grafikerin kurzgeschlossen und warte auf ihr feedback zur lösungsoption mit den direkten seiten (was ja bei suche und login gut funktioniert, bei mle und news allerdings nicht).

danke euch für das zahlreiche feedback und die lösungsmöglichkeiten!

mike-r · 04. Dezember 2013 02:49

PatriziaF schrieb:

NaN schrieb:
Das nennt man Unobtrusive JavaScript. Ist ne feine Sache. Weil man dann immer auf der sicheren Seite ist.
hab ich das richtig verstanden: nur feintuning? keine grundsätzlichen funktionalitäten?

Nein. Hast Du falsch verstanden. Funktionalitäten funktionieren alle in HTML prima. Wenn jemand wo draufklickt, dann kommt er auf die entsprechende Seite. Solche Sachen gehen seit über 20 Jahren prima, netz-, browser- und weltweit.
Wackelschnickschnack ist ne schöne Sache, wenn man die zusätzlich einbaut. Funktioniert auch seit über 20 Jahren ...

Mal noch ne recht DAU-freundliche recht alte aber trotzdem extrem aktuelle Doku zum Thema: http://ichwill.net/

Beitrag geändert von mike-r (04. Dezember 2013 02:50)

NaN · 04. Dezember 2013 10:18

javascript: das haben sie aber mit deiner lösung dann auch nicht oder? weil du schlägst ja auch jquery vor. oder check ich da was nicht?

Bau doch einfach mal die Seite ohne Javascript.
Die Icons können alle dort bleiben wo sie sind.
Aber gib ihnen als href nicht einfach # sondern einen Link zu einer Seite.
Dazu kannst Du z.B. {cms_selflink} verwenden.
D.h. die Icons haben ohne Javascript sehr wohl eine Funktion.

Diese Funktion soll aber nur als Fallback dienen, wenn kein Javascript vorhanden ist (warum auch immer). D.h. jetzt kannst Du jQuery einsetzen und die Links bei den Icons mit einer Funktion belegen, die am Ende false zurückgibt. Dadurch wird der Link vom Browser nicht geladen. Stattdessen kann diese Funktion eben diese versteckten DIVs anzeigen.

das heißt hinter den icons echte seiten (die zb im menü ausgeblendet sind).

Bingo.
Ob die Seiten dann bei Klick auch geladen werden, ist Deine Sache.
(Siehe oben)

news würde ich dann eher direkt anzeigen (also ohne wegklapp effekt oder?)

Kannst Du halten wie Du willst.
Meine persönliche Meinung: Wenn man, um die News zu sehen, erst irgendwo drauf klicken muss, dann kannst Du die News auch einfach ohne Effekte mit einem Link namens NEWS verlinken wink
(Der Pfeil als Icon allein ist da meiner Meinung nach auch nicht wirklich aussagekräftig)

ja aber da bin ich ja dann genau bei der variante die ich jetzt auch habe oder? und da hab ich ja auch wieder das problem mit javascript? wobei dann irgendwie gar nichts funktionieren würde mittlerweile :-)

Nein. So meinte ich das nicht.
Ich meinte drei ganz normale Links am rechten Rand.
So wie auch die anderen Icons.
Und mit Javascript kannst Du sie ja dann so formatieren (muss man ja z.B. nur eine Klasse ändern), dass es so aussieht wie jetzt. Mit einem extra Klick. Ist aber die Frage, ob sich die Mühe überhaupt lohnt.
Auch hier wieder meine persönliche Meinung: Zweimal klicken um die Sprache zu ändern? Das ist zu viel. So viel Platz nehmen drei Icons ja nun auch wieder nicht weg. Du sagtest ja, das Layout sei für Desktop und Tablet. Da sollten doch Platzprobleme eigentlich selten der Fall sein. Wichtiger ist, dass es bei beiden Geräten auch funktioniert.

Um mal auf Deine ursprüngliche Frage zurückzukommen...
Du willst den Fokus im Textfeld haben, sobald es sichtbar ist.
Wie Du selbst festgestellt hast: Das geht nicht, wenn die Links selbst auf das Event Focus hören. Weil der Fokus immer nur auf einem einzigen Element liegen kann. Sobald Du den änderst, klappt das DIV wieder zu. So weit so logisch.

Wenn Du ein anderes Event wie z.B. Click verwendest, wirst Du bereits festgestellt haben, dass sich die einzelnen Container nicht abwechselnd ein-/ausblenden lassen. D.h. klicke ich auf Suche und dann auf Login, überlagern sich diese DIVs.

Mein Vorschlag: entweder Du verzichtest auf den Fokus im Textfeld, oder du nimmst nicht diese popover Funktion. Die ist zwar ganz nett, aber ich glaube die ist ursprünglich für etwas völlig anderes gedacht. (siehe hier)

PatriziaF · 04. Dezember 2013 10:22

danke nan für deine zeit.

ich werde noch rücksprache mit der grafikerin halten, aber ich glaube ich verzichte auf den ganzen javascript schmafu und werde wie du gesagt hast seite dahinter setzen.

ich brauche halt noch infos von der grafikerin wie wir das mit den sprachen lösen.

news werde ich denke ich auch fix einblenden - braucht ja eh nicht so viel platz.

DANKE VIELMALS!
weiß euer feedback wirklich sehr zu schätzen!!

lg

Beitrag geändert von PatriziaF (04. Dezember 2013 10:23)

Forum für CMS/made simple

#1 02. Dezember 2013 20:52

[GELÖST] responsive website: bootstrap popover und tooltip

#2 03. Dezember 2013 23:10

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#3 03. Dezember 2013 23:17

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#4 03. Dezember 2013 01:04

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#5 03. Dezember 2013 10:11

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#6 03. Dezember 2013 13:17

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#7 03. Dezember 2013 16:23

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#8 03. Dezember 2013 18:00

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#9 03. Dezember 2013 22:10

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#10 04. Dezember 2013 02:49

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#11 04. Dezember 2013 10:18

Re: [GELÖST] responsive website: bootstrap popover und tooltip

#12 04. Dezember 2013 10:22

Re: [GELÖST] responsive website: bootstrap popover und tooltip

Fußzeile des Forums