इसे व्यक्त

मैं एक डबल टिकी दो knobs, न्यूनतम और अधिकतम के साथ स्लाइडर स्लाइडर MooTools का उपयोग कर के लिए देख रहा था. हालांकि, मैं के MooTools मंच में कुछ अच्छी तरह से किया डबल टिकी स्लाइडर मिला, केवल समस्या यह थी कि इन सभी स्लाइडर्स सहारे चयनित श्रेणी मार्कर है. अंत में! मैं अपने खुद के बनाने का फैसला किया. अच्छी तरह से! मैं मूल कोड का उपयोग करें और इसे संशोधित करने के लिए एक स्लाइडर पृष्ठभूमि संकेत दिया कि सीमा नेत्रहीन मेरे उदाहरण में नीचे के रूप में चयनित किया. ब्लू क्षेत्रों चुना मूल्य की सीमा को इंगित करता है.

संस्करण 2.2 डेमो देखें | डाउनलोड MooTools डबल स्लाइडर संस्करण 2.2 टिकी (11,893 बार डाउनलोड)

तुम बहुत आसानी से देखो बदल सकते हैं और के रूप में आवश्यक slider.css संशोधित द्वारा श्रेणी (ऊपर के उदाहरण में नीले रंग में) सूचक, स्लाइडर घुंडी, स्लाइडर ट्रैक का लग रहा है.

क्या मुझे एक टिप्पणी छोड़ अगर आप इसे उपयोगी पाते हैं.

इससे पहले कि हम करने के लिए सीएसएस के साथ सौदा करने के लिए हमारे पृष्ठ लेआउट बनाने के लिए, किसी तालिका कक्ष के अंदर कुछ सामग्री aligning के बस बच्चों का खेल लग रहा था. बस "संरेखित करें या अपनी पसंद के संरेखण, केक का टुकड़ा है करने के लिए तालिका के" valign "के संपत्ति सेट!
सीएसएस लेआउट के साथ, यद्यपि हम तत्वों के लिए संपत्ति खड़ी संरेखित ", यह" संरेखित करें "या" valign "के गुण के रूप में सरल रूप में हो नहीं लगता है. अधिक specifiic "ऊर्ध्वाधर पंक्ति में" लगता है, अपनी समस्याओं का कोई हल नहीं खासकर अगर पार ब्राउज़र सीएसएस का एक टुकड़ा लिख रहे हैं.

HTML टेबल्स के उपयोग के बिना, वस्तु पर केंद्रित की समस्या, यह एक छवि या एक से युक्त विभाजन के भीतर कुछ पाठ है, शायद हर यूआई / कुछ बिंदु पर सीएसएस डेवलपर्स दुःस्वप्न किया गया हो. यह समस्या आगे aligning, अगर केन्द्रित किया वस्तु प्रकृति में गतिशील है, यानी जब इसकी ऊंचाई चर रहा है की अपनी चिंताओं extrapolates (अज्ञात ऊंचाई).

हालांकि वहाँ कोई ज्ञात सीधे आगे समाधान है कि ब्राउज़र के साथ हम सौदा है की सीमा के पार काम है, समाधान है कि मैं करता पर आने की कोशिश की है कि मैं इसे में करने की कोशिश की है कुछ ब्राउज़रों में काम करने लगते हैं (IE6, IE 7 , एफएफ).

हल:
मोज़िला, ओपेरा और सफारी जैसे ब्राउज़रों में अजीब "ऊर्ध्वाधर पंक्ति में" संपत्ति अपने होश में लाया जा सकता है बस, "टेबल सेल (प्रदर्शन: टेबल सेल) युक्त विभाजन के" प्रदर्शन "संपत्ति की स्थापना द्वारा व्यवहार .

समस्या अभी भी ब्राउज़र आईई परिवार के साथ रहता है, जो अभी तक टेबल सेल संपत्ति और अज्ञानी के साथ क्या समझ के रूप में वे कर रहे हैं, वे तो बस इसे अनदेखा नहीं लगता है. नीचे, यह देखते हुए हालांकि सरल, विज्ञापन करना बातें होती हैं HTML करने के लिए कुछ अधिक डोम तत्वों समाधान.

सीएसएस और HTML इस तरह दिखता है
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

एचटीएमएल: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> देखा गया में करें <br/> हैं: 3456 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

डेमो यहाँ देखने के लिए | डाउनलोड स्रोत फ़ाइलें (453 बार डाउनलोड)

शीर्ष सीएसएस संरेखित करें
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

एचटीएमएल: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> देखा गया करें <br/>: 1234 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

नीचे सीएसएस संरेखित करें
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
एचटीएमएल: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> देखा गया करें <br/>: 1234 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

डेमो यहाँ देखने के लिए यहाँ डाउनलोड करें |

