आप jquery और पता विंडो के साथ सीएसएस ट्रांसफॉर्म का उपयोग कैसे करते हैं असंगतता को अधिकतम करते हैं?

Question

प्रयास और वर्णित समस्या का चित्रों का प्रलेखन:

मैं Bootstrap भीतर जवाब देते हुए एक तालिका का आकार बदलने के लिए कोशिश कर रहा हूँ। Bootstrap बस ठीक काम कर रहा है और यहां तक ​​कि मेरी मेज अधिकतर ठीक काम कर रही है। मेरी समस्या यह है कि जब दृश्य पोर्ट का आकार बदलता है (चाहे वह एक डेस्कटॉप विंडो हो, या सेल फोन स्क्रीन के माध्यम से पृष्ठ का प्रतिपादन) तालिका किसी भी प्रकार की समझदार तरीके से आकार नहीं लेगी। यह आकार बदलता है लेकिन इसकी मूल स्थिति के सापेक्ष नहीं है। यह जगह में घूमता है और पृष्ठ पर अन्य तत्वों के साथ अपना मार्जिन प्लेसमेंट खो देता है।

जैसा कि आप देख सकते हैं कि मैंने टिप्पणी अनुभागों द्वारा प्रतिनिधित्व की गई कई अलग-अलग विधियों का प्रयास किया है। मैंने कम से कम 40 ब्राउज़र टैब को इस पर एक व्यवहार्य समाधान खोजने के लिए डाला है। मुझे कुछ याद आ रही है और सही दिशा में एक अच्छी धक्का की सराहना की जाएगी।

मुझे उस मार्जिन को कम करने के लिए क्या करने की ज़रूरत है ताकि तालिका ऊपर रहे और इसके ऊपर की सामग्री के विरुद्ध छोड़ी जा सके और दृश्य बंदरगाह दीवार छोड़ी जाए?

परिवर्तन और अधिकतम दोनों मुद्दों के समाधान के लिए नीचे मेरा उत्तर देखें।

मैं उपयोग कर रहा हूँ अधूरा jQuery कोड:

$(window).resize(function() 
{ 
    var ww = $(window).width(); 
    var hh = $(window).height(); 
    var tt = $(".gametable").width(); 

    var scle = 0.0;//parseFloat(tt)/parseFloat(ww); 

    if (ww <= 688); 
    { 
     scle = parseFloat(ww)/parseFloat(tt); 
     //$(".gametable").css("transform", "scale(" + scle.toString().substr(0, 4) + ")"); 
     $('.gametable').css({ 
      '-webkit-transform' : 'scale(' + scle.toString().substr(0, 4) + ')', 
      '-moz-transform' : 'scale(' + scle.toString().substr(0, 4) + ')', 
      '-ms-transform'  : 'scale(' + scle.toString().substr(0, 4) + ')', 
      '-o-transform'  : 'scale(' + scle.toString().substr(0, 4) + ')', 
      'transform'   : 'scale(' + scle.toString().substr(0, 4) + ')' 
     }); 
    } 

    $(".log").html($(".log").html() + scle.toString().substr(0, 4) + "<BR>"); 

// $(".gametable").width($(".gamerow").css("width")); 
// $(".gametable").height($(".gamerow").css("width")); 

// $(".gametable").css("transform", "scale(0.75)"); 

    $(".gametable").css("position", "relative"); 
    $(".gametable").css("top", "0"); 
    $(".gametable").css("left", "0"); 
    $(".gametable").css("padding", "0"); 
// 
// $(".gamediv").css("position", "relative"); 
// $(".gamediv").css("top", "0px"); 
// $(".gamediv").css("left", "0px"); 
// $(".gamediv").css("padding", "0px"); 

}); 

कहा व्यवहार का एक सटीक चित्रण नीचे चित्र में पाया जा सकता:

तालिका बाईं तरफ है स्क्रीन की जब खिड़की और बोर्ड दोनों एक ही चौड़ाई हैं: 688 पीएक्स।

लेकिन ऊपर दिए गए कोड का उपयोग करते समय, तालिका घट जाती है लेकिन यह स्थिति को बनाए रखती नहीं है। यह मेरा सवाल है। मैं इसे मार्जिन कैसे नहीं बना सकता?

