वेबकिट JQuery मोबाइल ब्लॉक इनलाइन संक्रमण के लिए

Question

मैं मोबाइल ब्राउज़र पर काम करने के लिए एक अभिविन्यास परिवर्तन प्राप्त करने के लिए इच्छुक हूं। जब अभिविन्यास बदलता है तो div "wrapStat" को इनलाइन और ब्लॉक डिस्प्ले के बीच बदलना चाहिए।

पाठ का यह पूरा ब्लॉक प्रत्येक एक्स सेकेंड को अजाक्स कॉल द्वारा प्रतिस्थापित किया जाता है ताकि रैप पर एक शैली डालीस्टैट क्लास स्वयं काम नहीं करेगी। मैं अभिविन्यास के आधार पर पोर्ट्रेट कस्टमस्टैट्स और लैंडस्केप कस्टमस्टैट्स के बीच पैरेंट # कस्टमस्टैट क्लास बदल रहा हूं।

यह फ़ायरफ़ॉक्स में काम करता है (ब्राउज़र का आकार बदलना अभिविन्यास ध्वज फ़्लिप करेगा) लेकिन AJAX कॉल आग तक किसी भी वेबकिट ब्राउज़र में काम नहीं करता है।

क्या वेबकिट और गतिशील रूप से इनलाइन और ब्लॉक शैलियों को बदलने में कोई समस्या है?

सीएसएस:

.portraitCustomStats .StatsRow .wrapStat { 
    display: block !important; 
} 
.landscapeCustomStats .StatsRow .wrapStat { 
    display: inline !important; 
} 

जावास्क्रिप्ट:

$(window).bind('orientationchange', function (anOrientationEvent) { 
    if ($(window).width() > 600) return; 
    $("#CustomStats").attr("class", anOrientationEvent.orientation.toLowerCase() + "CustomStats").trigger("updatelayout"); 
}); 

HTML:

<span id="CustomStats" class="portraitCustomStats"> 
    <tr class="StatsRow"> 
     <td class="description">Unique Visitors</td> 
     <td class="stat"> 
      <span class="UniqueVisitors"> 
      <strong> 
      <div class="wrapStat"> 
       <span class="pastStat">(1,318)</span> 
       <img src="../../Images/up_arr.gif" alt="increase"> 
       <span class="increasedStat">85.43%</span> 
      </div> 
      </span> 
     </td> 
    </tr> 
</span> 

यहाँ कोड की jsFiddle वास्तव में काम नहीं कर रहा ...

http://jsfiddle.net/Hupperware/43eK8/5/

मोबाइल दृश्य: http://jsfiddle.net/m/rat/

यह (पाठ "परिदृश्य" में लाल और "चित्र" में नीला हो जाता है सिर्फ इसलिए आप जानते हैं यह काम कर रहा) फ़ायरफ़ॉक्स में काम करता है। एफएफ में यह इनलाइन दिखाएगा और के रूप में आप एक व्यापक दृश्य और एक संकीर्ण दृष्टिकोण के बीच जाना ब्लॉक ...

वेबकिट (Safari और Chrome) में ऐसा नहीं होगा ...

Answer 1

मेरा मानना ​​है कि मैं इस सवाल का जवाब मिल गया है ...

मूल:

<tr class="StatsRow"> 
    <td class="description">Total Sales</td> 
    <td class="stat"> 
      <span class="TotalSalesRow"> 
       <strong>$59,549.16</strong> 
       <div class="wrapStat"> 
        <span class="pastStat">($59,799.66)</span> 
        <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
        <span class="decreasedStat">0.42%</span> 
       </div> 
      </span> 
     </td> 
</tr> 

ऐसा लगता है कि एक अवधि एक div लपेट होने वेबकिट में अवांछनीय कार्रवाई का कारण बनता है जब आप पर लेआउट को बदलने की कोशिश युक्त div।

बदलें: (2 td नीचे div टैग)

<tr class="StatsRow"> 
    <td class="description">Total Sales</td> 
    <td class="stat"> 
      <div class="TotalSalesRow"> 
       <strong>$59,549.16</strong> 
       <div class="wrapStat"> 
        <span class="pastStat">($59,799.66)</span> 
        <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
        <span class="decreasedStat">0.42%</span> 
       </div> 
      </div> 
     </td> 
</tr> 

Answer 2

से !important निकालने का प्रयास करें दोनों अपने सीएसएस कक्षाएं

Answer 3

मैं ब्राउज़र में वेबकिट हैंडलिंग के बारे में नहीं कह सकता। मैं क्या कह सकता हूं कि अभिविन्यास का पता अलग-अलग उपकरणों और ब्राउज़रों में पाया जाता है। इससे सिरदर्द हो सकता है ... (example)।

पिछली बार मैंने अपने बालों को खींच लिया क्योंकि एंड्रॉइड ने हमेशा "गलत" अभिविन्यास (परिदृश्य में चित्र, चित्र में परिदृश्य) लौटाया, जब आईओएस ने इसे दूसरी तरफ बताया।

क्यों JQM recommendsसे आबद्ध होने के बजाय orientationchange का आकार बदलने जब चौड़ाई/ऊंचाई और orientationchange के साथ काम कर रहा है यही कारण है कि। आकार प्रत्येक अभिविन्यास के साथ एक साथ आग लग जाएगा, इसलिए आप घटना के ब्राउज़र कार्यान्वयन से स्वतंत्र हैं।

तो मेरा पहला सुझाव होगा: क्या आप इसके बजाय आकार बदलने के लिए बाध्य कर सकते हैं?

आप orientationchange साथ रहना चाहते हैं, यहाँ एक स्क्रिप्ट मैं उपयोग कर रहा हूँ, जो ठीक काम करने के लिए लगता है:

