2008-09-18 14 views
5

ब्राउज़र विंडो का आकार बदलने पर एक वेब पेज को कैसे कार्यान्वित किया जाए?ब्राउज़र विंडो का आकार बदलने पर एक वेब पेज को कैसे कार्यान्वित किया जाए?

मैं या तो एक मेज या सीएसएस नाव वर्गों का उपयोग कर पृष्ठ के तत्वों को बाहर रखना कर सकते हैं, लेकिन मैं प्रदर्शन rescale करने जब ब्राउज़र विंडो का आकार बदलने पर

मैं साथ AJAX प्रो और DIVs का उपयोग कर एक काम समाधान है चाहता हूँ अतिप्रवाह: ऑटो और एक ऑनविंडोरेसिज़ हुक, लेकिन यह बोझिल है। क्या कोई बेहतर तरीका है? जवाब के लिए

  • धन्यवाद हर कोई अब तक, मैं उन सब की कोशिश करने का इरादा (या कम से कम उनमें से ज्यादातर) और फिर सीएसएस और प्रतिशत के उपयोग से इस सूत्र

  • के जवाब के रूप में सबसे अच्छा समाधान चुनें सबसे अच्छा काम करता प्रतीत होता है, जो मैंने मूल समाधान में किया था; एक दृश्यता का उपयोग करके: छुपा div 100% से 100% तक सेट किया गया है विंडो के क्लाइंट एरिया को मापने का तरीका देता है [अन्यथा आईई में मुश्किल], और एक ऑनविंडोरेसिज़ जावास्क्रिप्ट फ़ंक्शन AJAXPRO विधियों को लातने देता है जब विंडो को फिर से निकालने के लिए आकार बदलता है नए रिज़ॉल्यूशन पर लेआउट-सेल सामग्री

संपादित करें: पूरी तरह से स्पष्ट नहीं होने के लिए मेरी माफी; मुझे एक 'तरल लेआउट' की आवश्यकता थी जहां प्रमुख तत्व ('पैन') स्केल करेंगे क्योंकि ब्राउज़र विंडो का आकार बदल दिया गया था। मैंने पाया कि मुझे आकार बदलने के बाद 'फलक' सामग्री को दोबारा प्रदर्शित करने के लिए एक एजेक्स कॉल का उपयोग करना था, और ओवरफ्लो रखना:

+0

आप किस तरह से "पैमाने" का मतलब है? क्या आप फिट करने के लिए लेआउट खिंचाव बनाने के बारे में बात कर रहे हैं, या क्या आप फ़ॉन्ट आकार/छवि आयामों को भी बढ़ाने का मतलब रखते हैं? – nickf

+0

दोनों - लेआउट हमेशा स्क्रीन भरना चाहिए, और फ़ॉन्ट आकार को आनुपातिक और केंद्रित क्षैतिज और लंबवत रहने के लिए बढ़ाना चाहिए या लंबवत –

उत्तर

14

सीएसएस में उपयोग करने के बजाय "चौड़ाई: 200 पीएक्स" कहें, सामान का उपयोग करें "चौड़ाई: 50%" की तरह

यह करने के मामले में 50% जो कुछ भी की क्या है, उपयोग करती हैं इसलिए बनाता है:

<body> 
<div style="width:50%"> 
    <!--some stuff--> 
</div> 
</body> 

div अब हमेशा ऊपर आधा खिड़की horizontaly ले जाएगा।

+0

यह मूल रूप से प्रारंभिक लेआउट के लिए काम करता है, लेकिन आपको विभिन्न ब्राउज़रों में सीमाओं के लिए प्रतिशत को समायोजित करना होगा , और divs –

7

जब तक आपके पास यहां कुछ विशिष्ट आवश्यकता नहीं है, मुझे यकीन नहीं है कि जेएस की आवश्यकता क्यों है। टैबलेटर लेआउट एचटीएमएल में तरल लेआउट बनाने के लिए आसान (और पुरातन) तरीका है, लेकिन सीएसएस के साथ div लेआउट तरल लेआउट के लिए भी अनुमति देता है, http://www.glish.com/css/2.asp

