jQuery: वास्तविक div चौड़ाई

Question

मैं दो <div>, एक अन्य द्वारा इस तरह परिभाषित में नेस्टेड है:

<div class="wrapper"> 
    <div class="content"> 
     [..] Content [..] 
    </div> 
</div> 

सीएसएस:

#div.wrapper 
{    
    width: 660px; 
    overflow: hidden; 
    float: left; 
} 
#div.content 
{ 
    white-space: nowrap; 
} 

प्रभाव मैं क्या चाहते हो, तो सामग्री को निर्धारित आंतरिक रूप से भीतर के भीतर क्षैतिज रूप से छुपा हुआ है, (मैं फिर इसे jQuery के साथ स्क्रॉल करता हूं)।

जब से मैं .content की सामग्री पता नहीं है (और न ही यह उम्मीद के मुताबिक है), मैं असली यह की चौड़ाई (सामग्री द्वारा परिभाषित) पता करने की जरूरत है, लेकिन दोनों .width() और .innerWidth() मुझे एक ही परिणाम दे कि 660 है जब पहली बार बुलाया जाता है (जैसे कंटेनर div) और 660 + एक्स जब मैं नकारात्मक मार्जिन-बाएं सेट करके स्क्रॉल करने के बाद इसे कॉल करता हूं (एक्स मार्जिन के साथ बाएं शिफ्ट सेट होता है)।

तत्व की असली, सामग्री निर्भर चौड़ाई कैसे प्राप्त करें? धन्यवाद

Answer 1

डिफॉल्ट डिफ़ॉल्ट रूप से अपने माता-पिता में पूर्ण चौड़ाई लेते हैं, इसलिए चौड़ाई हमेशा माता-पिता की चौड़ाई होगी।

आपको लगता है कि नहीं करना चाहती हैं, तो आप

#div.content 
{ 
    white-space: nowrap; 
    display: inline-block; 
} 

या संभवतः

#div.content 
{ 
    white-space: nowrap; 
    float: left; 
} 

का प्रयोग करेंगे के रूप में एक इनलाइन में #div.content तत्व देते हैं या तत्व क्रमशः है, जो केवल के रूप में लेता है फ्लोट करने के लिए जितनी जगह चाहिए उतनी जगह (यानी आवश्यक नहीं है कि माता-पिता द्वारा प्रदान की जाने वाली सभी जगहें)। तो यह काम करना चाहिए!

Answer 2

क्या आपने element.offsetWidth को आजमाया है?

Answer 3

मुझे यकीन नहीं था कि आपने #div.* का उपयोग क्यों किया क्योंकि इसका मतलब होगा कि आपके पास आईडी div आईडी वाला तत्व है। यदि आप किसी निश्चित वर्ग के साथ div निर्दिष्ट करना चाहते हैं, तो div.class-name का उपयोग करें। चूंकि एक div दूसरे बच्चे के अंदर एक बच्चे के रूप में रहता है, इसलिए यह अपने माता-पिता की चौड़ाई लेता है। फ्लोट को बाईं ओर सेट करने से यह इस सीमा के बाहर विस्तार करने की अनुमति देता है।

div.wrapper { 
    width: 660px; 
    overflow: hidden; 
    float: left; 
} 
div.content { 
    white-space: nowrap; 
    float: left; 
} 

स्क्रॉल उदाहरण: http://jsfiddle.net/9E8G7/6/

यहां एक त्वरित jQuery उदाहरण मैंने लिखा है, सुधार किया जा सकता मुझे यकीन है। जब तक यह सामग्री के अंत तक नहीं पहुंच जाता तब तक यह स्क्रॉल करता है।

$(document).ready(function(){ 
    var content = $('.content'); 
    var margin = 0; 
    var scrollFunc = function() { 
     margin--; 
     content.css('margin-left', margin); 
     var diff = content.width() - $('.wrapper').width(); 
     if (margin > -diff) { 
      var scroll = setTimeout(scrollFunc, 10); 
     } 
    }; 
    scrollFunc(); 
}); 

Answer 4

आप की कोशिश की: jQuery.outerWidth(), मेरा मतलब है $(yourelement).outerWidth()?