Entwickler-Ecke :: Thema anzeigen - Kommunikation zwischen php und JavaScript (Bildschirmgröße)

Delete - Mo 01.05.17 12:37
Titel: Kommunikation zwischen php und JavaScript (Bildschirmgröße)

Folgendes: Es gibt einige DIV-Bereiche mit festen Größen, ein dritter enthält variable Datenmengen und soll in seiner Höhe der Bildschirmhöhe des Benutzers angepaßt werden. Dabei ist egal, ob es sich um die aktuelle Höhe oder die Maximalhöhe handelt. Hauptsache es läßt sich eine Höhe ermitteln, bei der man mit dem Scrollbereich nicht über die Gesamthöhe gerät. Prozentualle Berechnungen scheiden aus, weil dann die feststehenden Bereiche entweder zu hoch oder zu schmal würden.

Was wäre an folgendem Lösungsversuch zu ändern, damit es funktioniert, oder ist schon der Ansatz falsch?

PHP-Quelltext

1:
2:
3:
4:
5:

echo '<script type="text/javascript">
isc = window.innerHeight; // alert(isc);
sc = isc-400+"px";
document.write(\'<style type="text/css">#mydiv { height: sc; }</style>\');
</script>';

jaenicke - Mo 01.05.17 14:11

Ich würde dir sehr raten den JavaScript-Teil in eine separate Datei auszulagern. Und wenn du HTML und PHP in einer Datei mischst, dann bitte nicht per echo... dann funktioniert keinerlei Syntaxhighlighting mehr und du musst Anführungszeichen maskieren...

Beispiel:

PHP-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<?php 
...
?> 
<script type="text/javascript">
  isc = window.innerHeight; // alert(isc);
  sc = isc - 400 + "px";
  document.write('<style type="text/css">#mydiv { height: sc; }</style>');
</script>
<?php 
...
?>

Bezüglich deines Problems findest du hier Beispiele:
Suche bei Google

JQUERY DIV MAX REMAINING HEIGHT
http://stackoverflow.com/questions/5059021/css-html-div-height-fill-remaining-space

Delete - Mo 01.05.17 16:40

Tja, danke Ihr Lieben, erstmal für Eure Antworten.

Wenn es größere Scripte (mit Funktionen) sind, lagere ich die auch aus, aber es gibt Situationen, wo sie mit in die Datei gehören. Beispielsweise, wenn ich einen Hinweistext auf einen Ladevorgang nach dessen Ende durch einen JS-Befehl unsichtbabr machen will, z.B. :

JavaScript-Quelltext

1:
2:
3:

<script type="text/javascript">
document.getElementById("ladevorgang").style.display = "none";
</script>

Zitat:

Wenn du uralte Browser unterstützen möchtest

Doch, teilweise. Nur deshalb bräuchte ich einen Lösungsansatz.

Beim Firefox kann ich es so machen:

Cascading Style Sheet

1:	position: absolute; top:200px; bottom: 00px;

Dann paßt sich alles der Browserhöhe an.

Beispiel : http://freelinks.usa.cc/spoken/mispoken.php?liste=ja

Der IE (Ich kann nur bis Version 6 testen, weil ich noch XP benutze) vereinnahmt dann den ganzen Bildschirm, so daß ich mich entschlossen habe, nun dafür doch eine feste Höhe einzusetzen, dafür aber die Leute, die den IE benutzen, darauf Hinweise, daß sie einen Scheissbrowser benutzen.

Ich denke, ich werde es dabei belassen, werde mir aber die mir mitgeteilten Links dennoch durchsehen. Danke erstmal!

Nachtrag:

Wie soll ich denn hier sonst eine php-Variable übergeben, wenn nicht durch echo?

PHP-Quelltext

1:
2:
3:
4:
5:
6:
7:

echo'
<!--[if IE]>
<style type="text/css">
#liststyle { position:absolute; width:80%; top:280px; bottom:0px; height:'.$height.'; }
</style>
<![endif]-->
';

Ich benutze nämlich gerne Variablen, die ich gleich am Anfang definiere, um später nicht die entsprechenden Stellen suchen zu müssen. Auch viele externe CSS-Dateien habe ich deshalb schon auf css.php umgestellt.

Ach klar, das geht ja wie bei HTML, also :
document.write('<style type="text/css">#liststyle { height: <?php echo $height; ?>; }</style>');

Aber wie übergibt man denn nun JS-Variablen an HTML wie ich in meinem Eingangsbeitrag gefragt hatte? Das funktioniert nämlich so oder so nicht, egal ob mit oder ohne echo.

jaenicke - Mo 01.05.17 20:03

delnu hat folgendes geschrieben :

Wenn es größere Scripte (mit Funktionen) sind, lagere ich die auch aus, aber es gibt Situationen, wo sie mit in die Datei gehören. Beispielsweise, wenn ich einen Hinweistext auf einen Ladevorgang nach dessen Ende durch einen JS-Befehl unsichtbabr machen will, z.B. :

JavaScript-Quelltext

1:
2:
3:

<script type="text/javascript">
document.getElementById("ladevorgang").style.display = "none";
</script>

Da gehören sie in das OnLoad, denn erst dann ist die Seite geladen. Genau dafür ist das Ereignis da. Mitten in die Seite ist nicht wirklich sauber, auch wenn man das vor 2 Jahrzehnten öfter gemacht hat.

delnu hat folgendes geschrieben :

Zitat:

Wenn du uralte Browser unterstützen möchtest

Doch, teilweise. Nur deshalb bräuchte ich einen Lösungsansatz.

Fragt sich wie alt...
Sonderlösungen braucht man hauptsächlich für Internet Explorer vor Version 9 und Firefox. Alle anderen Browser funktionieren meistens ohne Sonderunterscheidung. Und wenn man Bibliotheken wie jQuery nimmt, macht man sich das Leben nicht nur leichter, sondern kann diese Unterscheidungen auch der Bibliothek überlassen und es überall gleich machen.

Wenn du wirklich noch IE 6 unterstützen möchtest, kannst du jQuery 1.9 benutzen, das unterstützt den noch. Neuere jQuery Versionen gehen bei IE 9 los.

delnu hat folgendes geschrieben :

Der IE (Ich kann nur bis Version 6 testen, weil ich noch XP benutze)

Es gibt auch den Internet Explorer 8 noch für XP. Wer unter XP noch Internet Explorer 6 nutzt, ist selber schuld... oder benutzt in der Firma noch etwas, das den voraussetzt. Aber das sollte heute ja langsam aussterben... im Zweifelsfall auch die Firmen, die noch auf so alte Technik setzen...

delnu hat folgendes geschrieben :

Aber wie übergibt man denn nun JS-Variablen an HTML wie ich in meinem Eingangsbeitrag gefragt hatte? Das funktioniert nämlich so oder so nicht, egal ob mit oder ohne echo.

Das ist in der Tat nicht so einfach, wenn man es manuell und für IE 6 noch machen will...
So sollte es aber auch da gehen:

JavaScript-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:

// Mit jQuery einfach:
    var myText = 'Hello world!';
    $('#myInput').val(myText);

// Ohne jQuery:
    var myInput = document.getElementById('myInput');
    var myText = 'Hello world!';
    myInput.value = myText;

Demo:
https://jsfiddle.net/ounmhdvo/

Delete - Di 02.05.17 00:10

Hallo jaenicke. Danke für die Antwort !

IE 6 war ein Schreibfehler. Das hat damit zu tun, daß ich auf unterschiedlichen Rechnern unterschiedliche Versionen benutze. Im Normalfall benutze ich schon (sowieso natürlich überhaupt IE nur zu Testzwecken) Version 8, nur wenn ich es genau wissen will, auch noch IE 6. Entsprechend habe ich einige komplizierte Filter in meinen öffentlichen Linklisten eingebaut. Beim Firefox gibt es eigentlich kaum Probleme, auch nicht mit Version 3. Was mich allerdings am Firefox stört: Scrollbalken werden bei ihm aussen an die Breite angehängt, während sie beim IE innen liegen. Da ist der IE also sauberer.
Wenn ich ein Regal in eine Lücke stellen will, gelten ja auch die Aussenmaße inklusiv Brettstärke.

Zur Sache mit "OnLoad" : Da herrscht ein Mißverständnis. Ich lade innerhalb des Programms eine Liste. Bevor ich das mache, erscheint ein Hinweis. Der wird erst NACH DEM LADEN DER LISTE ausgeblendet. Würde ich dieses Ausblenden durch "OnLoad" erledigen, würde der Hinweis nie erscheinen. Ich habe das nur eingebaut, weil ich nach der üblichen Drosselung meiner Funkinternet-Verbindung nie wußte, wann die Liste denn unfertig geladen ist. Die Liste gehört nicht zum eigentlichen Programm, sondern wird per php-include eingebunden und deren Darstellung ist nur dann erforderlich, wenn ich (einzig zu Prüfzwecken) die gesamte Liste ausgeben will. Ich hatte den entsprechenden Link zur Website (die sonst völlig anders aufgerufen wird) nur veröffentlicht, damit man sehen kann, wie es jetzt für vernünftige Browser gelöst habe und welche Einschränkungen es gibt, wenn man es mit dem IE testet.

Ich habe nicht vor, meine Programme unnötig aufzublähen. Bibliotheken kommen für mich nicht infrage, weil sie undurchschaubar sind. Selbst wenn ich nicht die min-Versionen benutze. Sowas ist wie die schrecklichen Delphi-Komponenten-Bibliotheken, wo man ein Element braucht aber den ganzen Schrott mitschleppen muß. Vermeintliche Fertig- und Komplettlösungen sind wie die angeblich nicht neu zu erfindenden Räder, die man nicht wirklich nutzen kann, weil sie eiern.

Ich habe übrigens keine Ahnung, was z.B. bei $('#myInput').val(myText); vor sich geht. Ich kann keine Befehle einsetzen, deren Funktionsweise mir unbekannt ist. Sorry, aber sowas ich wirklich nichts für mich. Ich weiß gerne, was ich tue.

Übrigens hatte ich auch schon versucht, die Zuweisung über getElementById vorzunehmen, aber aus mir unerfindlichem Grund hat das bei meinem Quelltext gar nicht mehr funktioniert. Ich bekam bei der Abfrage gar keine Rückgabeergebnisse und entsprechend funktionierte das Setzen natürlich auch nicht. Bevor ich hier gefragt habe, hatte ich natürlich diverse Sachen mit verschiedenen Suchmaschinen gesucht und getestet, aber alles nicht zielführend.

Ob das nun speziell damit zu tun hat, das ich meist keinen HTML-Teil mehr nutze, sondern nur php, weiß ich nicht.

Der Verzicht auf html, head, body usw. hat ganz einfach damit zu tun, daß ich Unterseiten per include ins Hauptmenü einbinde und da habe ich sehr schlechte Erfahrungen gemacht, wenn die eingebundenen Seiten wie übliche HTML-Seiten aufgebaut sind.

Übrigens, was jsfiddle angeht: Mit dem IE8 bekomme ich einen https-Zertifikatsfehler. Ich habe mir mit dem FF natürlich auch schon mehrfach Sachen bei jsfiddle angesehen, mußte dann aber feststellen, daß Beispiele nicht immer funktionert haben, wenn man die Teile runterlud. Das nur nebenbei. Vom Prinzip her ist das natürlich eine tolle Website.

Ich betrachte meine Anfrage insofern als erledigt, mit dem Ergebnis, daß der IE eben einfach Schrott ist. Trotzdem sollte man den Armen, die ihn nutzen, dennoch nicht alle Wege versperren und wenigstens Notlösungen bieten. Einer meiner Lieblingssprüche aus meiner Sammlung ist der hier:

IE sense nothing, I dont understand why the hell that browser exists ?? There is only one thing I appreciate about it, and that is "we can download firefox with it" :)