+0

की सामग्री का आकार बदलने के लिए विंडो आकार बदलकर एजेक्स का उपयोग भी करें ब्राउज़र ब्राउज़र विंडो का आकार बदलते समय सामग्री को रीफ्रेश करने के लिए जावास्क्रिप्ट आवश्यक है –

5

हाँ ध्वनि जैसे आप तरल सीएसएस लेआउट देखना चाहते हैं। इस पर संसाधनों के लिए, केवल Google तरल सीएसएस लेआउट, आपको जांच करने के लिए बहुत सारी चीज़ें देनी चाहिए। कुछ अच्छे पॉइंटर्स के लिए this previous question पर भी एक नज़र डालें।

4

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

+0

सामग्री रीफ्रेश को ट्रिगर करने के लिए जावास्क्रिप्ट आवश्यक है, पृष्ठ सभी स्थिर –

+0

ठीक नहीं है, मैं ठीक हूं, ऑनरेज़ ईवेंट के साथ जावास्क्रिप्ट का उपयोग करने का जिक्र कर रहा था। – Zach

2

मैंने ऐसा करने का सबसे अच्छा तरीका YUI सीएसएस टूल्स का उपयोग करना है और फिर सब कुछ के लिए प्रतिशत का उपयोग करना है। YUI Grids उपलब्ध स्थान के अंशों के रूप में निर्दिष्ट कॉलम आकार के साथ विभिन्न निश्चित चौड़ाई या तरल लेआउट की अनुमति देता है। चीज़ों को दूर रखने में मदद के लिए YUI Grids Builder है। YUI Fonts आपको अच्छा फ़ॉन्ट आकार नियंत्रण देता है। कुछ अच्छे cheat sheets उपलब्ध हैं जो आपको दिखाते हैं कि चीज़ों को कैसे बाहर रखना है और उपयोगी चीजें जैसे कि कितने प्रतिशत पिक्सेल के फ़ॉन्ट आकार के लिए निर्दिष्ट करना है।

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

+0

लिंक के लिए धन्यवाद, बहुत ही रोचक टूल! –

5

यह वास्तव में आपके द्वारा लागू किए जा रहे वेब पेज पर निर्भर करता है। एक सामान्य नियम के रूप में आप 100% सीएसएस चाहते हैं। जब तत्वों का आकार बदलते हैं, जिसमें पाठ, उन्मुख, और पीएक्स जैसे पाठ उन्मुख आकारों की ओर अग्रसर होना याद नहीं है।

यदि आप सीएसएस के लिए नए हैं तो फ्लोट खतरनाक हैं। मैं नया नहीं हूं और वे अभी भी मेरे लिए कुछ परेशान हैं। जहां संभव हो उनसे बचें। आम तौर पर, आपको किसी भी तरह से काम कर रहे div या तत्व की डिस्प्ले प्रॉपर्टी को संशोधित करने की आवश्यकता होती है।

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

मुझे यकीन नहीं है कि आप इस साइट को (मज़ेदार, लाभ, दोनों) के लिए कौन कर रहे हैं, लेकिन मैं आपको सलाह देता हूं कि आप यहां और वहां कुछ हैक्स के साथ सीएसएस शुद्धता को कैसे संतुलित करते हैं अपनी दक्षता बढ़ाने में मदद करें। क्या आपकी वेबसाइट पर व्यवसाय को 100% पहुंच योग्य होना चाहिए? नहीं? फिर इसे पेंच। ऐसा करें जो आपको पहले अपना पैसा बनाने के लिए करना है, फिर अपने जुनून के साथ जंगली होग करें और आपके पास अतिरिक्त समय के लिए कुछ भी करें।

+0

साइट पहले से ही हो चुकी है - यह क्लाइंट के लिए थी - लेकिन इसे वापस देखकर मुझे यह पसंद नहीं आया कि मुझे यह काम करने के लिए क्या करना है –

1