दोहराएं। जब मैं ऊपर ट्रांसफॉर्म विधि का उपयोग कर तालिका को छोटा करता हूं, तो यह एक अवांछनीय मार्जिन शीर्ष और तालिका के बाईं ओर बनाता है। मुझे उस मार्जिन को कम करने के लिए क्या करने की ज़रूरत है ताकि तालिका ऊपर रहे और इसके ऊपर की सामग्री के विरुद्ध छोड़ी जा सके और दृश्य बंदरगाह दीवार छोड़ी जा सके?

Answer 1

vals की सहायता के साथ, मैं एक ऐसे समाधान के साथ आया जो मेरी तालिका को पूरी तरह से गतिशील रूप से बदलता है। कोई और मेरे कोड को अनुकूलित कर सकता है कि उन्हें अपनी विशेष समस्या पर आवेदन करने की आवश्यकता है। मेरा कोड डेस्कटॉप वातावरण में दृश्य पोर्ट के कोने पर ऑपरेटिंग सिस्टम के "अधिकतम" बटन के मुद्दे को भी संभालता है। कोड का यह बिट सभी बड़े 5 ब्राउज़रों और मेरे द्वारा उपयोग किए जाने वाले मोबाइल ब्राउज़र में मेरी तालिका का आकार बदलने के साथ सभी मुद्दों को हल करता है। मुझे उम्मीद है कि यह दस लाख लोगों की मदद करेगा। :)

जैसा कि आप नीचे देख सकते हैं, $(window).resize(function() ईवेंट $(document).ready(function() ईवेंट के अंदर लपेटा गया है। यह दो अलग लेकिन समान चीजें करता है:

• यह $(window).resize(function() को अत्यधिक संख्या में कॉल करने से रोकता है।
• यह $(window).resize(function() को बहुत जल्दी बुलाए जाने से रोकता है क्योंकि विभिन्न चौड़ाई और ऊंचाई कॉल में मूल्य संभावित रूप से खराब और गलत होने के कारण होते हैं।

यह सभी सामान्य गतिशील सामग्री आकार बदलने की प्रक्रियाओं के लिए काम करना चाहिए।

कृपया transform-origin का vals 'विशिष्ट योगदान दें। यह सामग्री को trasformation से पहले मूल रूप से पैक करने के तरीके को पैक करता है।

$(document).ready(function() 
{ 
    $(window).resize(function() 
    { 
     if ($(window).width() <= 700 || $(window).height() <= 800) 
     { 
      var sclw = ((parseFloat($(window).width()) - 30)/parseFloat($(".gametable").width())).toString().substr(0, 4); 
      var sclh = ((parseFloat($(window).height()) - 120)/parseFloat($(".gametable").width())).toString().substr(0, 4); 
      var sc = parseFloat(sclw) < parseFloat(sclh) ? sclw : sclh; 

      $('.gametable').css({ 
       '-webkit-transform' : 'scale(' + sc + ')', 
       '-moz-transform' : 'scale(' + sc + ')', 
       '-ms-transform'  : 'scale(' + sc + ')', 
       '-o-transform'  : 'scale(' + sc + ')', 
       'transform'   : 'scale(' + sc + ')', 
       'transform-origin' : 'top left' 
      }); 
      $('.mininfo').width(parseFloat($(window).width()) - 30); 
     } 
     else 
     { 
      $('.gametable').css({ 
       '-webkit-transform' : 'scale(1)', 
       '-moz-transform' : 'scale(1)', 
       '-ms-transform'  : 'scale(1)', 
       '-o-transform'  : 'scale(1)', 
       'transform'   : 'scale(1)', 
       'transform-origin' : 'top left' 
      }); 
      $('.mininfo').width($(".gametable").width()); 
     } 
    }).resize(); 
}); 

Answer 2

क्या आपने इसके लिए जावास्क्रिप्ट के बजाय सीएसएस में मीडिया क्वेरी का उपयोग करने पर विचार किया है? मैं सामान्य रूप से इसे पसंद करता हूं क्योंकि मेरा अपना कोड कम है जो गलत हो सकता है ... केवल शैली और व्यूपोर्ट विनिर्देश।

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries