Oben fixieren - Probleme mit Firefox

fuerteventura-2007 schrieb am 17.04.2017 um 17:45 Uhr

Hallo Forum,

ich möchte eine Gruppe von Objekten (stellt ein Sub-Menü auf der Seite dar) mit der Funktion "Oben fixieren" beim Scollen am oberen Rand festpinnen und über die Seite schweben lassen. Die Elemente haben zudem eine Auftauchen-Animation (von links einblenden).

Das funktioniert in der Vorschau auch sehr schön. Im Firefox springen die Elemente aber nach rechts aus der Seite heraus, sobald sie den oberen Rand berühren!

Meine Erkenntnis bisher:
Offenbar vertragen sich Animation und Fixierung im Firefox nicht. Lasse ich die Animation weg, funktioniert die Fixierung im Firefox.

Ich habe:

  • Web Designer Premium 12
  • Firefox 52.0.2
  • getestet mit Win7 und Win10

Kennt jemand vllt. dieses Problem oder hat gar eine Lösung zur Hand?

Viele Grüße
Michael

Kommentare

marboe schrieb am 17.04.2017 um 18:06 Uhr 
Offenbar vertragen sich Animation und Fixierung im Firefox nicht

Das kann ich so nicht bestätigen. Hast du einen Link?

Gruß Marboe

fuerteventura-2007 schrieb am 17.04.2017 um 18:11 Uhr

Hallo Martina,

nein, keinen Link - bin erst in der Entwicklung.
Ich habe ein kleinesBeispiel-Objekt erstellt. Da diese Dateitypen aber nicht hochgeladen werden dürfen, habe ich es gezippt und die Dateiendung in .jpg geändert. Wenn Du es zurückänderst in .zip könnte es funktionieren.

Viele Grüße
Michael[[OTHER:3765325]]

fuerteventura-2007 schrieb am 17.04.2017 um 18:14 Uhr

... oder auch nicht...[[OTHER:3765326]]

fuerteventura-2007 schrieb am 17.04.2017 um 18:15 Uhr

scheint keine Möglichkeit zu geben, den Upload zu überlisten... ;-)

Oder hast Du eine Idee?

fuerteventura-2007 schrieb am 17.04.2017 um 18:25 Uhr

Zumindest kann ich Bildschirmfotos des putzigen Verhaltens hochladen...

Wenn ich die Option "auf Seitenrand beschneiden" abwähle, sehe ich die übrigen Kästchen rechts neben der Seite - mit deutlich größeren Abständen.

.

marboe schrieb am 18.04.2017 um 07:40 Uhr

Mhm. Das ist natürlich schwierig da zu helfen, wenn man nicht mehr Infos hat.
Probiere mal alle fixierten Elemente in der Ebenengalerie an oberste Stelle zu platzieren.

Ich nehme an, alle 4 Kästchen / Buttons sind gruppiert? Dann müssten sie eigentlich oben fixiert bleiben. Probleme könnte ich mir vorstellen, wenn von diesen Buttons aus neue Ebenen öffnen sollen.
Wie sieht es aus, wenn du eine zweite Navi daraus machst? Da hier der generierte Code deutliche Vorteile bietet, wäre das vielleicht vorzuziehen.
Hierzu solltest du die Navi in einem gesonderten Projekt "bauen" und dann rüberholen und fixieren/animieren. Dann erst wiederholen lassen.
Ein Beschneiden auf Seitenrand hat m.E. darauf keinen Einfluss.

Kommst du damit weiter?
Der neueste Firefox hat schon erhebliche Änderungen mitgebracht; allerdings hatte dies bisher bei meinen Projekten keinen Einfluss auf die genannten Elemente. Gruß Marboe

fuerteventura-2007 schrieb am 18.04.2017 um 10:32 Uhr

Hallo Martina,

ich poste hier einfach mal den gesamten code der index.htm (s. u.). - ist ja gar nicht so viel.

Ich habe das Beispiel bewusst einfach gehalten. Es enthält nur die vier bunten Kästen. Kein Menü, keine Gruppierung, alles auf Ebene MouseOff.

In meinem "echten" Projekt handelt es sich um eine Sub-Menü-Leiste. Sie ist grafisch ein wenig komplexer mit runden Bild-Buttons etc.. Ich glaube, das bekomme ich mit der NavBar nicht hin.

Was haben die Entwickler bloß aus unserem schönen Firefox gemacht...? 🤓

Viele Grüße
Michael

 

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.8.7.0.356"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>index</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_fonts.css"/>
 <script type="text/javascript"><!--
 if(navigator.userAgent.indexOf('MSIE')!=-1 || navigator.userAgent.indexOf('Trident')!=-1){ document.write('<link rel="stylesheet" type="text/css" href="index_htm_files/xr_fontsie.css"/>');}
 --></script>
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh0";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
 <script type="text/javascript" src="index_htm_files/prs4.js"></script>
 <script type="text/javascript" src="index_htm_files/jquery.js"></script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/ani.css"/>