पुस्तक द्वारा समाधान का प्रयास करने के बाद मैं फ़ायरफ़ॉक्स या आईई में असंगतता के साथ फंस गया। तो मैंने कुछ tinkering किया और इस सीएसएस के साथ आया था। जैसा कि आप देख सकते हैं, मार्जिन वांछित आकार और नकारात्मक के आधा हैं।

<head><title>Centered</title> 
<style type="text/css"> 
body { 
     background-position: center center; 
     border: thin solid #000000; 
     height: 300px; 
     width: 600px; 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     margin-top: -150px; 
     margin-right: auto; 
     margin-bottom: auto; 
     margin-left: -300px; 
    } 
</style></head>  

आशा है कि मदद करता है

+0

दिलचस्प समाधान, लेकिन मैं शरीर को एक निश्चित आकार –

1

उपयोग प्रतिशत! मान लें कि आपके पास "मुख्य फलक" है जिस पर आपके सभी पृष्ठ की सामग्री निहित है। आप खिड़की, हमेशा, और खिड़की की चौड़ाई की 80% में केंद्रित होना चाहते हैं।

आप ऐसा करते हैं:
#centerpane { मार्जिन: ऑटो; चौड़ाई: 80%; }

ताडा!

+0

पर सेट नहीं कर सकता पृष्ठ सामग्री हमेशा खिड़की भरने के लिए, और खिड़की का आकार बदलते समय खुद को आकार बदलें –

1

सभी सुझावों के लिए धन्यवाद! ऐसा लगता है कि बदसूरत चीजें मुझे जरूरी थीं। आईई और फ़ायरफ़ॉक्स में निम्नलिखित कार्य (मेरी मशीन पर, वैसे भी)। मैं CodeProject.com के लिए इस से बाहर एक लेख बना सकता है बाद में ;-)

यह जावास्क्रिप्ट < सिर > अनुभाग में होता है:

<script type="text/javascript"> 
var tmout = null; 
var mustReload = false; 

function Resizing() 
{ 
    if (tmout != null) 
    { 
     clearTimeout(tmout); 
    } 
    tmout = setTimeout(RefreshAll,300); 
} 
function Reload() 
{ 
    document.location.href = document.location.href; 
} 
//IE fires the window's onresize event when the client area 
//expands or contracts, which causes an infinite loop. 
//the way around this is a hidden div set to 100% of 
//height and width, with a guard around the resize event 
//handler to see if the _window_ size really changed 
var windowHeight; 
var windowWidth; 
window.onresize = null; 
window.onresize = function() 
{ 
    var backdropDiv = document.getElementById("divBackdrop"); 
    if (windowHeight != backdropDiv.offsetHeight || 
     windowWidth != backdropDiv.offsetWidth) 
    { 
     //if screen is shrinking, must reload to get correct sizes 
     if (windowHeight != backdropDiv.offsetHeight || 
      windowWidth != backdropDiv.offsetWidth) 
     { 
      mustReload = true; 
     } 
     else 
     { 
      mustReload = mustReload || false; 
     } 
     windowHeight = backdropDiv.offsetHeight; 
     windowWidth = backdropDiv.offsetWidth; 
     Resizing(); 
    } 
} 
</script> 

< शरीर > इस तरह शुरू होता है:

<body onload="RefreshAll();"> 
    <div id="divBackdrop" 
     style="width:100%; clear:both; height: 100%; margin: 0; 
      padding: 0; position:absolute; top:0px; left:0px; 
      visibility:hidden; z-index:0;"> 
    </div> 

डीआईवी लेआउट के लिए बाईं ओर तैरता है। मुझे डीवीवी की सीमाओं के कारण फ्लोट को लपेटने से रोकने के लिए ऊंचाई और चौड़ाई को प्रतिशत तक केवल शर्मीली (उदाहरण के लिए, 99.99%, 59.99%, 3 9.99%) निर्धारित करना पड़ा।

अंत में, सामग्री अनुभाग के बाद, एक और जावास्क्रिप्ट ब्लॉक ताज़ा प्रबंधन करने के लिए:

