Ergebnis 1 bis 4 von 4
  1. #1
    samtun ist offline Grünschnabel
    registriert
    16-05-2013
    Beiträge
    2

    Problem mit window.onresize / jQuery resize Überwachung?

    Ich bin noch nicht sonderlich gut in Javascript, habe aber so einiges aus nem Netz "gelernt".
    Und so habe ich mich daran gemacht ein Script zu schreiben für ein Resposive-Design. Bin dabei auch so weit gekommen, dass sich die Elemente den bestimmten Fenstergrößen anpassen und sich die css-Werte ändern wie geplant.
    Ich weiß auch, dass man auf Frameworks zurückgreifen soll, aber ich habe mich entschieden selber etwas zu schreiben um den Zusammenhang wirklich voll und ganz zu verstehen (Lern-Effekt ).

    Jetzt zum Problem:
    Die Funktion die ich für diese Änderungen geschrieben habe, rufe ich zunächst per onload auf.
    HTML-Code:
    <body onload="diebreite(6,12)">
    Danach wird sie per window.onresize direkt im Javascript aufgerufen (theoretisch?), wobei ich nicht weiß ob dieser Aufruf überhaupt möglich ist und ob diese Variante überhaupt noch genutzt wird.
    Code:
    window.onresize = diebreite;
    Ich übergebe beim onload Aufruf 2 Variablen , die die Anzahl der Menüpunkte und der Contentblöcke ans script übergeben.
    Diese werden dann als Zähler für Schleifen benutzt um Arrays zu deklarieren, welche die Menüpunkte und Contentblöcke per Id ansprechen. Diese Variablen scheinen bei window.onresize allerdings nicht wieder aufgerufen zu werden, bzw sie sind null o.ä., da bin nich mir nicht ganz sicher.

    Also werden alle Elemente außer den Arrays beim Ändern der Fenstergröße neu berechnet.
    Wie bekomm ich das hin, dass sich die Arrays auch mit anpassen?
    Ich habe letztendlich sogar schon probiert die jQuery-resize funktion mit zu nutzen, bekomme diese aber nicht vernünftig integriert.

    Hier das Javascript:
    Code:
    window.onresize = diebreite;
    function diebreite(divanzahl,contentanz) {
    
    	var breite = window.innerWidth;
    	var IEbreitea = document.body.offsetWidth;
    	var IEbreiteb = document.documentElement.offsetWidth;
    
    	var menubg = document.getElementById("header");
    	var logo = document.getElementById("logo");
    	var balken = document.getElementById("balken");
    
    /*  MENUPUNKT DEKLARATION  ------------------------- */
    	var k = divanzahl;
    	menupunkt = new Array(k);
    	var divs = k - 1;
    	var i = 0;
    	while ( i <= divs) {
    		var dieses = i + 1;
    		menupunkt[i] = document.getElementById("menu" + dieses);
    		i++;
    	}
    
    /*  CONTENT BOX DEKLARATION  ------------------------- */
    	var j = contentanz;
    	contentbox = new Array(j);
    	var conts = j - 1;
    	var o = 0;
    	while ( o <= conts) {
    		var diese = o + 1;
    		contentbox[o] = document.getElementById("contentbox" + diese);
    		o++;
    	}
    
    
    
    
    
    
    /*  MOBIL LAYOUT  ------------------------- */
    	if (breite <= 644 || IEbreitea <= 644 || IEbreiteb <= 644) {
    		logo.style.margin = "0 auto";
    		logo.style.width = 100 + "%";
    		logo.style.background = "url(img/logo.png) no-repeat 50% 0";
    		balken.style.height = 174 + "px";
    		var a = 0;
    		while (a <= divs) {
    			menupunkt[a].className = 'menu-punkt-mobil';
    			a++;
    		}
    		var e = 0;
    		while (e <= conts) {
    			contentbox[e].className = 'contentbox-mobil';
    			e++;
    		}
    	}
    /*  STANDARD LAYOUT  ------------------------- */
    	else if (breite > 644 && breite <= 1100 || IEbreitea > 644 && IEbreitea <= 1100 || IEbreiteb > 644 && IEbreiteb <= 1100 ) {
    		logo.style.background = "url(img/logo.png) no-repeat 0 0";
    		logo.style.width = "100%";
    		balken.style.height = 50 + "px";
    		var b = 0;
    		while (b <= divs) {
    			menupunkt[b].className = 'menu-punkt';
    			b++;
    		}
    		var f = 0;
    		while (f <= conts) {
    			contentbox[f].className = 'contentbox';
    			f++;
    		}
    	}
    /*  LARGE LAYOUT  ------------------------- */
    	else if (breite > 1100 && breite <= 1370 || IEbreitea > 1100 && IEbreitea <= 1370 || IEbreiteb > 1100 && IEbreiteb <= 1370 ) {
    		logo.style.background = "url(img/logo.png) no-repeat 0 0";
    		balken.style.height = 64 + "px";
    		var c = 0;
    		while (c <= divs) {
    			menupunkt[c].className = 'menu-punkt-large';
    			c++;
    		}
    		var g = 0;
    		while (g <= conts) {
    			contentbox[g].className = 'contentbox-large';
    			g++;
    		}
    	}
    	else if (breite > 1370 || IEbreitea > 1370 || IEbreiteb > 1370 ) {
    		logo.style.background = "url(img/logo.png) no-repeat 0 0";
    		balken.style.height = 64 + "px";
    	 	var d = 0;
    	 	var h = 0;
    	 	while (d <= divs) {
    			menupunkt[d].className = 'menu-punkt-large';
    			d++;
    		}
    		while (h <= conts) {
    			contentbox[h].className = 'contentbox-xlarge';
    			h++;
    		}
    	}
    }
    Geändert von samtun (16-05-2013 um 16:11 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.663

    AW: Problem mit window.onresize / jQuery resize Überwachung?

    Je nach Browser ist da bei onresize-Event was in deinen Parametern drin, oder nicht - aber auf jeden Fall nicht das, was du haben willst.

    Wenn du bei onresize auch die Parameter übergeben willst, darfst du die Funktion nicht direkt an window.onresize zuweisen:
    Code:
    window.onresize = function(){
    	diebreite(6, 12);
    };

  3. #3
    samtun ist offline Grünschnabel
    registriert
    16-05-2013
    Beiträge
    2

    AW: Problem mit window.onresize / jQuery resize Überwachung?

    Ah! Logisch, Danke :-)
    Funktioniert super.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.663

    AW: Problem mit window.onresize / jQuery resize Überwachung?

    Bitte - gern geschehen.

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 06-02-2010, 09:31
  2. window.onresize in Frame?
    Von blue_devil86 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 25-09-2007, 10:35
  3. Antworten: 0
    Letzter Beitrag: 16-09-2005, 08:45
  4. window.resize und Hauptfenster öffnen
    Von joernhering im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 03-08-2005, 22:58
  5. problem mit onResize
    Von cassettenjockey im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 10-09-2004, 08:20

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •