वेगा नीचे दिए गए छिपे हुए div

Question

की चौड़ाई की गणना नहीं कर सकता है। HERE IS THE WORKING FIDDLE. मैं भविष्य में आने वाले आगंतुकों के लिए यह पोस्ट देखने के लिए पूरी पोस्ट रख रहा हूं कि यह समस्या कैसे हल हो गई थी।

---

मैं एक बटन बनाने की कोशिश कर रहा हूं, जब ढक गया, नीचे एक दराज पर कुछ जानकारी प्रकट करता है।

मैं इसे किसी पृष्ठ में कार्यान्वित करना आसान बनाना चाहता था, इसलिए मैंने इसे एक jQuery विजेट में बदल दिया। मैं इसे बटन और/या दराज पर सामग्री के अनुसार समायोजित करना चाहता हूं, लेकिन यह अभी नहीं कर रहा है। उपयोगकर्ता को एकल HTML div टैग को छिपे हुए डेटा के साथ रखने में सक्षम होना चाहिए, और यह बस काम करेगा।

आदर्श रूप से बटन/दराज चौड़ाई दोनों के बीच अधिकतम में समायोजित होगी ताकि बंदरगाह बंद होने पर दराज पूरी तरह छुपा हुआ हो। मैं नहीं चाहता कि मेरे उपयोगकर्ताओं को एक निश्चित चौड़ाई निर्धारित करने के साथ गड़बड़ करनी पड़े।

मुझे मदद चाहिए!

यहाँ क्या यह की तरह लग रही होगी:

प्रासंगिक एचटीएमएल (Fiddle में पूर्ण HTML):

<div class="download" data-value="It's awesome!">Visit Website</div> 

प्रासंगिक सीएसएस (पूर्ण सीएसएस Fiddle में):

.button { 
    position:absolute; 
    padding:10px; 
} 

.drawer { 
    box-sizing:border-box; 
    z-index:-1; 
    position:absolute; 
    top:3px; 
    left:3px; 
    padding:6px 10px; 
    text-align:center; 
    -webkit-transition:0.3s left ease-in; 

} 

(Fiddle में पूर्ण jQuery) प्रासंगिक jQuery:

$(function() { 
    $(".button").each(function() { 
     $(this).append("<div class='drawer'>" + $(this).data('value') + "<div class='handle'>||</div></div>"); 
     $(".drawer", this).css("width", $(".button").width()); 
    }); 

    $(".button").mouseenter(function() { 
     $(".drawer", this).css("left", $(".button").outerWidth()); 
    }).mouseleave(function() { 
     $(".drawer", this).css("left", "3px"); 
    }); 
}); 

Answer 1

आप this बटन के आधार पर चौड़ाई की गणना करने के मिला है। नीचे देखें,

$(function() { 
    $(".button").each(function() { 
     $(this).append("<div class='drawer'>" + $(this).data('value') + "<div class='handle'>||</div></div>"); 
     $(".drawer", this).width($(this).width()); //updated with this object 
    }); 

    $(".button").mouseenter(function() { 
     $(".drawer", this).css("left", $(this).outerWidth()); //updated with this object 
    }).mouseleave(function() { 
     $(".drawer", this).css("left", "3px"); 
    }); 
}); 

डेमो:http://jsfiddle.net/dELNa/11/

Answer 2

$(".download").mouseenter(function() { 
    totalWidth = 0; 
    totalWidth += $(this).outerWidth(true); 
    $(".drawer", this).css("left", totalWidth); 
}).mouseleave(function() { 
    $(".drawer", this).css("left", "3px"); 
}); 

और उस के साथ साथ वस्तु की अंतिम आकार के अंदर स्वादिष्ट सामग्री के मूल्य मिल जाएगा। अच्छे और साफ प्रश्न (और प्रस्तुति) के लिए