ऐप्पल स्टोर शैली LEFT

Question

पर तय div मैं इस पर अपने बालों को खींच रहा हूँ। मेरे पास एक वेबपृष्ठ है जहां मैं बाईं ओर एक निश्चित स्थिति div (तोता & अनुवादक) रखना चाहता हूं, पृष्ठ को नीचे स्क्रॉल करते समय उसका पालन करें। http://www.cartoonizemypet.com/new/help/

मैं इस टट http://jqueryfordesigners.com/fixed-floating-elements/ का पालन करने में कामयाब रहा और जो मैंने सोचा वह एक सही प्रभाव था! तब मैंने इसे अपने फोन पर देखने की कोशिश की .... जैसे ही मैंने विस्फोटित div में ज़ूम किया, पाठ पर चले गए! :(आप ब्राउज़र विंडो को कम करके और दाईं ओर स्क्रॉल करके नियमित ब्राउज़र पर प्रभाव देख सकते हैं।

क्या कोई तोते को क्षैतिज रूप से आगे बढ़ने से रोकने का तरीका जानता है? मैं समाधान के लिए उच्च और निम्न खोज रहा हूं लेकिन यह असंभव लगे शुरू कर रहा है।

यहाँ प्रासंगिक सीएसएस

#content { 
    padding-top:20px; 
    padding-bottom:713px; /* Height of the footer element */ 
    width:888px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 

#help-col1 { 
    left:0; 
    width:218px; 
    position:absolute; 
    height:500px; 
} 

#parrot-box { 
    position:absolute; 
    top:0; 
    margin-top: 20px; 
} 

#parrot-box.fixed { 
    position:fixed; 
    top:0; 
} 

#help-col2 { 
    width:634px; 
    float:right; 
} 

पेज स्रोत (http://www.cartoonizemypet.com/new/help/) स्क्रिप्ट को देखने के लिए बाहर की जाँच के लिए स्वतंत्र महसूस है और एचटीएमएल। किसी भी मदद की बहुत सराहना की जाएगी।

Answer 1

हर किसी को चिंता न करें, मेरे पति ने यह काम करने का एक वैकल्पिक तरीका निकाला! :)

तोते को पृष्ठ के साथ ले जाने की बजाय; मैं उत्तर divs के अंदर तोता के कई संस्करण होने जा रहा हूँ।इस तरह जब कोई उपयोगकर्ता उत्तर पर क्लिक करता है तो यह खुला रहता है और तोता इसके बगल में दिखाई देता है।

नहीं कि मैंने मूल रूप से यह योजना बनाई थी, लेकिन मुझे लगता है कि मैं इस नए तरीके को और भी बेहतर बना सकता हूं!

किसी भी दर पर सहायता के लिए धन्यवाद! :)

Answer 2

जब तोते को 'निश्चित' वर्ग मिल जाता है, तोते (अंदर # मदद-कॉल 1) में 0 का 'बायां' मान होता है। इसका मतलब है कि वह हमेशा पृष्ठ के बाईं ओर संलग्न होने जा रहा है ... इससे कोई फर्क नहीं पड़ता कि क्या खिड़की के आयाम हैं, और यह कैसे स्क्रॉल करता है।

जो आप पूछ रहे हैं वह उसके लिए लंबित स्क्रॉल तत्व की तरह व्यवहार करना है जब उपयोगकर्ता लंबवत स्क्रॉल करता है, लेकिन क्षैतिज रूप से नहीं। जहां तक ​​मुझे पता है, यह संभव नहीं है। फिक्स्ड तय है ... एक्स और वाई।

हालांकि, कुछ समाधान (like this one) हैं जो इस समस्या को प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करने के बारे में बात करते हैं। यहां सिद्धांत यह है कि जब पृष्ठ क्षैतिज रूप से स्क्रॉल किया गया हो और थोड़ी सी जावास्क्रिप्ट सुन सकती है तो तोते को तोड़कर वापस स्थानांतरित कर दें।

व्यक्तिगत रूप से, मैं मोबाइल विशिष्ट लेआउट बनाने के लिए css media queries का उपयोग करना चाहता हूं। आप साइट के मोबाइल संस्करण के लिए विशिष्ट सीएसएस असाइन कर सकते हैं, इसलिए उम्मीद है कि उपयोगकर्ता को ज़ूम (या क्षैतिज रूप से स्क्रॉल) की आवश्यकता नहीं है =)

शुभकामनाएँ!

Answer 3

जेएस स्क्रॉल इवेंट श्रोता का सुझाव दिया गया है, लेकिन इस पर निर्भर सभी कार्यान्वयन व्यवस्थित रूप से लगी हैं। मुझे लगता है कि यह तय करने के लिए मीडिया प्रश्नों का उपयोग करके बेहतर भाग्य होगा कि निर्धारित स्थिति उचित है या नहीं (यानी यदि खिड़की/उपकरण पर्याप्त चौड़ा है, या वैकल्पिक व्यवहार के साथ विकल्प नहीं है)।

आप वास्तव में संकीर्ण स्क्रीन के लिए शीर्ष पर तोता छोड़ सकते हैं और कुछ रियल एस्टेट को सुरक्षित रख सकते हैं और पुराने मोबाइल सफारी संस्करणों को संबोधित करने में असमर्थता position:fixed सही ढंग से व्याख्या करने में असमर्थता को संबोधित कर सकते हैं। आप निश्चित रूप से एक और अधिक परिष्कृत दृष्टिकोण को लागू कर सकता है, लेकिन यह एक अच्छा प्रारंभिक बिंदु होना चाहिए - इसे आज़माने के लिए, अपने पृष्ठ पर निम्न स्क्रिप्ट को निष्पादित (बस कंसोल में ठीक है):

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>'); 

पहले यह ओवरराइड करता है मूल #parrot-box.fixed घोषणा, और तब भी जब भी खिड़की कम से कम 982px चौड़ी (आपकी पृष्ठ रैपर चौड़ाई) हो, तब तक अपनी फ़्लोटेड स्टाइल लागू होती है।