उम्र की तरह लगता है, जब से मैं इस संरेखण समस्या के लिए एक उचित समाधान खोजने की कोशिश कर रहा था. लेकिन अब इस समाधान के साथ, मैं थोड़ा शांति में लग रहा है.

एक है कि किसी दिन आशा के साथ

• ऊर्ध्वाधर संरेखण सीएसएस में संपत्ति झाड़ी के आसपास बहुत से हरा करने के लिए बिना, यह किसी तालिका कक्ष के अंदर की तरह काम करेंगे
• कम से कम, मार्जिन टॉप स्थापित ऑटो और मार्जिन नीचे: ऑटो, साथ मार्जिन छोड़ दिया और मार्जिन - सही सेट करने के लिए ऑटो के रूप में एक ही परिणाम के रूप में दे देंगे
• ब्राउज़र युद्धों कुछ दिन खत्म हो जाएगा.
• बस सभी के लिए एक ब्राउज़र होगा.

सीएसएस और ऊपर यहाँ समाधान के HTML understandability के लिए (453 बार करें) .., सीएसएस अनुकूलित किया गया है नहीं है

पुनश्च: और वैसे भी, उन कुछ तस्वीरें मैं क्लिक किया है के थंबनेल हैं ...

गैर आईई ब्राउज़र्स के लिए सीएसएस: सीएसएस डेवलपर्स है कि, सीएसएस बाल चयनकर्ताओं, नीचे दिए गए उदाहरण की तरह IE में काम नहीं लगता कोई खबर.

जैसे div> अवधि {कुछ सीएसएस}, इसका मतलब है कि "जब एक अवधि तत्व एक विभाजन तत्व के एक बच्चे (और पोता या नहीं परपोते आदि) है.

लेकिन हम अपने लाभ के लिए इस कांग्रेस का इस्तेमाल किया. ऐतिहासिक, बच्चे चयनकर्ता आईई से सीएसएस commands को छिपाने के लिए इस्तेमाल किया गया है. बस html>body रखकर किसी भी सीएसएस आदेश IE के सामने की अनदेखी करेंगे:

html>body .foo { CSS commands go here ;}

इसका कारण यह है कि काम करता है <body> हमेशा का एक बच्चा है <html> - यह निश्चित रूप से एक या प्रपौत्र पोता कभी नहीं हो सकता है <html> .

अब है कि IE 7 बच्चे चयनकर्ता को समझता है, तो आप सीधे में अधिक से अधिक चिह्न के बाद एक खाली टिप्पणी टैग सम्मिलित है IE 7 तो समझ में नहीं है और इस चयनकर्ता (जो पता नहीं क्यों?) इसलिए पूरी तरह से इस सीएसएस आदेश की अनदेखी करेंगे.

html> /**/ body .foo { CSS commands go here ;}

यदि पहले से ही इन से पहले नहीं देखा है, निम्नलिखित के माध्यम से एक पढ़ने के रूप में अच्छी तरह से है

• आपके ies Duex केवल भाग के लिए: सशर्त टिप्पणियाँ
• सीएसएस हैक: जावास्क्रिप्ट, सीएसएस, केवल फ़ायरफ़ॉक्स के लिए HTML
• आपके केवल ies के लिए

हमेशा की तरह, IE और यह एक आईई Quirks के शीर्ष 10 में स्थान के साथ कई कुछ अजीब समस्याओं में से एक.

समस्या का बयान (यह मेरी समस्या थी, शायद आप समान misbehaviors है):
मैं कई DIV पृष्ठ वर्ग sectionhead ", के साथ जो कुछ भी नहीं है, लेकिन पृष्ठ पर एक वर्ग के शीर्षक में है. तो मैं कुछ शैली इस तरह देख रहा है

