Hinweis bei Browserauflösung

[torsten]

moin!

ich suche eine möglichkeit der ausgabe eines hinweises bei zu geringer auflösung des browserfensters, den richtigen lösungsansatz hab ich schon gefunden, ich vermute, dass <http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm#@title=hier drin fast alles steckt, was ich benötige> leider ist das bei mir wie mit dem affen und dem stöckchen... mit dem stöckchen bekommt er die termiten aus dem loch, mit der motorsäge kann er allerdings nichts anfangen....

für hilfe wär ich dankbar

mfg torsten

[Matthias Apsel]

Om nah hoo pez nyeetz, torsten!

ich suche eine möglichkeit der ausgabe eines hinweises bei zu geringer auflösung des browserfensters

größe des viewports ... [quirksmode.org]

oder ist die Hilfe noch nicht umfassend?

mfg torsten

Da sind noch 'ne Menge Fehler. Die meisten lassen sich im Editor auf einen Rutsch beseitigen: Ersetze "&" durch "&amp;"

Matthias

[torsten]

hallo matthias, dir auch "Frieden in ihren Herzen, Glück auf allen Wegen."

und danke mit dem tipp bzgl der "&" jetzt sagt der validator: The document located at http://www.jungmann.net/ was successfully checked as XHTML 1.0 Strict.

größe des viewports ... [quirksmode.org]

oder ist die Hilfe noch nicht umfassend?

leider bin ich nicht in der lage zu beurteilen ob die hilfe umfassend ist oder nicht. für mich sieht das aus wie ein uhrwerk und ich fühle mich wie das sprichwörtliche schwein, das da reinguckt... null ahnung.

mglw. existiert auch noch ein kleines missverständnis... ich möchte nicht die werte für höhe oder breite ausgeben sondern in abhängigkeit einer gewissen höhe ODER/UND einer gewissen breite einen hinweis ausgeben wie z.b. "versuch bitte den vollbildmodus weil dein fenster so winzig ist"

...

mfg torsten

[torsten]

ich hab noch nicht mal begriffen wiso da überhaupt was angezeigt wird, da dein quelltext der testseite nicht mal einen einzigen link enthält... kein onClick kein onLoad kein garnix...

???

[Encoder]

"versuch bitte den vollbildmodus weil dein fenster so winzig ist"

Gib deiner Seite doch einfach eine bestimmte Mindestbreite, dann sieht man dass man scrollen muss und macht das Fenster aufomatisch größer.

Was dich natürlich nicht davon abhalten soll, rauszufinden wie man es machen könnte.

[torsten]

moin!

Gib deiner Seite doch einfach eine bestimmte Mindestbreite, dann sieht man dass man scrollen muss und macht das Fenster aufomatisch größer.

danke, das funktioniert, hat aber leider nicht die erwünschte wirkung bestimmte informationen an den user zu übermitteln...

Was dich natürlich nicht davon abhalten soll, rauszufinden wie man es machen könnte.

ich kann nur fragen...

mfg torsten

[torsten]

moin! da bin ich wieder...

Was dich natürlich nicht davon abhalten soll, rauszufinden wie man es machen könnte.

zum o.a. thema hab ich was zusammengefummelt, das scheinbar funktioniert... (keine ahnung wie das passieren konnte! ist mir noch nie passiert!) könnte mal bitte jemand nach fehlern oder/und kompatibelität checken?

function Fensterweite () {  
  if (window.innerWidth) {  
    return window.innerWidth;  
  } else if (document.body && document.body.offsetWidth) {  
    return document.body.offsetWidth;  
  } else {  
    return 0;  
  }  
}  
  
function Fensterhoehe () {  
  if (window.innerHeight) {  
    return window.innerHeight;  
  } else if (document.body && document.body.offsetHeight) {  
    return document.body.offsetHeight;  
  } else {  
    return 0;  
  }  
}  
  
window.onload = function()  
{  
if (Fensterweite() < 900 || Fensterhoehe() < 820)  
	alert("Bitte maximieren sie Ihr Browserfenster (Taste F11) da die Bilder sonst abgeschnitten werden! Sollte das nicht möglich sein, können die Bilder mit der Maus bewegt werden.");  
}

mfg torsten

[molily]

zum o.a. thema hab ich was zusammengefummelt, das scheinbar funktioniert... (keine ahnung wie das passieren konnte! ist mir noch nie passiert!) könnte mal bitte jemand nach fehlern oder/und kompatibelität checken?

