Hallo und guten Abend, mir raucht der Schädel 
...
Ich programmiere gerade eine App für iOS mit Cordova. Heißt: HTML5/Javascript/CSS.
Nun habe ich mir vorher Gedanken gemacht, ob ich einzelne HTML-Seiten nehme oder eine HTML für alle Seiten erstelle. Ich habe mich dann für die eine HTML entschieden, inkl. JQuery-Mobile (ohne Styling - structured) was sich vermutlich jetzt gerade als Problem herausstellt.
Der User startet die App, loggt sich mit seinen Zugangsdaten ein oder registriert sich über die App (das ist zumindest das Ziel). Nun habe ich den Registrierungsprozess optisch fertiggestellt, allerdings den "Jetzt registrieren" Button lediglich mit einem Link auf die nächste Seite versehen, denn noch werden die Daten nicht verarbeitet.
Loginscreen -> "Jetzt Registrieren" -> Registrierungsformular -> Hauptseite
Im Entwurf des Designers ist ein Off-Canvas Menu vorgesehen, das ich so auch umgesetzt habe. Funktioniert im Registrierungsprozess problemlos. Geht der Nutzer jetzt aber weiter, auf die Hauptseite, funktioniert das Off-Canvas Menu nicht mehr. Es kommt zwar heraus, aber verschiebt Header/Footer nicht mehr, sondern lediglich den Content.
Ich weiß nicht, woran das liegt und sitze nun ratlos seit Stunden vor dem Code. Anbei ein paar Bilder für Euch:
Registrierungsformular:
Off-Canvas Registrierung:
Hauptseite:
Off-Canvas Hauptseite:
Und jetzt der spannende Teil - Code:
<head>
Canvas-JS
Canvas-HTML
Die Hauptseite ist eine Kopie der ersten Seite, lediglich der Content ist leer, da kommt ja anderer Inhalt hinein.
CSS
Das müsste alles gewesen sein. Ich hoffe, mir kann hier jemand helfen.
PS: Bitte habt Nachsicht, so lange mache ich das Alles noch nicht und bin sehr unerfahren. Fehler könnt ihr mir gerne mitteilen, ich bin ja kritikfähig, aber bitte nicht ausfallend werden.
Und das ich da nicht alleine dran arbeite, sondern ein erfahrener Programmierer sich alles noch einmal anschaut, überarbeitet etc. sollte auch klar sein. Der hat aber jetzt erstmal Urlaub
Danke vorab!
...Ich programmiere gerade eine App für iOS mit Cordova. Heißt: HTML5/Javascript/CSS.
Nun habe ich mir vorher Gedanken gemacht, ob ich einzelne HTML-Seiten nehme oder eine HTML für alle Seiten erstelle. Ich habe mich dann für die eine HTML entschieden, inkl. JQuery-Mobile (ohne Styling - structured) was sich vermutlich jetzt gerade als Problem herausstellt.
Der User startet die App, loggt sich mit seinen Zugangsdaten ein oder registriert sich über die App (das ist zumindest das Ziel). Nun habe ich den Registrierungsprozess optisch fertiggestellt, allerdings den "Jetzt registrieren" Button lediglich mit einem Link auf die nächste Seite versehen, denn noch werden die Daten nicht verarbeitet.
Loginscreen -> "Jetzt Registrieren" -> Registrierungsformular -> Hauptseite
Im Entwurf des Designers ist ein Off-Canvas Menu vorgesehen, das ich so auch umgesetzt habe. Funktioniert im Registrierungsprozess problemlos. Geht der Nutzer jetzt aber weiter, auf die Hauptseite, funktioniert das Off-Canvas Menu nicht mehr. Es kommt zwar heraus, aber verschiebt Header/Footer nicht mehr, sondern lediglich den Content.
Ich weiß nicht, woran das liegt und sitze nun ratlos seit Stunden vor dem Code. Anbei ein paar Bilder für Euch:
Registrierungsformular:
Off-Canvas Registrierung:
Hauptseite:
Off-Canvas Hauptseite:
Und jetzt der spannende Teil - Code:
<head>
Code:
<link rel="stylesheet" type="text/css" href="css/jqm-struc-1.4.3.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/jquery.nstSlider.css">
<link rel="stylesheet" type="text/css" href="css/mobi212min.css">
<script type="text/javascript" src="js/jq-1.11.1.js"></script>
<script type="text/javascript" src="js/jqm-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery.nstSlider.js"></script>
<script type="text/javascript" src="js/mobi212min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
Code:
<script>
/*====================================
= ON DOM READY =
====================================*/
$(function() {
$('.toggle-nav').click(function() {
// Calling a function in case you want to expand upon this.
toggleNav();
});
});
/*========================================
= CUSTOM FUNCTIONS =
========================================*/
function toggleNav() {
if ($('.site-wrapper').hasClass('show-nav')) {
// Do things on Nav Close
$('.site-wrapper').removeClass('show-nav');
} else {
// Do things on Nav Open
$('.site-wrapper').addClass('show-nav');
}
//$('#site-wrapper').toggleClass('show-nav');
}
</script>
HTML:
<div data-role="page" id="registration">
<div class="site-wrapper">
<div class="site-canvas">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-id="footer" data-enhance="false">
<div class="header">
<img alt="a" src="img/main/logotop.png" class="logotop" width="105" height="45">
<a href="#" class="toggle-nav btn btn-lg btn-success">
<img src="img/menu/stri.png" class="fa fa-bars" width="22" height="17" style="margin-top: -40px; display: block; margin-left: 280px;">
</a>
</div>
</div>
<div class="site-menu">
<a href="#" class="toggle-nav">
<img src="img/canvas/close_btn.png" width="64" height="50" class="fa fa-times right">
</a>
<ul class="canvasmenu">
<li class="canvasli"><a href="#" class="block">AUFNAHME<img src="img/canvas/rec_btn.png" class="imgcanvas" width="64" height="50"></a></li>
<li class="canvasli"><a href="#" class="block">*************<img src="img/canvas/***_btn.png" class="imgcanvas" width="64" height="50"></a></li>
<li class="canvasli"><a href="#" class="block">*************<img src="img/canvas/***_btn.png" class="imgcanvas" width="64" height="50"></a></li>
<li class="canvasli"><a href="#" class="block">MEIN PROFIL<img src="img/canvas/profil_btn.png" class="imgcanvas" width="64" height="50"></a></li>
<li class="canvasli"><a href="#" class="block">INFOS / HILFE<img src="img/canvas/help_btn.png" class="imgcanvas" width="64" height="50"></a></li>
<li class="canvasli"><a href="#" class="block">AUSLOGGEN<img src="img/canvas/logout_btn.png" class="imgcanvas" width="64" height="50"></a></li>
</ul>
</div>Die Hauptseite ist eine Kopie der ersten Seite, lediglich der Content ist leer, da kommt ja anderer Inhalt hinein.
CSS
Code:
.ScrollableWrapper {
overflow: scroll;
-webkit-overflow-scrolling: touch; /*to make it smooth as native*/
top: 0px;
bottom: 0px;
width: 100%;
height: 568px;
position: fixed;
background-image:url(../img/main/main_border.jpg);
background-repeat: repeat-y;
padding-left: 17px;
z-index: 1;
}
.header {
position: fixed;
width: 100%;
top: 0px;
height: 70px;
z-index: 20;
background: rgba(255,255,255,0.9);
border-bottom: solid 1px black;
}
.footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
background: rgba(255,255,255,0.9);
z-index: 20;
border-top: solid 1px black;
}
.site-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 568px; /* Temp: Simulates a tall page. */
}
.site-canvas {
width: 100%;
height: 568px;
position: relative;
-webkit-transform: translate3d(0);
transform: translate3d(0);
-webkit-transition: .3s ease all;
transition: .3s ease all;
padding: 5% 0; /* Temp: Just spacing. */
}
.site-menu {
width: 280px;
height: 568px;
position: absolute;
top: 0;
right: -280px;
background: #548e34;
}
.site-wrapper.show-nav .site-canvas {
-webkit-transform: translate3d(-280px, 0, 0);
transform: translate3d(-280px, 0, 0);
}Das müsste alles gewesen sein. Ich hoffe, mir kann hier jemand helfen.
PS: Bitte habt Nachsicht, so lange mache ich das Alles noch nicht und bin sehr unerfahren. Fehler könnt ihr mir gerne mitteilen, ich bin ja kritikfähig, aber bitte nicht ausfallend werden.
Und das ich da nicht alleine dran arbeite, sondern ein erfahrener Programmierer sich alles noch einmal anschaut, überarbeitet etc. sollte auch klar sein. Der hat aber jetzt erstmal Urlaub
Danke vorab!
