✔ "Fullscreen" füllt den Monitorbereich nicht komplett aus.

[fx001]

Hallo,

ich habe dieses schöne Slider Programm im Netz gefunden (http://www.simplesli.de), welches auch mit folgender Skipt-ergänzung im Fullscreen betrieben werden kann.

/* Use this code on a page with a fullscreen slideshow. In cases of a browser
* window resize, it will reinstantiate the simpleSlide function. If the
* User is on an iPad or iPhone, it will reload the page (thus, by default
* reinstantiating simpleSlide, but more reliably so).
*/

$(document).ready( function() {
    simpleSlide({'fullscreen': 'true'});
    var timer = setTimeout(null, 0);
    
    $(window).resize( function() {
        clearTimeout(timer);
        timer = setTimeout('resizer()', 300);
    });
});

function resizer() {
    var agent = navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));
    if(is_iphone || is_ipad){
        location.reload(true);
    } else {
       simpleSlide({'fullscreen': 'true'});
    };
}

Mozilla lässt bei mir einen dicken weissen Rand am Boden des Hintergrundbildes (ca. 40px) und einen dünnen weissen Rand links (ca.7px).
Rechts und oberhalb des Hintergrundbildes liegt es bündg am Browserfenster an.

Chrome zeigt oben und links vom Hintergrundbild einen weissen Rand (ca. 7px).

Hier könnt Ihr Euch ansehen, was ich meine: http://www.rechteck.net/rechteck-moebel-kellektion/test.html

Ich kenne mich mit Javascript leider net so gut aus, kann mir Jemand sagen, was ich falsch mache?

Vielen Dank im Voraus!

 

[CPoly]

Das hat mit JavaScript absolut überhaupt gar nichts zu tun. Jeder Browser gibt diversen HTML Elementen bereits CSS Eigenschaften. Dazu zählt unter anderem margin beim body Element. Wenn du folgende Regel zu deinem CSS ergänzt, funktioniert es.

body {
    margin:0;
}

Deshalb verwenden viele Leute ein sogenannten "reset CSS", um die meisten dieser default-Eigenschaften zurückzusetzen. Das ist aber Geschmackssache! Man sollte das an seine Anforderungen anpassen.

http://meyerweb.com/eric/tools/css/reset/

 

[fx001]

Das Margin reset hat für die kleinen Abstände geholfen. Vielen Dank!

Der große Rahmen ist geblieben. An meinem 4:3 Monitor Zeigt Chrome und Mozilla alles ohne Rahmen an. An meinem 16:10 Monitor am Laptop zeigt Chrome den Inhalt in Fullscreen an. Mozilla aber lässt unten diesen im ersten Post beschriebenen dicken weissen Balken unterhalb des Bildes.

Ist das bei Dir reproduzierbar oder ist das ein lokales Browserproblem bei mir?

 

[CPoly]

Ich kann das weder in Firefox, Chromium oder Opera reproduzieren. Egal wie ich das Browserfenster skaliere (oder den Browser in den Vollbildmodus versetze), dauert es immer einen Augenblick und dann passt das Skript die Größe automatisch an (für einen kleinen Moment ist unten tatsächlich ein weißer Streifen, aber nur sehr kurz). Du hast ja für diesen Zweck extra das resize-Event abgefangen.

Teste mal ob du das Problem mit auch einer anderen jQuery Version hast (du benutzt ja 1.6.1)

Einen Bug den es mal gab, der wurde anscheinend behoben.

Fullscreen Bug Corrected as of 5:57 p.m. PST, 5/11/2010

The fullscreen functionality was not acting consistently correctly, especially when resizing from vertically-oriented to horizontally or vice versa. The issue has been corrected. Also note that the sample code at the bottom of the "more uses" section regarding implementation of the fullscreen capabilities has been updated for usability and stability.

 

[fx001]

Auf meinem 4:3 Monitor wird die Seite auch im Mozilla als Fullscreen dargestellt nur auf meinem Laptop im 16:10 mit Mozilla nicht.

Die 1.6.1 ist momentan die aktuellste die es gibt (http://jquery.com/)

Ich habe gerade mal versucht dem Internetexplorer die Seite vorzusetzen (Den nutze ich sonst nie). Der 7er und 8er führt das Javascript überhaupt nicht aus (Sicherheitsregler unter IE -> Internetoptionen auf "Mittel").

Welche jquery-Version empfehlt Ihr statt der 1.6.1
Wird bei Euch mit dem IE diese Testseite korrekt im Vollbild ausgeführt? (Welche version?)

Nochmal vielen Dank für Eure Hilfe!

 

[fx001]

Die jquery-Version 1.4.1 hat für Abhilfe mit dem weissen Balken gesorgt.

Im Internet-Explorer läuft die Seite aber definitiv nicht. Da der Internet-Explorer auf http://www.simplesli.de die Slideshow anzeigen kann, wird der Fehler auf eminer Site liegen.

Hier nochmal der Link zur Testseite: http://www.rechteck.net/rechteck-moebel-kellektion/test.html

Hat da Jemand nochmal eine Idee woran das liegen kann?

 

[fx001]

Verrückt, habe den z-index für dei bilder ganz in den Hintergrund gesetzt und nun funktioniert es ... Vielen Dank!