jaenicke - Di 02.05.17 08:20

delnu hat folgendes geschrieben :

Zur Sache mit "OnLoad" : Da herrscht ein Mißverständnis. Ich lade innerhalb des Programms eine Liste. Bevor ich das mache, erscheint ein Hinweis. Der wird erst NACH DEM LADEN DER LISTE ausgeblendet. Würde ich dieses Ausblenden durch "OnLoad" erledigen, würde der Hinweis nie erscheinen.

Komisch. Wenn ich deine Seite bei mir speichere und OnLoad benutze, sieht der Hinweis genauso aus wie bei dir und verschwindet auch zum gleichen Zeitpunkt. Egal ob im Internet Explorer, Firefox oder Chrome. Und so ist der ja auch dokumentiert.

Testen kannst du das auch ohne jQuery sehr einfach:

JavaScript-Quelltext

1:	<body style="..." onload="javascript:alert('Test');">

Das Alert kommt exakt beim Ausblenden deines Ladetextes.

delnu hat folgendes geschrieben :

Ich habe nicht vor, meine Programme unnötig aufzublähen.

Ob es dann besser ist selbst deutlich mehr Quelltext zu schreiben als nötig...
Mit jQuery habe ich auf einer kleineren Webseite ca. 400 Zeilen Code. Dort musste ich auf jQuery bis vor Kurzem verzichten, da war der Code für die gleiche Funktionalität ca. 5400 Zeilen lang (und logischerweise deutlich unübersichtlicher). Dank Browserweichen, manuell programmierten Animationen usw.

