2013-02-20 53 views
5

मैं एक क्रॉस-ब्राउज़र वेबसाइट पर एक आकार बदलने योग्य टेक्स्टरेरा लागू कर रहा हूं। अब एफएफ/क्रोम/सफारी में, निम्नलिखित:विशिष्ट सीएसएस संपत्ति संगतता के लिए परीक्षण प्रोग्रामेटिक रूप से (टेक्स्टरेरा पर समर्थन का आकार बदलें)

textarea{ 
    resize: both; 
    } 

एक आकर्षण की तरह काम करता है। चारों ओर सूँघने थोड़ा सा मुझे यहाँ का नेतृत्व किया है:

http://www.w3schools.com/cssref/css3_pr_resize.asp

मैं कहां से सीखा है कि ओपेरा और IE इस संपत्ति का समर्थन नहीं करते।

कोई बड़ी समस्या नहीं है, तो निम्न जावास्क्रिप्ट resizable() करने के लिए एक jQuery यूआई कॉल सुविधा के लिए अंदर लिपटे के साथ, पता लगाने की देखभाल कर सकते हैं:

if ((navigator.userAgent.indexOf('Trident') != -1) || (navigator.userAgent.indexOf('MSIE') != -1) || (navigator.userAgent.indexOf('Opera') != -1)){ 

हालांकि, मैं स्पष्ट ब्राउज़र परीक्षण नापसंद करते हैं। क्या एक विशिष्ट सीएसएस संपत्ति प्रोग्रामेटिक रूप से समर्थन का परीक्षण करने का कोई तरीका है?

उत्तर

2
ऊपर adeneo की मदद से

, अंतिम, सामान्य प्रयोजन समाधान इस प्रकार है:

var shims_property_for_element, supports_property_on_element; 

shims_property_for_element = function(prop, elem, method, attrs) { 
    if (!supports_property_on_element(prop, elem)) { 
    return $(function() { 
     var numEles; 
     $(elem)[method](attrs); 
     numEles = $(elem).length; 
     return window.setInterval((function() { 
     if ($(elem).length !== numEles) { 
      numEles = $(elem).length; 
      return $(elem)[method](attrs); 
     } 
     }), 1000); 
    }); 
    } 
}; 

supports_property_on_element = function(prop, elem) { 
    var e, len, vendors; 
    e = document.createElement(elem); 
    if (prop in e.style) { 
    return true; 
    } 
    return false; 
}; 

कौन इस विशेष मामले में उसके बाद निम्न कॉल करने के लिए अनुवाद:

shims_property_for_element('resize', 'textarea', "resizable") 
5

चेक अगर एक पाठ क्षेत्र की शैली घोषणा रिटर्न "का आकार परिवर्तन", के लिए अपरिभाषित यह अगर करता है, यह समर्थित नहीं है:

var txtarea = document.createElement('textarea'); 

if (txtarea.style.resize != undefined) { 
    //resize is supported 
} 

यहाँ एक FIDDLE यह परीक्षण करने के लिए है। यह क्रोम में और ओपेरा में भी ठीक है, और मैंने ओपेरा में सीएसएस संपत्ति "आकार बदलें" का परीक्षण किया, और ऐसा लगता है कि यह ठीक काम करता है, इसलिए यह ओपेरा में समर्थित है। परीक्षण अपेक्षित के रूप में आईई में "कोई समर्थन नहीं" देता है।

+0

@adeneo - पवित्र बकवास, विभिन्न ब्राउज़रों में इसका परीक्षण करने और सीएसएस संपत्ति आदि की जांच करने के बारे में पता लगाने के लिए आपको मिली सारी प्रतिक्रियाओं को देखें। यह केवल छत के माध्यम से है ????? – adeneo

+0

महान प्रतिक्रिया के लिए धन्यवाद;) –

+0

@AbrahamP - ऐसा नहीं लगता था कि कोई भी यहाँ था! काम किया ??? – adeneo