jQuery: विंडो चौड़ाई/मीडिया क्वेरी

Question

पर आधारित स्क्रिप्ट अक्षम करें मेरे पास नीचे jQuery स्क्रिप्ट है जो एक div को फ़्लोटिंग-फिक्स्ड बनने के लिए ट्रिगर करती है। (जो काम कर रहा है और मुझे इसके साथ कोई समस्या नहीं है)।

$(document).ready(function() { 
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0)); 
}); 
$(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 
    var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0)); 

    // whether that's below the form 
    if (y >= ctop) { 
     // if so, ad the fixed class 
     $('#comment').addClass('fixed'); 
     if (y > abottom-$('#comment').height()){ 
      $('#comment').offset({'top': abottom-$('#comment').height()-y}); 
     } 
     else 
     { 
      $('#comment').offset({'top': 0 }); 
     } 
    } else { 
     // otherwise remove it 
     $('#comment').removeClass('fixed'); 
    } 
    var newWidth = $('#comment').parent().width(); 
    $('#comment').width(newWidth); 

    }); 

आप कार्रवाई here में देख सकते हैं। यह दाईं तरफ ग्रे बॉक्स है जो कहता है "पोल"

मेरी साइट उत्तरदायी है, इसलिए यह 768 पिक्सल के नीचे जाती है, तो मतदान div ब्लॉग सामग्री के नीचे चला जाता है। तो पूर्ण ब्राउज़र चौड़ाई में लिपि बहुत अच्छा काम करती है, लेकिन जब मैं इसका आकार बदलता हूं तो चुनाव div dewwire चला जाता है।

जब मैं jQuery की बात करता हूं तो मैं पूरी तरह से नोब हूं - मैं एक उत्कृष्ट प्रति-पास्टर हूं - लेकिन मैं कल्पना कर रहा हूं कि मौजूदा स्क्रिप्ट में एक फैंसी तरीका है ताकि इसे मीडिया क्वेरी से मेल खाने पर इसे अक्षम किया जा सके। या ब्राउज़र की चौड़ाई, ताकि मैं निश्चित-फ़्लोटिंग-डीवी कार्यक्षमता से छुटकारा पा सकूं।

यदि कोई भी स्थानीय प्रतिलिपि चाहता है, तो here is a zip file एचटीएमएल फ़ाइल के साथ (टाइप देखें क्योंकि मैं वेबफोंट का उपयोग कर रहा हूं)।

Answer 1

स्टैक ओवरफ़्लो खाते के बिना एक साथी ने मेरा प्रश्न देखा और ई-मेल द्वारा उत्तर प्रदान किया। यह एक धोखेबाज सरल समाधान है। सीधे शब्दों में मौजूदा कोड को जोड़ने:

if ($(window).width() > 768) { 

कोड के अंतिम खंड इस तरह दिखता है:

$(document).ready(function() { 
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0)); 
}); 
$(window).scroll(function (event) { 

    if ($(window).width() > 768) { 

     // what the y position of the scroll is 
     var y = $(this).scrollTop(); 
     var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0)); 

     // whether that's below the form 
     if (y >= ctop) { 
      // if so, ad the fixed class 
      $('#comment').addClass('fixed'); 
      if (y > abottom-$('#comment').height()){ 
       $('#comment').offset({'top': abottom-$('#comment').height()-y}); 
      } 
      else 
      { 
       $('#comment').offset({'top': 0 }); 
      } 
     } else { 
      // otherwise remove it 
      $('#comment').removeClass('fixed'); 
     } 
     var newWidth = $('#comment').parent().width(); 
     $('#comment').width(newWidth); 
    } 
}); 

मैं अन्य सभी यहाँ प्रदान जवाब का परीक्षण किया, लेकिन कोई भी सही तरीके से काम किया। आपकी मदद के लिए, हालांकि, बहुत धन्यवाद।

Answer 2

मैं कुछ समय पहले ही समस्या का सामना करना पड़ा और यह है कि कैसे मैं यह संबोधित किया:

जब जरूरत तत्व को छिपाने के लिए एक मीडिया क्वेरी सेट करें:

/* Somewhere above... */ 
div#toHide { display: block; /* ... */ } 

@media (min-width: 800) { 
    div#toHide { display: none; } 
} 

मेरी .js में

तब मैं फ़ाइल इस तरह एक समारोह बना लिया है ':

function isDivVisible() { 
    return $('div#toHide').is(':visible'); 
} 

अब मेरी पद्धति पर जो मैं सब यह कोड है कि अगर उपयोगकर्ता को देखने के लिए सक्षम नहीं होगा निष्पादित करने के लिए नहीं करना चाहता था

यह:

function someHugeFunction() { 
    if(isDivVisible()) { 
     // some crazy stuff here. 
    } 
} 

अगर यह सुरुचिपूर्ण है या नहीं मैं नहीं जानता, यह मेरे लिए काम किया।

Answer 3

क्या आप मीडिया प्रश्नों का उपयोग करके नामित स्क्रीन आकार पर तय किए गए बजाय, चुनाव की स्थिति को सापेक्ष नहीं कर सकते हैं?

@media (min-width: 768) { 
    #comment { 
     position: relative !important; 
     top: 0 !important; 
    } 
} 

या, आप अपने समारोह के भीतर jQuery इस्तेमाल कर सकते हैं

if ($(window).width() > 768) { 
    $('#comment').removeClass('fixed'); 
} 

Answer 4

शायद कुछ की तरह:

$(window).resize(function(){ 
    if($(this).width() <= 768) { 
    $('foo').removeClass('bar') //whatever css class is doing the undesired effect at breakpoint 
    } 
}); 

Answer 5

matchMedia हो सकता है आप जो खोज रहे हैं: http://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

अपने पुस्तक

if (y >= ctop && isWide) { 
... 
} 

सही नहीं में

var isWide, 
    width768Check = window.matchMedia("(min-width: 768px)"); 

width768Check.addListener(setWidthValue); 
function setWidthValue (mediaQueryList) { 
    isWide = width768Check.matches; 
} 
isWide = width768Check.matches; 

$(window).resize(function(){ 
    if (isWide) { 
     $('#comment').addClass('fixed'); 
    } else { 
     $('#comment').removeClass('fixed'); 
    } 
}); 

और फिर लेकिन काम कर देता है:

अपने स्क्रॉल समारोह के बाहर कुछ इस तरह जोड़ें। विंडो का आकार बदलते समय आकार() फ़ंक्शन उचित रूप से आपकी निश्चित कक्षा को जोड़/हटा देगा।