[jquery] Check device width in globaler Variable?

[Dustin84]

Hallo,

ich mache aktuell eine responsive Webseite mit Bootstrap 3.
Ich habe folgende Funktionen, um das aktuelle device bzw. die Fensterbreite zu erhalte :

$(window).bind("load resize", function() {
	// Check device width
	// -------------------------------------------------------------------------------------------------------------	
	var device,
	      window_width = $(window).width();
			
	if (window_width >= 1200) {		
		/* Large devices (large desktops, 1200px and up) */
		device = 'lg';
	} else if (window_width >= 992) {
		/* Medium devices (desktops, 992px and up) */
		device = 'md';
	} else if (window_width >= 768) {
		/* Small devices (tablets, 768px and up) */
		device = 'sm';
	}else{
		/* Extra small devices (phones, up to 480px) */
		device = 'xs' // Phone
	}
	console.log('Device: '+device); // Ausgabe klappt wunderbar
});


$(document).ready(function() {
  console.log('Current device width: '+device); // Hier erhalte ich eine Fehlermeldung
});

Leider ist die Variable "device" im document.ready nicht vorhanden. Firebug gibt mir folgende Fehlermeldung aus:

ReferenceError: device is not defined
console.log('Current device width: '+device);

In meiner document.ready Funktion habe ich weitere Funktionen (Slider etc), wo ich die Variable device abfragen müsste.

Wie kann ich sie überall verfügbar machen?

Gruß
D.

 

[jeipack]

Du hast die Variable innerhalb einer Funktion deklariert, somit ist sie auch nur innerhalb der Funktion gültig.

So müsste es klappen:

var device = '';
$(window).bind("load resize", function() {
    // Check device width
    // -------------------------------------------------------------------------------------------------------------    
          window_width = $(window).width();
            
    if (window_width >= 1200) {     
        /* Large devices (large desktops, 1200px and up) */
        device = 'lg';
    } else if (window_width >= 992) {
        /* Medium devices (desktops, 992px and up) */
        device = 'md';
    } else if (window_width >= 768) {
        /* Small devices (tablets, 768px and up) */
        device = 'sm';
    }else{
        /* Extra small devices (phones, up to 480px) */
        device = 'xs' // Phone
    }
    console.log('Device: '+device); // Ausgabe klappt wunderbar
});
 
 
$(document).ready(function() {
  console.log('Current device width: '+device); // Hier erhalte ich eine Fehlermeldung
});

Das müsste auch klappen, ich finde es aber nicht so schön globale Variablen in einer Funktion zu definieren.

$(window).bind("load resize", function() {
    // Check device width
    // -------------------------------------------------------------------------------------------------------------    
          device = '';
          window_width = $(window).width();
            
    if (window_width >= 1200) {     
        /* Large devices (large desktops, 1200px and up) */
        device = 'lg';
    } else if (window_width >= 992) {
        /* Medium devices (desktops, 992px and up) */
        device = 'md';
    } else if (window_width >= 768) {
        /* Small devices (tablets, 768px and up) */
        device = 'sm';
    }else{
        /* Extra small devices (phones, up to 480px) */
        device = 'xs' // Phone
    }
    console.log('Device: '+device); // Ausgabe klappt wunderbar
});
 
 
$(document).ready(function() {
  console.log('Current device width: '+device); // Hier erhalte ich eine Fehlermeldung
});