उत्तरदायी डिजाइन

Question

के लिए जावास्क्रिप्ट को अक्षम कैसे करें मैं अपनी वेबसाइट की स्लाइडशो पृष्ठभूमि के लिए सुपरसाइज्ड jQuery का उपयोग कर रहा हूं। मैं वेबसाइट को उत्तरदायी बना रहा हूं और सीएसएस मीडिया प्रश्नों का उपयोग कर रहा हूं।

मैं 480px से कम होने पर स्क्रिप्ट को अक्षम करने में सक्षम होना चाहता हूं।

यहाँ मेरी मीडिया क्वेरी में उदाहरण सिर्फ प्रदर्शन के रूप में #supersized डालने के लिए, वास्तविक स्लाइडर पृष्ठभूमि

$(document).ready(function(){ 

     jQuery(function($){ 

      $.supersized({ 

       // Functionality 
       slideshow    : 1,   // Slideshow on/off 
       autoplay    : 0,   // Slideshow starts playing automatically 
       start_slide    : 1,   // Start slide (0 is random) 
       stop_loop    : 0,   // Pauses slideshow on last slide 
       random     : 0,   // Randomize slide order (Ignores start slide) 
       slide_interval   : 3000,  // Length between transitions 
       transition    : 6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 1000,  // Speed of transition 
       new_window    : 1,   // Image links open in new window/tab 
       pause_hover    : 0,   // Pause slideshow on hover 
       keyboard_nav   : 1,   // Keyboard navigation on/off 
       performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
       image_protect   : 1,   // Disables image dragging and right click with Javascript 

       // Size & Position       
       min_width    : 0,   // Min width allowed (in pixels) 
       min_height    : 0,   // Min height allowed (in pixels) 
       vertical_center   : 1,   // Vertically center background 
       horizontal_center  : 1,   // Horizontally center background 
       fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions) 
       fit_portrait   : 1,   // Portrait images will not exceed browser height 
       fit_landscape   : 0,   // Landscape images will not exceed browser width 

       // Components       
       slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
       thumb_links    : 1,   // Individual thumb links for each slide 
       thumbnail_navigation : 0,   // Thumbnail navigation 
       slides     : [   // Slideshow Images 
                {image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'} 
              ], 

       // Theme Options    
       progress_bar   : 1,   // Timer for each slide       
       mouse_scrub    : 0 

      }); 
     }); 

मैं सोच रहा था मैं सिर्फ सीएसएस का उपयोग करके बस ऐसा कर सकता है के लिए स्क्रिप्ट है: कोई नहीं

क्या यह बुरी प्रथा है, हालांकि इसमें अभी भी स्क्रिप्ट चल रही है और क्या इसे किसी भी तरह से अक्षम करना सबसे अच्छा है?

Answer 1

जैसा कि अन्य लोगों ने उल्लेख किया है, आप बहुत सारे jQuery प्लगइन्स का उपयोग कर सकते हैं। हालांकि, अगर आप जो भी उपयोग करना चाहते हैं वह सिर्फ सादा वेनिला jQuery है, तो आप जो भी चाहते हैं वह भी कर सकते हैं।

आप खिड़की के आकार का पता लगाने के लिए jquery में आकार बदलने का तरीका उपयोग कर सकते हैं।

$(document).ready(function() { 
    $(window).resize(); 
}); 

पुनश्च> आप ऐसा नहीं करते हैं:

$(window).resize(function() { 
    if ($(this).width() > 480) { 
     // call supersize method 
    } 
}); 

तब दस्तावेज़ तैयार पर, बस आकार बदलने खिड़की कॉल करने के लिए सुनिश्चित करें तो यह शुरू में कॉल या नहीं आपकी खिड़की के मौजूदा आकार के आधार पर विधि कॉल करेंगे खिड़की का आकार बदलने पर हर बार चलाने के लिए इस स्क्रिप्ट की आवश्यकता होती है, लेकिन केवल तभी जब यह 480 पिक्सेल से नीचे पहुंच जाती है, तो आपकी स्क्रिप्ट को अक्षम या सक्षम होने के बाद आकार बदलने के तरीके में बाध्य करने के लिए मामूली संशोधन किए जा सकते हैं।

Answer 2

jRespond, एक स्क्रिप्ट Viget द्वारा जारी आप व्यूपोर्ट आकार के आधार पर जावास्क्रिप्ट को नियंत्रित करने के लिए अनुमति देता है:

अनुच्छेद: http://viget.com/inspire/managing-javascript-on-responsive-websites

कोड: https://github.com/ten1seven/jRespond

Answer 3

आप के भीतर कुछ सीएसएस नियमों के साथ एक छिपा div सेट कर सकते हैं एक मीडिया क्वेरी, फिर उन सीएसएस विशेषताओं को jQuery के css() के साथ जांचें और उस पर आधारित आपके स्लाइड शो को चालू या बंद करें। विशेष रूप से:

@media all and (max-width: 480px) { 
    #testdiv{ 
     display:none; 
    } 
} 

और js:

if($("#testdiv").css("display") == "none"){ 
    $.supersized({...}); 
} 

ध्यान दें कि यह अनिवार्य रूप से वास्तव में पुस्तकालय प्राप्त किए बिना Modernizr दृष्टिकोण का उपयोग कर रहा है।

Answer 4

जैसा कि @Pointy टिप्पणियों में नोट किया गया है, आधुनिकताकर्ता आपको जावास्क्रिप्ट से मीडिया प्रश्नों को कॉल करने की अनुमति देता है। modernizr documentation

Answer 5

आप स्क्रीन.विड्थ का उपयोग करके जावास्क्रिप्ट के साथ स्क्रीन चौड़ाई का पता लगा सकते हैं, और फिर यह निर्धारित कर सकते हैं कि आप वहां से क्या करना चाहते हैं।

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing 
    return; 
} else { 
    // do all your cool stuff here for larger screens 
} 

लपेटें आपके एनिमेशन के सभी और सभी कोड आप नहीं मामलों के लिए किसी और ब्लॉक जहां स्क्रीन आकार है कम से कम 480

सावधानी के एक शब्द के रूप में अंदर चलाना चाहते हैं , आईई चीजों को अलग करने के लिए काम करता है, और मेरे पास परीक्षण करने के लिए आईई नहीं है, इसलिए आप स्क्रीन को चलाने के लिए और वहां आवश्यक अंतर के लिए समायोजित कर सकते हैं। लेकिन क्रोम में, स्क्रीन.विड्थ 1280 लौटाता है, जो मेरी स्क्रीन के लिए सही चौड़ाई है।

Answer 6

मुझे लगता है कि असद का समाधान सबसे अच्छा है या आप आधुनिकता का उपयोग करते हैं। क्योंकि आपके पास एक फ़ाइल में ब्रेकपॉइंट परिभाषा (480px) है और जेएस और सीएसएस में नहीं है। यदि आप एससीएसएस का उपयोग करते हैं तो आपके पास एक चर में ब्रेकपॉइंट के लिए केवल एक परिभाषा है।