</head>
<body class="xr_bgb0">
<div class="xr_ap" id="xr_xrii"  style="width: 100%; height: 100%; min-width: 760px; min-height: 1787px; top:0%; left:0%; overflow:hidden;">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 1787px; top:0px; left:50%; margin-left: -380px; text-align: left;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr");xr_rxc();</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_pp">
 <!--[if lt IE 9]>
 <img class="xr_ap" src="index_htm_files/3.png" alt="" title="" style="left: -2px; top: -2px; width: 774px; height: 1801px;"/>
 <![endif]-->
 <!--[if gte IE 9]><!-->
 <span class="xr_ar" style="left: 0px; top: 0px; width: 760px; height: 1787px; box-shadow: 5px 5px 6px rgba(0,0,0,0.25); background-color: #E5E5E5;"></span>
 <!--<![endif]-->
</div>
<div id="xr_xrc1" class="xr_ap xr_xri_ xr_xrc" style="width: 760px; height: 1787px; overflow:hidden;">
 <span class="xr_trigo_xr_ce0" style="display:block;position:absolute;left:18px;top:293px;width:163px;height:88px;z-index:-1;"></span>
 <span class="xr_trigo_xr_ce0" style="display:block;position:absolute;left:18px;top:293px;width:162px;height:87px;z-index:-1;"></span>
 <div class="xr_ap xr_ac" id="xr_xpxr_11" style="left:0; top:0; visibility: hidden; display: none;">
 <span class="xr_ar xr_stt" style="left: 18px; top: 293px; width: 162px; height: 87px; background-color: #FFFE7F;"></span>
 </div>
 <span class="xr_trigo_xr_ce1" style="display:block;position:absolute;left:584px;top:293px;width:162px;height:88px;z-index:-1;"></span>
 <span class="xr_trigo_xr_ce1" style="display:block;position:absolute;left:584px;top:293px;width:162px;height:87px;z-index:-1;"></span>
 <div class="xr_ap xr_ac" id="xr_xpxr_31" style="left:0; top:0; visibility: hidden; display: none;">
 <span class="xr_ar xr_stt" style="left: 584px; top: 293px; width: 162px; height: 87px; background-color: #FF7FFE;"></span>
 </div>
 <span class="xr_trigo_xr_ce2" style="display:block;position:absolute;left:395px;top:293px;width:163px;height:88px;z-index:-1;"></span>
 <span class="xr_trigo_xr_ce2" style="display:block;position:absolute;left:395px;top:293px;width:162px;height:87px;z-index:-1;"></span>
 <div class="xr_ap xr_ac" id="xr_xpxr_51" style="left:0; top:0; visibility: hidden; display: none;">
 <span class="xr_ar xr_stt" style="left: 395px; top: 293px; width: 162px; height: 87px; background-color: #7FFFFF;"></span>
 </div>
 <span class="xr_trigo_xr_ce3" style="display:block;position:absolute;left:207px;top:293px;width:162px;height:88px;z-index:-1;"></span>
 <span class="xr_trigo_xr_ce3" style="display:block;position:absolute;left:207px;top:293px;width:162px;height:87px;z-index:-1;"></span>
 <div class="xr_ap xr_ac" id="xr_xpxr_71" style="left:0; top:0; visibility: hidden; display: none;">
 <span class="xr_ar xr_stt" style="left: 207px; top: 293px; width: 162px; height: 87px; background-color: #7FFF81;"></span>
 </div>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden; z-index:3;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
</div >
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();repMobFonts();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>

 

 

 

marboe schrieb am 18.04.2017 um 17:34 Uhr 
Ich habe das Beispiel bewusst einfach gehalten. Es enthält nur die vier bunten Kästen. Kein Menü, keine Gruppierung, alles auf Ebene MouseOff.

Und diese "bunten Kästchen" springen weg - ohne dass sonstiger Code enthalten wäre?

handelt es sich um eine Sub-Menü-Leiste. Sie ist grafisch ein wenig komplexer mit runden Bild-Buttons etc.. Ich glaube, das bekomme ich mit der NavBar nicht hin.

[[Doch natürlich. Warum sollte das nicht gehen? Du musst nur aufpassen, dass deine Bildchen als png abgespeichert werden weil du sonst ein Rechteck um die Buttons gezeigt bekommst. Aber grundlegend spricht nix gegen das Selbsterstellen einer Navileiste auch aus Bildern. Da würde ich auf jeden Fall dran bleiben. Dafür sind die Vorteile einfach zu gut.]] Erste Versuche mit der neuen Version zeigen Probleme ... scheint doch nicht zu gehen?? Öhm. Ich probiere noch ein bisschen.

Gruß Marboe, die aus deinem Quelltext problembezogen nix herauslesen kann. Leider 😒

marboe schrieb am 18.04.2017 um 17:59 Uhr

Doch es geht noch. Puh.

Ich habe den klassischen Fehler gemacht und die Buttonbeschriftung vergessen.
Es geht also folgendermaßen:

Bild als png importieren bzw über Eigenschaften als png abspeichern lassen
Text für Beschriftung erstellen und positionieren. Ggf einen transparenten Text wählen.
Beides gruppieren

Gruppe markieren, STRG C
Gruppe an Position in Mouse Over einfügen und verändern bzw anderes Bild