Ja, so kannst du das lösen. Mit onload anstatt onresize zu arbeiten ist in dem Fall wohl besser und ausreichend.

Allgemein sind die SELFHTML-Funktionen nicht so toll, weil dort ein Zweig für IE 6-8 im standardkonformen Modus fehlt. In diesen sollte man die clientWidth/Height nämlich beim html-Element abfragen (document.documentElement) anstatt beim body-Element (document.body), weil sich das body-Element nicht automatisch auf Viewport-Höhe vergrößert. Etwa so:

function getViewportSize () {  
  var w, h, el;  
  if (window.innerWidth) {  
    // Opera, Firefox, Webkit, IE ab 9, Netscape 4 ;-)  
    w = window.innerWidth;  
    h = window.innerHeight;  
  } else if ((el = document.documentElement) && (el.clientWidth || el.clientHeight)) {  
    // IE 6-8 im standardkonformen Modus  
    w = el.clientWidth;  
    h = el.clientHeight;  
  } else if ((el = document.body) && (el.clientWidth || el.clientHeight)) {  
    // IE < 6  
    w = el.clientWidth;  
    h = el.clientHeight;  
  }  
  return { width: w, height: h };  
}  
  
var viewport = getViewportSize();  
if (viewport.width < 900 || viewport.height < 820) {  
   alert('...');  
}  

Testen: http://jsfiddle.net/Y8Xcd/1/
Der Aufbau kommt hierher: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Dieses Script geht stillschweigend vom standardkonformen Modus aus (also ein vollständiger DOCTYPE bzw. ein HTML5-DOCTYPE angegeben ist), ansonsten müsste man testen, ob sich der IE in selbigem Modus befindet (document.compatMode == 'CSS1Compat"), bevor man document.documentElement.clientWidth/Height verwendet.

Mathias

[JürgenB]

Hallo molily,

// IE < 6

bist du jetzt Altenpfleger?   :)

Gruß, Jürgen

[torsten]

moin jürgen,

alt und debil ist aber nicht unbedingt das selbe, oder?

schau mal was die wissenschaft dazu sagt ;-)

Hallo molily,

// IE < 6

bist du jetzt Altenpfleger?   :)

Gruß, Jürgen

mfg torsten

[molily]

Hallo,

Das ist übrigens ein Hoax, siehe:
Bizarre IE-Studie erweist sich als Fälschung
Mittlerweile gaben die Inhaber der AptiQuant-Domain zu, die Daten für die Studie nicht ermittelt, sondern erfunden zu haben.

Mathias

[Matthias Apsel]

Om nah hoo pez nyeetz, torsten!

alt und debil ist aber nicht unbedingt das selbe, oder?

interessant auch, das man wissenschaftlich ab 50 schon senil ist, was ja umgangsprachlich von debil nicht so weit weg ist.

Museen bilden - in dem Fall das Keltenmuseum Hallein.

Matthias

[molily]

ich suche eine möglichkeit der ausgabe eines hinweises bei zu geringer auflösung des browserfensters, den richtigen lösungsansatz hab ich schon gefunden, ich vermute, dass

Das SELFHTML-Beispiel definiert zwei Methoden, Fensterweite und Fensterhoehe. Diese liefern die Viewportgröße in der jeweiligen Dimension. Du kannst diese beim resize-Event auslesen und prüfen, ob sie einen gewissen Wert unterschreitet.

Das Beispiel überwacht ebenfalls den resize-Wert und registriert dafür einen Event-Handler:

window.onresize = neuAufbau;

Die Handlerfunktion:

function neuAufbau () {  
  if (Weite != Fensterweite() || Hoehe != Fensterhoehe())  
    location.href = location.href;  
}

Diesen Aufbau kannst du so übernehmen, also eine Funktion als resize-Handler registrieren. In dieser Funktion kannst du dann Fensterweite und Fensterhoehe aufrufen und sie mit deinen Mindestwerten vergleichen. Sind sie geringer, so kannst du beispielsweise ein vorher verstecktes Element einblenden, welches einen Hinweis enthält:

window.onresize = testeViewport;  
function testeViewport () {  
  // Zeige oder verstecke den Hinweis, wenn der Viewport kleiner als 500x500 wird  
  document.getElementById('hinweis').style.display =  
    (Fensterweite() < 500 || Fensterhoehe() < 500) ?  
    'block' :  
    'none';  
}

