HTML Cordova/jQuery-Mobile/jsFiddle - Scroll/Slide-Skript kombinieren.

[Sithys]

Hallo zusammen und entschuldigt den vielleicht sehr verwirrenden Titel. Anders ist dieses Thema aber nicht auf den Punkt zu bringen, denn es raubt mir seit zwei Tagen jeden Nerv den ich in meinem Gehirn sitzen habe.

- Worum gehts ? -
Grundsätzlich bin ich derzeit dabei, eine App zu programmieren für iOS/Android/WP8. Hierzu nutze ich einen Mac mit XCode und Cordova. Cordova ist ein Framework zum schreiben von HTML5/Javascript Apps für diverse Plattform. Wie auch immer, auf jeden Fall schreibe ich gerade eine App in HTML5.

- Welche Javascripts/Plugins/Stylesheets werden verwendet ? -
Verwendet werden

• jquery-mobile-fluid960.css
• jquery.mobile.simpledialog.css
• jquery.mobile-1.4.2.css
• jquery-1.11.1.js
• jquery.mobile-1.4.2.js
• jquery.mobile.simpledialog2.js

- Woran habe ich mich orientiert ? -
Orientiert habe ich mich an zwei jsFiddles ->
Content scrollable, header/footer fixed(ACHTUNG - LÄUFT NATÜRLICH NUR MOBIL ENTSPRECHEND)
Slideable Content mit fixed Header/Footer(Bei genauem Betrachten fällt in dem Beispielfenster (unten Rechts) auf, dass nach einem einfachen klick in das große weiße Feld (den Content) ein kleiner, vermutlich 1px breiter Border erscheint am oberen Rand des Feldes.)

- Wo ist das Problem? -
Das Problem besteht darin, dass ich seit zwei Tagen wie ein Irrer versuche, die jsfiddles zu kombinieren. Ich möchte allerdings nicht die Swipe-Funktion aus dem zweiten Fiddle übernehmen, sondern den Seitenwechsel über einen Link lösen. Dies funktioniert auch tadellos indem ich schreibe:

<a href="#articleID">Article 2</a>

hier besteht also kein Handlungsbedarf.
Das viel größere Problem das auftritt -> Ich vermute, dass mir die jQuery mobile UI die über alles gelegt wird das Design zerschießt. Ich habe alles mögliche versucht, aus zwei Scripten eine index.html und einen stylesheet zu machen - ohne erfolg. Irgendwas stimmt da nicht mit jQuery mobile - meiner Meinung nach. Vielleicht bin ich nach 2 Tagen auch einfach zu blind, fehler zu entdecken.

Kann jemand von Euch mir ein Beispiel liefern, indem der Scrollbare Content, sowie der Content-Wechsel mit fixiertem Header/Footer möglich ist? Wer eine Lösung hat, diese aber nicht testen kann...bitte posten ich teste es dann und gebe gerne Feedback!


Vielen Dank im Voraus!

Sit

 

[T0a5tbr0t]

Wieso jQuery 1.x? Version 2.x sollte auf den Mobil-Browsern Browsern vernünftig laufen.

Wenn man so eine dicke Bibliothek wie jQuery Mobile verwendet heißt es eigentlich: ganz oder garnicht.
Da irgendwas an den grundlegenden Styles zu verändern ist sehr mutig und beim updaten der jQuery Mobile Version wird das vermutlich schnell wieder auseinander fliegen.
Und das gezeigte Fiddle ist ziemlich unschönes CSS, hat im Grunde aber nur "position: fixed".
Das sollte mit jQ-Mobile auch gehen: http://demos.jquerymobile.com/1.4.2/toolbar-fixed/