var isWorking = false; 
var currentEntity = <%=currentEntityId %>; 

//try to detect a bad back-button usage; 
//if the current entity id does not match the querystring 
//parameter entityid=### 
if (location.search != null && location.search.indexOf("&entityid=") > 0) 
{ 
    var urlId = location.search.substring(
     location.search.indexOf("&entityid=")+10); 
    if (urlId.indexOf("&") > 0) 
    { 
     urlId = urlId.substring(0,urlId.indexOf("&")); 
    } 
    if (currentEntity != urlId) 
    { 
     mustReload = true; 
    } 
} 
//a friendly please wait... hidden div 
var pleaseWaitDiv = document.getElementById("divPleaseWait"); 
//an example content div being refreshed via AJAX PRO 
var contentDiv = document.getElementById("contentDiv"); 

//synchronous refresh of content 
function RefreshAll() 
{ 
    if (isWorking) { return; } //no infinite recursion please! 

    isWorking = true; 
    pleaseWaitDiv.style.visibility = "visible"; 

    if (mustReload) 
    { 
     Reload(); 
    } 
    else 
    { 
     contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
      (currentEntity, contentDiv.offsetWidth, 
      contentDiv.offsetHeight).value; 
    } 

    pleaseWaitDiv.style.visibility = "hidden"; 
    isWorking = false; 
    if (tmout != null) 
    { 
     clearTimeout(tmout); 
    } 
} 

var tmout2 = null; 
var refreshInterval = 60000; 

//periodic synchronous refresh of all content 
function Refreshing() 
{ 
    RefreshAll(); 
    if (tmout2 != null) 
    { 
     clearTimeout(tmout2); 
     tmout2 = setTimeout(Refreshing,refreshInterval); 
    } 
} 

//start periodic refresh of content 
tmout2 = setTimeout(Refreshing,refreshInterval); 

//clean up 
window.onunload = function() 
{ 
    isWorking = true; 
    if (tmout != null) 
    { 
     clearTimeout(tmout); 
     tmout = null; 
    } 
    if (tmout2 != null) 
    { 
     clearTimeout(tmout2); 
     tmout2 = null; 
    } 

बदसूरत है, लेकिन यह काम करता है - जो मैं इसे लगता है कि क्या वास्तव में मायने रखती ;-)

1

उपयोग ईएमएस। jontangerine.com और simplebits.com दोनों अद्भुत उदाहरण हैं। अतिरिक्त पठन - The Incredible Em & Elastic Layouts with CSS by Jon Tan

+0

धन्यवाद एंडी! पिछली परियोजना पर पीएक्स में फ़ॉन्ट आकार की गणना करने के बाद मैंने इस परियोजना में फोंट के लिए ईएमएस का उपयोग करके अंत किया [जो काम करता था, लेकिन अच्छा नहीं!] –

0

< शरीर onresize = "resizeWindow()" ऑनलोड = "resizeWindow()"> पृष्ठ </body>

/**** Page Rescaling Function ****/ 

    function resizeWindow() 
    { 
     var windowHeight = getWindowHeight(); 
     var windowWidth = getWindowWidth(); 

     document.getElementById("content").style.height = (windowHeight - 4) + "px"; 
    } 

    function getWindowHeight() 
    { 
     var windowHeight=0; 
     if (typeof(window.innerHeight)=='number') 
     { 
      windowHeight = window.innerHeight; 
     } 
     else { 
      if (document.documentElement && document.documentElement.clientHeight) 
      { 
       windowHeight = document.documentElement.clientHeight; 
      } 
      else 
      { 
       if (document.body && document.body.clientHeight) 
       { 
        windowHeight = document.body.clientHeight; 
       } 
      } 
     } 
     return windowHeight; 
    } 

समाधान मैं वर्तमान में काम कर रहा हूँ चौड़ाई के रूप में कुछ बदलावों की आवश्यकता है अन्यथा ऊंचाई अब तक ठीक काम करती है ^^

-Ozaki

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