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

<div id="output"></div>

<div id="sample" class="sampleClass">
  <div>hello</div>
  <div>hello</div>  
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
</div>

window.addEventListener("resize", updateDimensions);


var originalHeight = document.getElementById('sample').offsetHeight;
var safeBuffer = 15;

function updateDimensions(){
    var node = document.getElementById('sample');
    var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
    var dimensions = node.getBoundingClientRect();
  var nodeBottom = dimensions.bottom;
  var nodeHeight = node.offsetHeight;

  var nodeTop = dimensions.top;
  var windowHeight = windowDimensions.height;

  var windowIsCutOff = windowHeight <= nodeBottom;
  var windowIsShowing = windowHeight >= nodeTop;

  console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer);
  console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight);
  var nodeCanGrowBigger =  (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight;
  console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);

  if(windowIsShowing && windowIsCutOff) {
     console.log('do work');
     shrinkWindow(nodeBottom, windowHeight, nodeHeight);
  }

  if(nodeCanGrowBigger){
    growWindow(nodeBottom, windowHeight, nodeHeight);
  }
}

function growWindow(nodeBottom, windowHeight, nodeHeight){
  var node = document.getElementById('sample');
  var originalHeight = nodeHeight;
  var offset = nodeHeight - windowHeight;
  var newHeight;
  if(offset >= -safeBuffer && offset <= safeBuffer){
   newHeight = originalHeight;
  }
  else if(offset >= 0){
    newHeight = originalHeight + offset;
    console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
    }else{
    newHeight = originalHeight - offset;
    console.log('negative', newHeight);
  }
  node.style.height = newHeight + 'px';
  console.log('height attmpted changed to', newHeight);
  console.log('height offset', node.offsetHeight);
  console.log('height style', node.style.height);
}

function shrinkWindow(nodeBottom, windowHeight, nodeHeight) {
    var node = document.getElementById('sample');
  var originalHeight = nodeHeight;
  //console.log('originalHeight', originalHeight);
  //console.log('nodeBottom:' + nodeBottom + ' windowHeight: ' + windowHeight);
  var offset = nodeHeight - windowHeight;
  //console.log('offset', offset);
  var newHeight;
  if(offset >= -safeBuffer && offset <= safeBuffer){
   newHeight = originalHeight - (safeBuffer + 1);
  }
  else if(offset >= 0){
    newHeight = originalHeight - offset;
    //console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
    }else{
    newHeight = originalHeight + offset;
    //console.log('negative', newHeight);
  }
  node.style.height = newHeight + 'px';
  /*
  console.log('height attmpted changed to', newHeight);
  console.log('height offset', node.offsetHeight);
  console.log('height style', node.style.height);
  */
}


.sampleClass {
 padding: 0px;
 height: 300px;
 overflow-y: auto;
 border: solid blue;
 //margin: 10px 300px 10px 25px;
 margin: 0px
 position: 'relative'
}

मैं जिस जावास्क्रिप्ट समाधान के साथ आया हूं वह अत्यधिक जटिल लगता है। यह पैडिंग, या पृष्ठ पर अधिक सामग्री जैसी चीजों के लिए हल नहीं करता है। क्या मैं इस समस्या को सादे पुराने CSS या JS एक्सटेंशन के साथ हल कर सकता हूँ?

मुझे पता है कि Kendo ui का यह प्रभाव उनकी मोडल विंडो में होता है (कम से कम 5 साल पुराने संस्करण में हम उपयोग)। मैं केंडो का उपयोग करने के लिए तैयार नहीं हूं।

0
P.Brian.Mackey 21 जुलाई 2016, 19:53

2 जवाब

सबसे बढ़िया उत्तर

यह कहना मुश्किल है कि क्या यह आपकी स्थिति के लिए काम करेगा ... निम्नलिखित टच-अप को देखें। यह अधिक काम का उपयोग कर सकता है, लेकिन मुझे लगता है कि यह आपको उस दिशा में इंगित करेगा जिस दिशा में मैं जा रहा था:

function updateDimensions(){
  var node = document.getElementById('sample');
  var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
  var dimensions = node.getBoundingClientRect();
  var nodeBottom = dimensions.bottom;
  var nodeHeight = node.offsetHeight;

  var nodeTop = dimensions.top;
  var windowHeight = windowDimensions.height;

  var windowIsCutOff = windowHeight <= nodeBottom;
  var windowIsShowing = windowHeight >= nodeTop;

  console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer);
  console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight);
  var nodeCanGrowBigger =  (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight;
  console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);

  if ( (windowIsShowing && windowIsCutOff) || nodeCanGrowBigger ) {
     growWindow(nodeTop, windowHeight, nodeHeight);
  }
}

function growWindow(nodeTop, windowHeight, nodeHeight){
  var node = document.getElementById('sample');
  var offset = windowHeight - ( nodeTop + nodeHeight + safeBuffer );
  var newHeight = nodeHeight + offset;
  node.style.height = newHeight + 'px';
}

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

1
Paurian 21 जुलाई 2016, 20:13

यह केंडो UI की तरह संस्करण है:

window.addEventListener("resize", updateDimensions);

var node = document.getElementById('sample');
var style = node.currentStyle || window.getComputedStyle(node);
var marginTop = style.marginTop.replace("px", "");
marginTop = parseInt(marginTop, 10);
var innerNode = document.getElementById('inner');
var innerNodeStyle = innerNode.currentStyle || window.getComputedStyle(innerNode);
var innerMarginTop = innerNodeStyle.marginTop.replace("px", "");
innerMarginTop = parseInt(innerMarginTop, 10);
var innerMarginBottom = innerNodeStyle.marginBottom.replace("px", "");
innerMarginBottom = parseInt(innerMarginBottom, 10);
var totalInnerMarginSize = innerMarginTop + innerMarginBottom;
var safeBuffer = 0;
//if(marginTop < 20){
  safeBuffer = 20;
//}
var originalHeight = node.offsetHeight + marginTop + safeBuffer;


function updateDimensions(){
  var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
  var dimensions = node.getBoundingClientRect();
  //console.log('totalInnerMarginSize: ' + totalInnerMarginSize);
  var cutoffPoint = marginTop + node.offsetHeight + safeBuffer + totalInnerMarginSize ;
  var nodeTop = dimensions.top;
  var innerNodeDimensions = innerNode.getBoundingClientRect();
  var innerNodeTop = innerNodeDimensions.top;
  var innerNodeHeight = innerNodeDimensions.height;
  //console.log('innerNodeHeight: ' + innerNodeHeight);
  var windowHeight = windowDimensions.height;
  console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint);
  var windowIsCutOff = windowHeight <= cutoffPoint;
  //console.log('windowHeight: ' + windowHeight + ' nodeTop: ' + nodeTop);
  var windowIsShowing = windowHeight > nodeTop;


  var nodeCanGrowBigger =  windowHeight > cutoffPoint && cutoffPoint < originalHeight;
  //console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
  //console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint
              //+ ' originalHeight: ' + originalHeight);

    //console.log('windowIsShowing: ' + windowIsShowing + ' windowIsCutOff: ' + windowIsCutOff + ' nodeCanGrowBigger: ' + nodeCanGrowBigger);
  if ( (windowIsShowing && windowIsCutOff) || nodeCanGrowBigger ) {
     resizeWindow(innerNodeHeight, windowHeight, cutoffPoint);
  }
}

function resizeWindow(innerHeight, windowHeight, cutoffPoint){
    //console.log('innerHeight: ' + innerHeight + ' windowHeight: ' + windowHeight
               //+ ' cutoffPoint: ' + cutoffPoint);

  var newHeight = innerHeight - (cutoffPoint - windowHeight);
  innerNode.style.height = newHeight + 'px';
}

<div id="output"></div>

<div id="sample" class="sampleClass">
  <h1>
   Header
  </h1>
    <div id="inner">
      <div>hello</div>
      <div>hello</div>  
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
   </div>
  <h1>
  footer
  </h1>
</div>

.sampleClass {
 padding: 10px;
 //height: 300px;
 overflow-y: auto;
 border: solid blue;
 //margin: 10px 300px 10px 25px;
 margin: 70px;
 position: 'relative'
}

#inner{
  position: 'relative';
  overflow-y: auto;
  border: solid red 1px;
}
0
P.Brian.Mackey 22 जुलाई 2016, 00:57