delnu hat folgendes geschrieben :

Bibliotheken kommen für mich nicht infrage

Das ist ja deine Entscheidung. Wenn du die Zeit hast alles selbst zu machen... ich habe sie nicht, weder beruflich noch privat.

delnu hat folgendes geschrieben :

Ob das nun speziell damit zu tun hat, das ich meist keinen HTML-Teil mehr nutze, sondern nur php, weiß ich nicht.

Davon kommt im Browser nichts an. Der bekommt nur den HTML Quelltext.

delnu hat folgendes geschrieben :

da habe ich sehr schlechte Erfahrungen gemacht, wenn die eingebundenen Seiten wie übliche HTML-Seiten aufgebaut sind.

Da ist es ohne schon korrekt (wenn du das nicht in einen iframe, sondern in ein div lädst wie in deinem Link).

delnu hat folgendes geschrieben :

Ich betrachte meine Anfrage insofern als erledigt, mit dem Ergebnis, daß der IE eben einfach Schrott ist.

Das hat sich ja mittlerweile deutlich geändert. Ab Version 9 funktioniert der schon sehr gut. Da brauchte ich bisher keine einzige Fallunterscheidung (für Firefox dafür schon).

Delete - Do 04.05.17 23:33

Danke erstmal, Ihr beiden, daß Ihr Euch hier nochmal geäussert habt.