Beide Elemente aus beiden Ebenen markieren
Weiche Gruppe erstellen

Nun sind beide Elemente verbunden und man kann per Rechtsklick eine Navileiste erstellen.
Beispiel:

Die Smileys sind die neue Navi.

In MouseOver leichte Veränderungen

Damit kann man also schon schöne Sachen erstellen 🙃
Gruß Marboe

fuerteventura-2007 schrieb am 18.04.2017 um 18:09 Uhr

Hallo Martina,

ich hab ja nicht gesagt, dass das mit der NavBar nicht geht - nur, dass ich keine Idee habe, wie ich das anstelle 😩.

Ich habe jetzt die Hilfe bemüht und einen Hinweis gefunden:

Haben Sie erst einen funktionierenden Button, können Sie diesen sehr einfach in eine Navigationsleiste verwandeln. Wählen Sie ihn aus (zusammen mit dem MouseOver-Zustand, falls vorhanden) und wählen Sie Anordnen > Navigationsleiste erstellen.

Aber merkwürdig - bei mir ist der Button nicht aktiv. Egal, ob ich die Objekte auf beiden Ebenen markiere oder nur auf der MouseOff über weiche Gruppe.

Ein Menü-Button sieht wie folgt aus:

  • MouseOff
    • 1 rundes Bild mit Rahmen 1 px
    • 1 Text darunter (Menübezeichnung)
    • gruppiert
  • MouseOver
    • 1 rundes Bild mit Rahmen 1 px
    • gruppiert

Beide Ebenen über weiche Gruppierung verbunden. Der MouseOver-Effekt funktioniert.

Übrigens linken die Buttons auf Anker weiter unten auf der Seite.

Du siehst, ich stehe ein wenig auf dem Schlauch. Habe ich es nicht so angestellt wie die Doku sagt?
Und bekomme ich nach Deiner Vorgabe dann für jeden Button ein separates NavBar-Objekt?

Viele Grüße und schon einmal besten Dank bisher an Dich un das beste Forum der Welt 💡

Michael

 

 

 

 

marboe schrieb am 18.04.2017 um 18:16 Uhr

Ein Menü-Button sieht wie folgt aus:

MouseOff

1 rundes Bild mit Rahmen 1 px

1 Text darunter (Menübezeichnung)

gruppiert

Berührt der Text das Bild?

MouseOver

1 rundes Bild mit Rahmen 1 px

gruppiert

Hier fehlt der Text.

 

Probiere mal: fertiger Button in die Zwischenablage, dann einfügen. Dann erst in der MouseOver verändern mit Bild ersetzen.

Übrigens linken die Buttons auf Anker weiter unten auf der Seite.

Damit habe ich keine Erfahrung. Das könnte man erst mal ausschalten zum Probieren.

bekomme ich nach Deiner Vorgabe dann für jeden Button ein separates NavBar-Objekt?

Nein und ja 😁

Ergänzt du im Navileistendialog noch Punkte, wird die Navileiste erweitert.
Du kannst aber sicherlich mehrere Navileisten erstellen. Ob es da irgendwann eine Grenze gibt, kann ich nicht sagen. Probiere es aus. Also zB 6x eine Einbuttonnavileiste kann ich mir schon praktikabel vorstellen.
Viel Erfolg! Gruß Marboe

fuerteventura-2007 schrieb am 19.04.2017 um 11:27 Uhr

Hallo Martina,

ich war gestern SEHR BEGRIFFSSTUTZIG! Aber dank Deiner geduldigen Erklärungen blicke ich jetzt endlich durch!

Das wichtigste zu Beginn: es funktioniert, die Elemente werden im Firefox korrekt dargestellt.

  1. Der Befehl "Nav-Leiste erstellen" war nicht verfügbar, da ich (wie Du korrekt bemerkt hattest) im MouseOver keinen Text hatte. Ohne Text in beiden Ebenen aber keine NavBar.
  2. Ich nutze in allen meinen Projekten NavBars mit selbst erstellten Buttons. Weshalb sich mein Hirn weigerte, diese Konstellation mit den runden Bildchen und dem zentrierten Text darunter als ganz normale (Menü-) Buttons zu erkennen, weiß ich nicht. Vielleicht weil - anders als bei einer klassischen NavBar - hier jeder Menüpunkt ein eigenes Bildchen hat ("der Mensch denkt in Einbahnstraßen...)?
  3. Aus dem in Punkt 2 genannten Grund muss ich also zur "Einbuttonnavileiste" greifen, was aber problemlos funktioniert.

Ich danke Dir für Deine tolle Unterstützung!

Viele Grüße
Michael

marboe schrieb am 19.04.2017 um 18:14 Uhr 
Ohne Text in beiden Ebenen aber keine NavBar.

Richtig.

Sinn der weichen Gruppe ist das synchronisieren von Text über Ebenen hinweg.
Es muss also auch in beiden Ebenen am Anfang immer der gleiche Text stehen! (nur für die Mitleser hier .... 😜)

Schön das es jetzt geht. Das freut mich!
Gruß Marboe