// trigger 
$(window).on('orientationchange', function(event){ 
     your_function(event); 
     }); 

// function handling orientation 
function your_function(event) { 
    ... 
    if (event) { 
     // portrait 
     if (window.orientation == 0 || window.orientation == 180){ 
       // portrait stuff 
     } 
     // landscape 
      else if (window.orientation == 90 || window.orientation == -90) { 
       // landscape stuff 
       } 
     // any other event that's passed into here, you could feed RESIZE 
     } else if ($window.width() < THRESHOLD WIDTH) { 
       // portrait stuff 
       } else if ($window.width() > THRESHHOLD WIDTH) { 
          // landscape stuff 
          } 
       } 

अभी, मैं सिर्फ इस समारोह में orientationchange खिला रहा हूँ और यह लगता है ठीक काम करोयह नहीं, मैं भी आकार बदलने पर इस ट्रिगर और नहीं तो जैसे घटना पारित करने के लिए बदल सकता है चाहते हैं:

$(window).on('resize', function(event){ 
    your_function("I'm no event"); 
    }); 

2 हैंडलर में खत्म हो जाएगा जो। आपको थ्रेसहोल्ड चौड़ाई (600 पीएक्स?) की आवश्यकता होगी, हालांकि लेआउट को बदलना चाहिए।

उम्मीद है कि इससे मदद मिलती है।

Answer 4

मुझे क्या नहीं मिला if ($(window).width() > 600) return; आप उच्च रीज़ डिवाइस को लक्षित नहीं करना चाहते हैं?

मैं गलत हो सकता हूं लेकिन अगर यह पेज़ेज और सबसे रिक्त एंड्रॉइड और आईफोन (> एचवीजीए और आईफोन रेटिना) है तो यह घटना हंसलिंग फ़ंक्शन को समाप्त नहीं करता है?

Answer 5

मैंने कुछ परीक्षण किया और समस्या को पुन: उत्पन्न करने में सक्षम नहीं था। क्या आपने jsfiddle पर मोबाइल डिबगिंग सुविधा का परीक्षण करने का प्रयास किया है?

मैंने निम्नलिखित सरल उदाहरण को एक साथ रखा है।

HTML:

<body> 
    <div id="changeMe">Hello World</div> 
</body> 

सीएसएस:

.portrait { 
    display: block !important; 
} 
.landscape { 
    display: inline !important; 
} 
#changeMe { 
    color: blue; 
} 

जावास्क्रिप्ट: http://jsfiddle.net/gizmovation/9ALTU/

जब आप का उपयोग करें:

$(document).ready(function() { 

    $('body').on('orientationchange', function() { 
     console.log('updated orientation: ' + window.orientation); 

     if (window.orientation == 0) { 
      // portrait mode 
      $('#changeMe').removeClass('landscape').addClass('portrait').text('Portrait Mode'); 
     } else { 
      // landscape mode 
      $('#changeMe').removeClass('portrait').addClass('landscape').text('Landscape Mode'); 
     } 
    }); 

});​ 

यहाँ काम कर jsfiddle के लिए एक लिंक है मोबाइल डिबगिंग सुविधा (रन बटन के बगल में छोटा वाईफ़ाई दिखने वाला आइकन), आप अपने पीसी पर एक साथ डिबगिंग करते समय अपने आईफोन पर पेज खोल सकते हैं। जब मैंने ऐसा किया, तो मैं देख सकता था कि ब्लॉक और इनलाइन शैलियों #changeMe div पर ठीक से टॉगल कर रहे थे। इस पर ध्यान दिए बिना कि सामग्री AJAX के माध्यम से लोड की गई थी या नहीं।

आशा है कि इससे मदद मिलती है और आप अपनी समस्या को हल करने के लिए मोबाइल डीबगर का उपयोग करने में सक्षम हैं।

Answer 6

आपके एचटीएमएल जो आपने ऊपर चिपकाया है वह गड़बड़ है। आपके पास एक अनजान मजबूत टैग है। आपके पास शायद एक मजबूत टैग नहीं होना चाहिए, या यदि आप करते हैं, तो इसे बाहर के अंदर, div के अंदर रखें। आप एक अवधि में लपेटा हुआ tr है। यह बहुत वाक्य रचनात्मक रूप से गलत है, मैं आश्चर्यचकित नहीं हूं कि यह विश्वसनीय रूप से प्रस्तुत नहीं करता है। एक अवधि डिफ़ॉल्ट रूप से इनलाइन है, और फिर आप एक इनलाइन तत्व के अंदर एक tr डालते हैं। आप इसे प्रस्तुत करने की अपेक्षा कैसे करेंगे? यदि आप कर सकते हैं, तो tr और td को पूरी तरह से निकालने का प्रयास करें और इसके बजाय फ़्लोट किए गए divs का उपयोग करें। यदि आपको बिल्कुल एक टेबल का उपयोग करने की आवश्यकता है, तो तालिका को सही तरीके से बनाएं। मार्कअप को सरल बनाने का प्रयास करें। मार्कअप जितना जटिल होगा, त्रुटि के लिए और अधिक कमरा। यदि आपके पास एकाधिक मार्कअप त्रुटियां हैं, तो अलग-अलग ब्राउज़र खराब तरीके से विभिन्न तरीकों से संभाल सकते हैं। टीडी (ब्लॉक) के अंदर स्पैन (इनलाइन) के अंदर divs (डिफ़ॉल्ट रूप से इनलाइन) के अंदर divs (डिफ़ॉल्ट रूप से ब्लॉक) रखने का कोई कारण नहीं है। मुझे लगता है कि अगर आप अपने मार्कअप को सरल और साफ करते हैं तो समस्या दूर हो जाएगी। सौभाग्य।