वर्टिकल स्क्रॉल बार स्वचालित रूप से क्यों चलता है?

मुझे समझ में नहीं आता है कि उदाहरण के लिए "रेखा 9" क्लिक करते समय लंबवत स्क्रॉल बार स्वचालित रूप से सबसे ऊपर की स्थिति में क्यों जाता है। आगे के क्लिक स्क्रॉल बार को स्थानांतरित नहीं करते हैं। क्या कोई यह बता सकता है कि क्यों, और इसे कैसे ठीक किया जाए? मैं फ़ायरफ़ॉक्स 3.6.3 के साथ काम करता हूं।वर्टिकल स्क्रॉल बार स्वचालित रूप से क्यों चलता है?

HTML:

<html> 
    <head> 
     <link rel="stylesheet" href="test.css" type="text/css" /> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script language="JavaScript" src="test.js"></script> 
    </head> 

    <body> 
     <div> 
      <table> 
       <tr row='0'><td class='column1'>Line 0</td></tr> 
       <tr row='1'><td class='column1'>Line 1</td></tr> 
       <tr row='2'><td class='column1'>Line 2</td></tr> 
       <tr row='3'><td class='column1'>Line 3</td></tr> 
       <tr row='4'><td class='column1'>Line 4</td></tr> 
       <tr row='5'><td class='column1'>Line 5</td></tr> 
       <tr row='6'><td class='column1'>Line 6</td></tr> 
       <tr row='7'><td class='column1'>Line 7</td></tr> 
       <tr row='8'><td class='column1'>Line 8</td></tr> 
       <tr row='9'><td class='column1'>Line 9</td></tr> 
      </table> 
     </div> 
    </body> 
</html>

जे एस:

$(document).ready(function() { 
    $(".column1").each(function(index) { 
     $(this).after("<td class='column2'>Details " + index + "</td>"); 
     $(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") }, 
         function() { $("[row='" + index + "'] .column2").fadeOut("fast") }); 
    }); 
});

सीएसएस:

div { 
    overflow: auto; 
    height: 100px; 
    width: 300px; 
    border: 1px solid blue; 
} 

.column1 { 
    cursor: pointer; 
    width: 100px; 
    background-color: green; 
    color: white; 
} 

.column2 { 
    display: none; 
    width: 200px; 
    background-color: blue; 
    color: white; 
}

स्रोत

2010-05-16 Misha Moroshko

दिलचस्प। ऐसा लगता है कि ओपेरा 10.53 के साथ एक ही समस्या है। आईई 8 और क्रोम हालांकि समस्याओं के बिना काम करते हैं। –

कुछ परीक्षण और त्रुटि परीक्षण करने के बाद, ऐसा लगता है कि यह उस क्षण से संबंधित है जब ब्राउजर पुन: गणना करता है और जब आप कक्षों में से किसी एक को फीका करते हैं तो तालिका को फिर से खींचा जाता है। आपके कोड में कुछ भी गलत नहीं है, और jQuery सेल की 'डिस्प्ले' संपत्ति को सही ढंग से टॉगल कर रहा है - ऐसा लगता है कि यह एफएफ में मामूली बग है।