Bibliotheken: Um sie nutzen zu können, muß man deren Wirkungsweise verstehen. Vor allem aus dem Grund sind sie nichts für mich, denn die Einarbeitung dauert (vor allem wegen fehlender Dokumentationen) sicher länger, als wenn man eine Lösung mit herkömmlichem Code sucht. Außerdem ist es nun mal so: Je weniger Code beim Einbinden, desto aufgeblähter sind die Bibliotheken. Delphi und schon zuvor Turbo Pascal lassen grüßen. Ich weiß, warum ich Assembler geliebt habe: Man mußte zwar viel Quellcode schreiben, aber dafür waren die fertigen Progs dann sehr schlank und sehr schnell.

Das mit dem OnLoad müßte ich gelegentlich noch mal testen. Ich benutze das eigentlich nur für Initialisierungen, die vor dem Laden der Hauptseite erfolgen müssen. Ich habe diese Sache auch erst eingebaut, als der Zugriffs aufs Internet wegen der Drosselung extrem lange gedauert hat. Im Normalfall ist die Meldung kurz nach dem Erscheinen gleich wieder weg. Ich mußte wegen der Drosselung sogar "max_execution_time" erhöhen, weil es zuvor einen timeout gab.

Browserspezifische Eigenheiten: Warum ich vor vielen Jahren vom IE weg hin zum FF bin, lag vor allem an den ständigen, nervigen Abfragen des IE. Mit FF 3 war ich lange glücklich. Je neuer die Versionen dann wurden, desto schlimmer empfand ich sie. Ich benutze jetzt vorwiegend nur noch 3 portable FF-Versionen: 3, 18 und vor allem 28 mit vielen AddOns.