Etwas einfacher geht es ganz ohne JavaScript über CSS-Media-Queries:

#hinweis { display: none; }  
@media (max-width: 500px), (max-height: 500px) {  
  #hinweis { display: block; }  
}

Das macht im Grunde dasselbe wie die JavaScript-Lösung, allerdings funktioniert das nur in neueren Browsern, während das JavaScript-Beispiel aus SELFHTML auch in den vorsintflutlichen IE 4 und Netscape 4 funktioniert. ;)

Mathias

[torsten]

moin!

Das SELFHTML-Beispiel definiert zwei Methoden, Fensterweite und Fensterhoehe. Diese liefern die Viewportgröße in der jeweiligen Dimension. Du kannst diese beim resize-Event auslesen und prüfen, ob sie einen gewissen Wert unterschreitet.

ich habe weiter unten eine andere lösung hingebastelt, vielleicht schaust du da mal ob das so geht...

Etwas einfacher geht es ganz ohne JavaScript über CSS-Media-Queries:

#hinweis { display: none; }

@media (max-width: 500px), (max-height: 500px) {
  #hinweis { display: block; }
}

  
hm, media queries liessen sich aber nicht "weg klicken" oder? wenn also ein user aus irgend einem grund die fensterauflösung nicht vergrößern kann, kann er garnüscht sehen... das wär auch schade.  
  
[mfg](http://www.jungmann.to/) [torsten](http://www.jungmann.net)  

-- 
Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do

[Matthias Apsel]

Om nah hoo pez nyeetz, torsten!

ich aber nicht "weg klicken" oder? wenn also ein user aus irgend einem grund die fensterauflösung nicht vergrößern kann, kann er garnüscht sehen... das wär auch schade.

Du könntest den Hinweis ja dezent am oberen oder unteren Bildschirmrand fixieren.

Matthias

[torsten]

moin!

Du könntest den Hinweis ja dezent am oberen oder unteren Bildschirmrand fixieren.

nicht die schlechteste idee, ein bisserl platz hab ich ja noch auf der seite...

schreibst du dein eigenes selfhtml?

;-)

mfg torsten

Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do

[molily]

#hinweis { display: none; }

@media (max-width: 500px), (max-height: 500px) {
  #hinweis { display: block; }
}

>   
> hm, media queries liessen sich aber nicht "weg klicken" oder?  
  
Mit JavaScript (Inline-Styles/Klassen) kannst du natürlich dafür sorgen, dass der Hinweis geschlossen werden kann und auch nicht durch die obige CSS-Regel wieder eingeblendet wird. Außerdem sollte er auch nicht die gesamte Anwendung durch Überlappen unbenutzbar machen.  
  
Mathias

[torsten]

moin!

#hinweis { display: none; }

@media (max-width: 500px), (max-height: 500px) {
  #hinweis { display: block; }
}

> >   
> > hm, media queries liessen sich aber nicht "weg klicken" oder?  
>   
> Mit JavaScript (Inline-Styles/Klassen) kannst du natürlich dafür sorgen, dass der Hinweis geschlossen werden kann und auch nicht durch die obige CSS-Regel wieder eingeblendet wird. Außerdem sollte er auch nicht die gesamte Anwendung durch Überlappen unbenutzbar machen.  
  
das der hinweis die seite nicht unnnutzbar machen soll ist schon klar aber ein css mit java zu entfernen ist doch eigentlich "verkehrt herum" da man javascript einfach abschalten kann css jedoch nicht...  
  
oder hab ich das auch "verkehrt herum" verstanden?  
  
nichtsdesto trotz habe ich ein neues problemchen... bisher konnte ich an meine bekannten links verschicken die volgender maßen aussahen: [http://www.jungmann.net#novivid](http://www.jungmann.net#novivid)  
  
das verschicken geht natürlich immer noch, aber der effekt hat sich verändert... während der IE den gewünschten effekt noch zeigt funktioniert das bei FF oder GC nicht mehr... vermutlich liegt das an dem javascript, das ich von dir übernommen habe... leider weiss ich dafür keine abhilfe.  
  
[mfg](http://www.jungmann.to/) [torsten](http://www.jungmann.net)  

-- 
Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do

[torsten]

moin!
 ich habe mein problem mit hilfe Alexander farkas media queries script gelöst...

das leben ist ein kompromiss :(

danke für eure unterstützung :)

mfg torsten