verstecken und zeigen div Elemente nach Größe des Fensters

Ich habe ein wenig Code zum Verstecken eines Div basierend auf der Breite des Browser-Fensters. Es funktioniert großartig in einem Browserfenster. Wenn ich versuche, dieselbe Seite in einer Twitter-iOS-App zu öffnen, funktioniert der Code nicht mehr. Hier ist der Code.verstecken und zeigen div Elemente nach Größe des Fensters

$(function() { 
    var isAdded = false; 
    $(window).resize(function() { 
     if ($(window).width() > 975) { 
      isAdded = true; 
      $('.sideBar').removeClass('hidden'); 
     } else if ($(window).width() < 975) { 
      isAdded = false; 
      $('.sideBar').addClass('hidden'); 
     } 
    }); 
});

Wenn ich alert(screen.width); auf die zweite Bedingung hinzuzufügen, das Alarm-Fenster zeigt nicht in dem mobilen Gerät auf. Jede Hilfe ist willkommen

UPDATE Ich nahm Sphinxxx Antwort und versuchte dies. Es funktioniert, wirkt aber etwas schlampig. Was denkst du alle? Ich bin ein wenig grün mit js/jquery

$(function() { 
    var isAdded = false; 
    $(window).load(function() { 
     if ($(window).width() < 975) { 
      isAdded = false; 
      $('.sideBar').addClass('hidden'); 
     }; 
     $(window).resize(function() { 
      if ($(window).width() > 975) { 
       isAdded = true; 
       $('.sideBar').removeClass('hidden'); 
      } else if ($(window).width() < 975) { 
       isAdded = false; 
       $('.sideBar').addClass('hidden'); 
      } 
     }); 
    }); 
});

Quelle

2016-03-20 Chris Pilie

den iOS-App funktioniert tatsächlich jemals bekommen * Größe geändert *? Versuchen Sie stattdessen das 'load' Ereignis zu benutzen:' $ (window) .load (function() {'. – Sphinxxx

Das hat tatsächlich funktioniert, aber die Art und Weise wie ich es gemacht habe mag ein wenig schlampig sein –

Sind Sie meta in <head> mit?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

UPD: Versuchen Sie, Ihre Wrapper-Funktion mit .ready() Funktion zu ersetzen:

$(document).ready(function() { 
    var isAdded = false; 

    $(window).resize(function() { 
     if ($(window).width() > 975) { 
      isAdded = true; 
      $('.sideBar').removeClass('hidden'); 

     } else if ($(window).width() < 975) { 
      isAdded = false; 
      $('.sideBar').addClass('hidden'); 
     } 
    }); 

    $(window).resize(); // don't forget to trigger a code 
});

Quelle

2016-03-20 01:32:29 Undefitied

ja ich benutze das –

aktualisiert mit einem weiteren Vorschlag – Undefitied

Ich habe es versucht und es hat nicht funktioniert –

Eine ziemlich sauberen Art und Weise, es zu tun wäre, die Einstellung Code in einer separaten Funktion zu setzen, und dann haben sowohl load und resize Aufruf, die Funktion:

$(function() { 
    var win = $(window), 
     side = $('.sideBar'), 
     isAdded = false; 

    function rearrange() { 
     if (win.width() > 975) { 
      isAdded = true; 
      side.removeClass('hidden'); 
     } else { 
      isAdded = false; 
      side.addClass('hidden'); 
     } 
    } 

    win.load(rearrange); 
    win.resize(rearrange); 
});

Quelle

2016-03-20 02:12:04 Sphinxxx

verstecken und zeigen div Elemente nach Größe des Fensters

Antwort

Verwandte Themen