Multipage Canvas Größe beziehen

[werner]

Hallo,

ich habe eine jQueryMobile Anwendung (Multipage) mit einem Canvas, welches 100% width und height besitzt. Das JS Script holt sich die absolute Breite und Höhe mittels canvas.clientWidth. Leider ist der Wert 0, solange das Canvas nicht im Browser dargestellt wird. (Das Canvas befindet sich also nicht auf der Startpage)

Wie kann ich nun entweder die Ausführung des Scriptes verschieben, sodass es nur beim Aufruf der Page ausgeführt wird - oder die Canvas Größe berechnen, ohne das Canvas sichtbar zu rendern?

Danke für Hilfen!

 

[theSplit]

100% height - das wird nicht hinhauen... du müsstest dir über das Fenster die Auflösung holen, wäre mein Vorschlag.

Dazu würde ich spontan window.innerHeight/.innerWidth nutzen.

Es kann aber gut sein das in Safari oder Android Probleme bekommst und die Werte die UIs nicht 100% berücksichtigen die du erhältst.

Was ich nicht ganz so verstehe, du arbeitest "Multipage" - was soll das sein?
Kannst du etwas genauer werden was du damit meinst?
Gibt es ein Fenster das die anderen nachlädt?
Oder gibt es mehrere Seiten die nur jeweils einzeln aufgerufen werden?
Oder ist das ganze ein Fenster das geladen wird, nur sind die anderen "Seiten" der Anwendung nicht sichtbar und werden on demand eingeblendet?

Ansonsten kannst du den JS Code auch direkt aus der Seite heraus, über einen Script tag, ausführen lassen. Ich verstehe dein Setup nur leider nicht 100%tig.

 

[werner]

Hi,

Ich nutze das jQuery Mobile Framework.
Dabei habe ich in einer einzigen HTML Datei mehrere divs, und mit dem Menü wird dann zwischen den Containern umgeschaltet.
Das Umschalten übernimmt das Framework für mich.

Das Canvas Element ist also schon eingebunden, das Eltern Element aber noch nicht sichtbar, sondern erst dann, wenn auf diese "Seite" navigiert wird.

 

[theSplit]

Hi,
also du könntest den Code doch aufrufen lassen, sobald der andere Tab über das Menü/Navigation aufgerufen wird nicht?

Zum Beispiel einen dieser Events abhören:

You do not have permission to view link please Anmelden or Registrieren

oder

You do not have permission to view link please Anmelden or Registrieren

Und dann "toPage" überprüfen ob du die Seite mit dem Canvas erreicht hast, dann deinen Code ausführen lassen.

Was die Größe bzw. nur die Höhe, angeht, da mußt du ausprobieren..., da es Probleme von Modell zu Modell und mobilen Browserversionen gibt die sich nicht einig sind was sie zurückgeben. Aber man findet da relativ viel Material zu, für, verschiedene Probleme. :/

 

[Jester]

JQuery liefert doch eine cross-Browser-kompatible Möglichkeit, die Content- (oder auch Element-) Höhe und Breite auszulesen:

$(window).width()
$(window).height()

Damit weißt Du, welche Dimensionen das <canvas> haben wird.
Sinn macht auch, das bei Viewport-Änderung erneut durchlaufen zu lassen (Portrait -> Landscape etc.)

Gruß, J.


Ps.: wenn nicht über ein Framework, dann sind die Speicherorte der Werte je nach Browser (und Gerät) unterschiedlich:

[src=javascript]function detectScreenSize(){
if(window.innerHeight && window.scrollMaxY){ // Firefox
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
}
else if(document.body.scrollHeight && document.body.offsetHeight){ // all but Explorer Mac
screenWidth = document.body.clientWidth;
screenHeight = document.body.clientHeight;
}
else{ // Explorer 6 Strict, Mozilla (not FF) and Safari
screenWidth = document.body.clientWidth;
screenHeight = document.body.clientHeight;
}
}[/src]

 

[electric.larry]

Ich weiss nicht, wie es bei aktuellen Versionen ist, aber als ich vor etwas mehr als einem Jahr an einer Browserapp für Handys gearbeitet hab, stimmte der Wert von $(window).height() auf iOs Geräten nicht. Umgekehrt aber gab window.innerHeight auf Windows Phone 8 nicht die richtigen Werte aus.

Musste damals soetwas verwenden, damit es auf allen gängigen Versionen von Android, iOs und Windows Phone funktionierte:

[src=javascript]
var cyWnd = 0;
//Höhe auf iPhone/iPad/iPod
if(/iPhone|iPod|iPad/i.test(navigator.userAgent))
{
cyWnd = window.innerHeight;
}
//Höhe auf allen anderen Geräten
cyWnd = $(window).height();
[/src]