[FRAGE] JS wird in Browsern unterschiedlich ausgeführt

[giulz]

Hallo an alle!

Habe mich gerade eben neu hier angemeldet. Ich hoffe jemand kann mir weiterhelfen.
mein Problem ist ein Skript das auf allen Seiten meiner Webseite ausgeführt wird, sich jedoch in verschiedenen Browsern unterschiedlich verhält. Es soll praktisch vom linken Teilbereich die Höhe auslesen und diese dann dem rechten Teilbereich zuordnen. Es wird zwar ausgeführt jedoch liest es bei verschiedenen Browsern unterschiedliche Höhen aus. Wenn man dann die Höhen des linken Bereichs ausmisst, stimmen diese nicht mal annähernd mit den zugeordneten Höhen des rechten Teilbereichs überein. Ich hoffe ihr könnt mir so weit folgen.
Bei Chrome macht es den Abschnitt sogar länger und man muss dadurch auf der Seite scrollen. Der IE scheint es irgendwie gar nicht auszuführen.

<script type="Text/Javascript">
 $(document).ready(function() {
   var sliderhoehe = $("div.linkeSpalte");
        $("div.rechteSpalte").css({ height: sliderhoehe.height()
        });
 });
</script>

die Seite:
front office design | Christian Kohler AG

Ich arbeite mit dem Desktop CMS Weblica und bin erst seit einem halben Jahr in dem Bereich aktiv.

Vielen Dank!

Giulia

 

[mikdoe]

Ohne tiefer gegraben zu haben: hast du den Hinweis in dem gelben Kasten auf .height() | jQuery API Documentation beachtet?
Gibt es Ausgaben in der Browserkonsole (F12)?
In welchem Browser passt es denn komplett ohne Mängel?

 

[giulz]

Beachtet kann man nicht sagen, da ich bis jetzt damit nichts anfangen kann.
und die browserkonsole:
IE: nichts
Chrome: es werden bloss zwei Bilder nicht geladen
FF: scheint das skript gar nicht auszuführen, das bild sieht gleich aus wie beim IE
Safari: auch nichts

In bisher keinem Browser hat es so ausgesehen wie ich mir das eigentlich vorstelle.

 

[giulz]

Oder gibt es eine bessere Lösung um mein Ziel zu erreichen?

Ich muss das Projekt bald mal abschliessen und die unterschiedlichen Höhen der zwei Spalten sind das Einzige, was noch zur vollkommenen Zufriedenheit fehlt

 

[mikdoe]

wenn du mich fragen würdest wüsste ich nicht wie man dir helfen kann.

 

[paul schmitz]

Bei mir klappt mein Testscript in FF 28.0.5 und in Chrome wunderbar. Nur IE funktioniert nicht

<script src="http://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script type="Text/Javascript">
$(document).ready(function() {
   var sliderhoehe = $("div.linkeSpalte");
   $("div.rechteSpalte").css('height', sliderhoehe.height());
});
</script>
<div class="rechtespalte" style="border:1px solid black;">TEXTTEXTTEXT</div>
<div class="linkespalte" style="border:1px solid black;height:100px;">TEXTTEXTTEXT</div>

Nach der Javascriptausführung haben beide <div>-Elemente die gleiche Höhe (100px)

 

[giulz]

Bei mir arbeitet es zwar überall ausser im IE auch, nur berechnet es komischerweise immer die falsche Höhe.

Könnte es vielleicht damit zusammenhängen, dass auch noch mehrere andere Scripte ausgeführt werden?
Das eine ist ein Slider von SudoSlider und das andere sind auch Slider die von Weblica generiert werden.

Nur kann ich mir nicht vorstellen, dass die Einfluss auf die Berechnung der Höhe haben.

 

[SteelWheel]

Nein, Du hast einen Denkfehler! Aber zunächst empfehle ich Dir den Umgang mit Selektoren nochmal zu lesen, Rangfolgen dieser (ID, Klasse, Tag) usw.

Du erwartest die 100 px - richtig? Kriegste nicht! Gefühlt müsstest Du die Information nicht als Inline-CSS hinterlegen, sondern als Klasse wirklich auch anlegen; dann dürfte es überall (Browser) funktionieren. Das hat was mit "Zeitpunkten" zu tun. Und Inline-CSS ist max. "above-the-fold" anzuwenden, allerdings dann (!) auch schon wieder - als Empfehlung - mit eigenem <style>-Tag.

Warum machst Du denn nicht sowas?

.rechtespalte, .linkespalte { border:1px solid black; height:100px; }

Der Selektor wäre übrigens nur

$(".linkeSpalte")

.

Ich glaube übrigens zu wissen, was Du vor hast (dass beide Boxen immer die gleiche Höhe haben - egal wieviel Content unterschiedlicher Art vorliegt). Es geht total ohne JavaScript, jQuery o. ä. - rein mit CSS. Aber da wirst ein wenig mehr für ändern müssen.

Aber wie Du schon selbst geschrieben hast: Du wirst Dinge enthalten haben - die wir nicht sehen -, die sich da jetzt einmischen. Meist sind es - Warnung, Ferndiagnose! - Dinge wie paddings, margins etc.

Enjoy ...

 

[giulz]

Du erwartest die 100 px - richtig? Kriegste nicht! Gefühlt müsstest Du die Information nicht als Inline-CSS hinterlegen, sondern als Klasse wirklich auch anlegen; dann dürfte es überall (Browser) funktionieren. Das hat was mit "Zeitpunkten" zu tun. Und Inline-CSS ist max. "above-the-fold" anzuwenden, allerdings dann (!) auch schon wieder - als Empfehlung - mit eigenem <style>-Tag.

Was meinst du denn genau mit "wirklich als Klasse angelegen"? Soweit mein Wissensstand reicht, habe ich nirgends bewusst Inline-CSS angewendet, sondern es entweder als externe Datei oder über ein <style>-Tag im head eingebunden.

Und ja mit deiner Vermutung hast du recht. Mein Chef wünscht sich einfach eine Seite auf der man nicht scrollen muss, egal was für content drin ist.

Was würdest du mir denn als alternative Lösung ohne JS vorschlagen?

Edit:
Nochmal zum gewünschten Ergebnis: Ich hab in der linken Spalte einen Bilderslider der seine Breite immer auf 75%-Fensterbreite anpasst und dadurch variiert die Höhe der Spalte. Die rechte Spalte soll aber wegen Schönheit genau gleich hoch sein, egal ob man dann den content in der Spalte selbst scrollen muss.
Es bringt mich noch zum verweifeln es kann doch nicht sein, dass das mit der heutigen Technik so schwer zu lösen ist...

 

[kkapsner]

Dein Link oben funktioniert nicht.

Um dir wirklich helfen zu können, müssten wir die HTML und CSS Struktur deiner Seite wissen.

 

[SteelWheel]

@giulz: Als Inline-CSS gilt bereits Deine "border" im Style-Attribut auf einem Tag ... Deine Aussage bzgl. "nicht Scrollen" verwirrt mich. Ich kann Dir womöglich aus dem Stand 30 Gerätetypen aufzählen, die Scrollen werden müssen (ein rein internes Projekt?). Anyway, Du wirst Umdenken müssen, da Du mit "nur zwei" Div-Tags das Ergebnis nicht erzielen können wirst.

 

[giulz]

Deine Aussage bzgl. "nicht Scrollen" verwirrt mich. Ich kann Dir womöglich aus dem Stand 30 Gerätetypen aufzählen, die Scrollen werden müssen

Das Scrollen wird über media queries auf mobilen Geräten, die du wahrscheinlich im Kopf hattest, erledigt. Da hab ich also ein anderes Layout als am Desktop.

@kkapsner: Hier ist nochmal der neue Link zur Seite: front office design | Christian Kohler AG

Ich habe hier jetzt noch 6 Arbeitstage à 8.5 Stunden. Ich glaube das dürfte genug Zeit sein, um es deine andere Methode wenigstens einmal auszuprobieren. Wenn es nicht reichen sollte, dann ist es halt so, aber es wäre schön, wenn du mir das mal erläutern könntest

 

[kkapsner]

Ich habe auf der Seite zwei Scollbalken direkt nebeneinander... da wird kein einziges Element an die Browserhöhe angepasst.