Und ja, die Standards sind nicht das Gelbe vom Ei, weil sie auch beim Firefox oft nicht funktionieren. Ob das bei den neueren Versionen anders ist, weiß ich nicht, aber es gibt bei mir auf völligen identischen Monitoren, Grafikkarten und Auflösungen innerhalb eines Systems beispielsweise bei der Abfrage der aktuellen Größe des Browserfensters Erkennungsfehler, wenn der Browser auf dem zweiten Monitor läuft. Dann wird nämlich (anders als beim primären) immer die Maximalgröße und nicht die aktuelle gezeigt. Aber das nur nebenbei.

Weshalb ich das Thema nun doch noch mal weiter führe, hat aber einen anderen Grund. Ich hatte mittlerweile noch mit ein paar anderen Browsern getestet und dabei festgestellt, daß sich Opera (ich habe hier portable 12.18 und will auch keine weiteren davon runterladen) noch abartiger als der Internet Explorer verhält. Selbst wenn ich statt der variablen Höhe die Notlösung für den IE nutze und eine feste (eingeschränkte) Höhe zuweise, kümmert sich Opera nicht drum. Der unteren Teil des (vertikalen) Scrollbalkes verschwindet im Nirvana.

Ich finde es schade, daß offenbar kein Browserhersteller mal auf die Idee kommt, jemand wolle vielleicht seine Websites selbst programmieren und bräuchte dafür zuverlässige Grundfunktionen.

Wahrscheinlich werde ich es nun künftig (nicht mehr bei diesem Projekt) doch so machen müssen wie viele andere und sowohl den IE als Opera komplett blockieren, natürlich nicht ohne entsprechenden Warnhinweis. Dabei nerven mich selbst diese (in der Regel gar nicht zutreffenden) Warnhinweise, der benutzte Browser wäre zu alt.

Nachtrag: O.K., das mit dem Alert habe ich erfolgreich getestet. Aber weil ich wie ich schon schrieb, gar keinen HTML-Teil benutze, mußte ich das denn eben doch wieder per echo einbinden. Ich habe mir das mit dem echo statt temnporärer Aufhebung des php übrigens dehalb angewöhnt, um trotz der fehlenden Systax-Hervorhebung ein Gefühl dafür zu entwickeln, wie selbst kompliziertes Escapen auszusehen hat. Ansonsten aber nochwas: Ich halte es in jedem Fall für besser, kleinere CSS und/oder JS-Sequenzen in der Hauptdatei unterzubringen, als wenn später was fehlt oder die Übersichtlichkeit durch Stückelung verloren geht. Wie oft mußte ich mich über Delphisourcen ärgern, die unvollständig waren, weil gerade die entscheidenden Fremdkomponenten fehlten. Meiner Ansicht nach macht auslagern erst dann Sinn, wenn alles ausgereift ist und man nicht immer erst zusätzlich die externen Dateien in den Editor laden muß, um etwas zu prüfen und es macht auch erst ab bestimmten Datenmengen Sinn. Ich habe vorhin auf der Suche nach einer Browserweiche für Opera einen Artikel gelesen, wo jemand was von mehreren CSS-Dateien schrieb, für jeden Browser mit abweichendem Verhalten eine eigene Weiche mit jeweils separater Datei. Das halte ich für unübersichtlicher, als alles in der Hauptdatei zu belassen, entsprechend mehr Kommentare zu setzen und paar Leerzeilen mehr einzufügen.

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!