Sectionhead {font-size: 18px; पृष्ठभूमि # cfcfcf:; गद्दी: 5px;}.

div कुछ काला पाठ के साथ एक हल्के भूरे रंग की पट्टी है. IE में क्या होता है इन अनुभाग हेडर के कुछ ठीक से प्रदर्शित कर रहे हैं, लेकिन कुछ अदृश्य रहे हैं, जब तक आप पृष्ठ स्क्रॉल या पृष्ठ आदि पर क्लिक करें कुछ कुछ समय वे गायब हो जाते हैं जब आप ऑल्ट कुंजी को क्लिक करें जब आप पृष्ठ नीचे या स्क्रॉल पट्टी के साथ स्क्रॉल. वे कभी कभी फिर से बाहर निकलना जब आप (F5) पृष्ठ पुनः लोड करने लगते हैं. कम एक पूरी तरह से सरल DIV मैं कुछ सरल शैली के साथ बुरा बर्ताव करती है.
क्या इस तरह के एक अनियमित व्यवहार का कारण बन सकता है? अच्छी तरह से! सच कहूँ तो, पता नहीं!

संभव समाधान:
फिर मुझे नहीं पूछ रहे हो, क्यों, लेकिन कई मामलों में इस समस्या जब आप स्थिति को जोड़ने के लिए गायब हो जाता है: तत्वों गलत बर्ताव शैली के सापेक्ष इस तरह,

Sectionhead {font-size: 18px; पृष्ठभूमि # cfcfcf:; गद्दी: 5px; स्थिति: रिश्तेदार}.

अजीब है लेकिन क्या कहना है? भगवान ने मुझे IE से आशीर्वाद!

और अमेरिका के साथ साझा करते हैं, अगर तुम इसी तरह समस्याओं था.

ऐसा नहीं है कि वहाँ केवल कुछ है Lightbox है कि आप पा सकते हैं जब आप गूगल कर रहे हैं. lightboxes है कि मैंने पाया की अधिकांश के साथ मुद्दा था कि वे सभी एक या अन्य JQuery, प्रोटोटाइप, MooTools और पसंद की तरह भारी वजन जावास्क्रिप्ट frameworks का उपयोग करने के लिए लग रहा था. वे सब शांत और ठाठ देख रहे हैं. लेकिन यदि आपकी आवश्यकता है "लेकिन मैं अपनी साइट के लिए एक सरल और हल्के lightbox स्क्रिप्ट चाहते हैं", तो यहाँ यह है;

इस lightbox की कुछ अच्छी सुविधाएँ

1. बहुत हल्का
   . 4kb लिपियों जब पैक (केबी unpacked किया 8)
   ख. 2 सीएसएस का केबी
   ग. Lightbox कंटेनर के लिए HTML की कुछ पंक्तियाँ
2. सरल समझने के लिए और लागू
3. एक ही पृष्ठ पर एकाधिक Lightboxes हो सकता है.
4. वही lightbox कंटेनर को दिखाने के लिए, विभिन्न सामग्री (जो अलग - अलग पृष्ठ में छिपा डिवीजनों के रूप में शामिल है), लिंक / विकल्प है कि क्लिक किए जाने पर निर्भर करता है प्रयोग किया जाता है.
5. स्वतः ही केंद्र है, जैसे, विंडो ऊंचाई और चौड़ाई (स्क्रीन संकल्प), पृष्ठ स्क्रॉल राशि और lightbox की सामग्री की ऊंचाई सभी कारकों को ध्यान में ले
6. IE 7 एंड स्मूथरिंग में परीक्षण

डेमो देखें |
डाउनलोड Lightbox स्रोत ज़िप (1810 बार डाउनलोड)

jo.js, jo_pack.js [पैक संस्करण]: जावास्क्रिप्ट वस्तुओं का एक सरल सेट [जो], जो तत्व खिड़की, और दस्तावेज़ पोजीशनिंग स्क्रिप्ट शामिल हैं. आप JO.JS खुला अगर आप कुछ उन्नत Javascripting, सार कार्यों बनाने के साथ अपने हाथ गंदे हो सकते हैं, तत्व गुण और इस तरह के विस्तार. यदि आप Javascripting में भी ज्यादा नहीं है, यह अकेला छोड़ दो.

lightbox.js, lightbox_pack.js [पैक संस्करण: प्रकाश बॉक्स प्रबंधक लिपियों होते. यदि आप पेज डिजाइनर पृष्ठ पर lightbox को लागू करने के साथ भी जिम्मेदार हैं, तो आप LightBoxManager समझने की जरूरत है. LightBoxManager मूल रूप से सिर्फ दो कार्यों showLightBox और closeLightBox शामिल हैं.

lightbox.css: - यदि आप सीएसएस पता है, आप आसपास lightbox.css के साथ खेलने के लिए देखो lightbox.css पता लग रहा है अनुकूलित कर सकते हैं

index.html: दो अलग अलग सामग्री के साथ lightbox का नमूना कार्यान्वयन

lb_underlay_bkg.png: - यह प्रकाश / सिमी पारदर्शी छवि lightbox बुनियाद के लिए पृष्ठभूमि में प्रयोग किया जाता है [बुनियाद lighbox नीचे परत है, जो पृष्ठ पर किसी अन्य संस्था को क्लिक करने से उपयोगकर्ता को रोकता है, जबकि lightbox खुला है]. आप इस उद्देश्य के लिए किसी भी छवि या यहाँ तक कि एक ठोस रंग का उपयोग करें, पृष्ठ डिजाइन और आवश्यकता के आधार पर कर सकते हैं.

icon_lb_close.gif: प्रकाश बॉक्स के ऊपरी दाएँ भाग पर करीब lightbox संभाल के लिए छवि. डिजाइन के अनुसार किसी भी छवि का उपयोग कर सकते हैं

डेमो देखें |
डाउनलोड Lightbox स्रोत ज़िप (1810 बार डाउनलोड)

कृपया हमें अपनी टिप्पणियाँ और प्रतिक्रिया ...