शायद यह चारों ओर सबसे आसान तरीका तालिका सेल टॉगल खुद को बचने के लिए, और बदले कॉलम 2 कक्ष की सामग्री को चालू है, तो तरह है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <link rel="stylesheet" href="test.css" type="text/css" /> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script language="JavaScript"> 
     $(document).ready(function() { 
      $("td.column1").each(function(index) { 
       $(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>'); 
       $(this).toggle(
        function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")}, 
        function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")} 
       ) 
      }); 
     }); 
     </script> 
     <style type="text/css" media="screen"> 
      div { 
       overflow: auto; 
       height: 100px; 
       width: 300px; 
       border: 1px solid blue; 
      } 

      .column1 { 
       cursor: pointer; 
      } 

      .column2 .details{ 
       display:none; 
      } 

     </style> 
    </head> 

    <body> 
     <div> 
      <table> 
       <tr row='0'><td class='column1'>Line 0</td></tr> 
       <tr row='1'><td class='column1'>Line 1</td></tr> 
       <tr row='2'><td class='column1'>Line 2</td></tr> 
       <tr row='3'><td class='column1'>Line 3</td></tr> 
       <tr row='4'><td class='column1'>Line 4</td></tr> 
       <tr row='5'><td class='column1'>Line 5</td></tr> 
       <tr row='6'><td class='column1'>Line 6</td></tr> 
       <tr row='7'><td class='column1'>Line 7</td></tr> 
       <tr row='8'><td class='column1'>Line 8</td></tr> 
       <tr row='9'><td class='column1'>Line 9</td></tr> 
      </table> 
     </div> 
    </body> 
</html>

तो, स्क्रिप्ट कॉलम 2 सेल कहते हैं, और कहा कि रहता है पूरे समय दिखाई देता है - इसके बजाय हम इसके अंदर <span class="details"> दिखाते/छुपाते हैं। मैंने इस संस्करण का परीक्षण एफएफ 3.6.3 में किया है और यह व्यवहार करता है जैसा इसे करना चाहिए!

ओह - और मैंने बेहतर प्रदर्शन के लिए अपने jQuery चयनकर्ताओं को साफ़ किया। यदि आप क्यों अधिक जानकारी चाहते हैं, तो मुझे बताएं!

स्रोत

2010-05-20 15:50:21 Beejamin

अच्छा कामकाज, लेकिन यह पूरी तरह से मेरी समस्या का समाधान नहीं करता है। मेरे मामले में '.column2' में एक निश्चित' चौड़ाई' और 'पृष्ठभूमि-रंग' है। यदि आप इन विशेषताओं को सीएसएस कोड में जोड़ते हैं तो आपको 'पृष्ठभूमि-रंग' दिखाई देगा, भले ही विवरण अवधि प्रदर्शित न हो। मैं तदनुसार सवाल संपादित करूंगा। साथ ही, कृपया मुझे बताएं कि आपके jQuery चयनकर्ताओं के पास मेरा बेहतर प्रदर्शन क्यों है। –

यह ओपेरा में भी दिखाई देता है। –

ठीक है - मुझे लगता है कि, समस्या के स्रोत को हटाने के लिए, कॉलम 2 को हर समय दिखाना होगा।मेरा विश्वास यह है कि यह सेल का दिखा रहा है और छुपा रहा है जो प्रत्यक्ष कारण है - यहां क्यों है: अधिकांश तत्वों के विपरीत, टीडी के आसपास के तत्वों के साथ अंतर-निर्भरताएं होती हैं। एक सेल का आकार एक ही पंक्ति में अन्य कोशिकाओं की चौड़ाई, और अन्य एक ही कॉलम में निर्भर हो सकता है। यदि आप एक नया सेल जोड़ते हैं (.fadeIn() के माध्यम से, ब्राउज़र को तालिका में कुछ या सभी अन्य कक्षों के आयामों को फिर से गणना करने की आवश्यकता होती है। (जारी) – Beejamin

मैं नकल की और अपने कोड की कोशिश की, फ़ायरफ़ॉक्स 3.6.3 और क्रोम 5.0.375.29 पर। और कुछ भी नहीं देखा जो आपने वर्णित किया है, इसलिए मुझे नुकसान हुआ है।

स्कॉलबार केवल सामान्य रूप से स्क्रॉल करते समय स्थानांतरित होता है, पाठ पर क्लिक करते समय नहीं।

स्रोत

2010-05-16 15:51:15 Mattijle

बहुत अजीब ... क्या आप वाकई "लाइन 9" पर क्लिक करते हैं? समस्या देखने के लिए यहां दिए गए कदम हैं: (1) (पुन) पृष्ठ लोड करें (2) "लाइन 9" (3) "लाइन 9" पर क्लिक करने के लिए स्क्रॉल बार को ले जाएं। इसके बाद स्क्रॉल बार स्वचालित रूप से स्थानांतरित हो जाता है जैसे कि मैं केवल "रेखा 0", "रेखा 1", "रेखा 2" और "रेखा 3" देखता हूं। क्या मैं अकेला हूं जो इस समस्या का सामना कर रहा है? –

@ मिशा आह, अब मैंने आपके निर्देशों का पालन किया है, मैं इसे देखता हूं। हालांकि इसे ठीक करने के लिए, मैंने .fadeIn() और .fadeOut को .css ("display", "block") और .css ("display", "none") और स्क्रॉलिंग को इरादे के रूप में काम करना शुरू कर दिया । – Mattijle

मैटिज़ल: तालिका डिस्प्ले को 'डिस्प्ले: ब्लॉक' पर सेट करना समस्या को साइड-स्टेप करेगा, लेकिन अन्य मुद्दों का कारण बनता है, क्योंकि कोशिकाएं अब तालिका संरचना का प्रभावी ढंग से हिस्सा नहीं हैं। मुझे लगता है कि यह सरल उदाहरण इन समस्याओं को प्रदर्शित नहीं करता है, लेकिन वास्तविक जीवन परिदृश्य में यह एक अच्छा विचार नहीं है। जब आप jQuery के साथ एक टेबल सेल fadeIn() या fadeOut() फ़ेसबुक करते हैं, तो jQuery 'none' और 'table-cell' के बीच प्रदर्शन को टॉगल करता है जो सही है। – Beejamin

वर्टिकल स्क्रॉल बार स्वचालित रूप से क्यों चलता है?

उत्तर

संबंधित मुद्दे