[jQuery] Viewport abfragen funktioniert im IE nicht. @ tutorials.de: Tutorials, Forum & Hilfe

josDesign · 23.06.10 20:20

Hallo Gemeinde,

ich möchte ab einer bestimmten Viewport-Höhe im Browser eine CSS-Klasse entfernen.

Das folgende Skript funktioniert überall ausser im IE.

Dies ist mein Code:

Code :

// JavaScript Document
 
// jQuery's noConflict mode is used instead of the $
var J = jQuery.noConflict();
 
 
J(document).ready(function()
{
 
    //-------------------------------------------------------------------
    // div#top modification
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
    //console.log(viewportHeight);
    if( viewportHeight < 650 ) {
        J('#top').removeClass("normalHeight");
    }
    
});

Wie man sieht, soll die KLasse "normalHeight" von div#top entfernt werden, sofern die Viewporthöhe < 650 Pixel ist.

Hat vielleicht jemand einen Tipp, warum das so im IE nicht funktoiniert?

Mit bestem Dank im Voraus,
jos

Maik · 23.06.10 20:25

Hi,

IE kennt kein window.innerHeight, sondern nutzt dafür document.body.clientHeight bzw. im standardkonformen Modus document.documentElement.clientHeight - siehe hierzu http://de.selfhtml.org/javascript/ob...m#inner_height, oder http://www.quirksmode.org/dom/w3c_cssom.html mit einer Übersicht der Kompatibilität.

mfg Maik

josDesign · 23.06.10 23:49

Vielen DAnk für die Antwort,

Die IF-Abfrage funktioniert für den IE, habs per Alert getestet. Allerdings funktoiniert das jQuery im IE nicht.

Sollte das jQuery nicht problemlos funktionioeren im IE?

HTML-Code:

	// div#top modification
	
	var viewportHeightIE = document.body.clientWidth;
	//console.log(viewportHeight);
	if( navigator.appName=="Microsoft Internet Explorer" ) {
		if( viewportHeightIE < 650 ) {
			J('#top').removeClass('normalHeight');
		}
		
	} else {
		var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
		if( viewportHeight < 650 ) {
			J('#top').removeClass("normalHeight");
		}
	}

**Quaese** · 24.06.10 01:26

Hi,

den einzigen Fehler den ich entdecken kann - du berechnest die Breite anstatt die Höhe.

Code :

1	var viewportHeightIE = document.body.clientWidth;

Korrekt wäre wohl:

Code :

1	var viewportHeightIE = document.body.clientHeight;

Ciao
Quaese

josDesign · 24.06.10 07:12

Vielen Dank! DAS war die Lösung.... OMG

LieGrü
jos

bofh1337 · 06.01.12 00:22

An dem Thema bin ich auch gerade dran, ich hatte bis dato nur sehr wenig mit JS zu tun und sitze inzwischen schon seit Tagen daran, die Daten (Viewport => Integer) zurück an den Server zu schicken, das ganze habe ich über Jquery bzw. der Ajax-Api gebaut, laut Firebug wird es per Get an den server geschickt, jedoch kommt da nichts an (auch im Apache-Logfile steht das Viewport (bzw. die Höhe in Pixel) mit drin.

Kann mir da jemand ein Tipp geben, wie ich die Daten richtig weiterverarbeiten kann?

So sieht das ganze aus:

Funktion, wo Viewport ausgelesen und verschickt wird:

PHP-Code:


function test ()

{

  ?><?xml version="1.0" encoding="<?php echo __CHARSET; ?>"?>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

    <head>

        <title>test</title>

        <script type="text/javascript" src="<?php echo __PWC_HOME__; ?>/library/pwc/javascript/jquery.js"></script>

        <script>

        $(document).ready(function()

        {

            h = $(window).height();

            data = {'op': 'test1', 'height': h};

            $.ajax({

                url: 'pwc.test.php',

                type: 'GET',

                data: data

            });

            return false;

        });

     </script>

    </head>

    <body>

        test

    </body>

</html><?php

}

Das ganze wird in der Funktion "test1" abgerufen, dort kommt aber nichts an, obwohl Firebug mir das ausspuckt: http://devel.local/test.php?op=test1&height=520

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQuery length funktioniert nicht

jQuery funktioniert nicht mit asp.net Masterpage

HTML eines jQuery-Elements abfragen (nicht innerHTML)

jQuery: funktioniert nach Request nicht

JQuery und onsubmit funktioniert nicht

E-Mail:

Abonnieren Abbestellen