सीएसएस

Question

का उपयोग कर निश्चित मूल्य द्वारा आकार बदलें मैं उपयोगकर्ताओं को अपनी सामग्री का आकार बदलने के लिए सीएसएस resize:both; संपत्ति का उपयोग कर रहा हूं। नीचे दिया गया कोड देखें।

.foo { 
 
    resize: both; 
 
    min-width: 250px; 
 
    width: auto; 
 
    text-align: center; 
 
    min-height: 30px; 
 
    border: 1px solid #515151; 
 
    border-radius: 6px; 
 
    position: absolute; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33); 
 
    box-shadow: 5px 5px rgba(0,0,0, 0.1); 
 
} 
 
.thClass { 
 
    margin-left: -3px; 
 
    text-align: center; 
 
    box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    margin-top: -2px; 
 
    min-height: 30px; 
 
    line-height: 30px; 
 
    font-size: 19px; 
 
    cursor: move; 
 
} 
 
.header{ 
 
    margin-left: 17px; 
 
} 
 
.tableBody { 
 
    display: block; 
 
    min-height: 25px; 
 
    text-align: center; 
 
    width: 102%; 
 
    margin-left: -2px; 
 
    cursor: default; 
 
} 
 
.foo tbody tr td { 
 
    display: block; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
 
} 
 
#displaySizes { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin-top: 0; 
 
} 
 
.disp tbody tr th { 
 
    border: 1px solid black; 
 
} 
 
.disp tbody tr td { 
 
    display: table-cell; 
 
}

<table class="foo disp elementTable"> 
 
       <tr class="tableHeader"> 
 
        <th class="thClass" colspan="5"> 
 
         <span class="header">Device</span> 
 
        </th> 
 
       </tr> 
 
       <tr> 
 
        <td rowspan="4" id="sizeContainer"> 
 
         <ul id="displaySizes"> 
 
          <li>4:3</li> 
 
          <li>16:9</li> 
 
          <li>Clock</li> 
 
         </ul> 
 
        </td> 
 
        <td>$100</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
      </table>

वहाँ सीएसएस का उपयोग कर, उदाहरण के लिए, [10,10] पिक्सल द्वारा कदम से इस तालिका कदम आकार बदलने के लिए कोई तरीका है? जावास्क्रिप्ट भी ठीक है। मैंने वेब की खोज की है, लेकिन कुछ भी नहीं मिला। कोड के साथ खेलने के लिए यहां fiddle काम कर रहा है।

Answer 1

एक अच्छा बात है, तो यह css-element-queries लाइब्रेरी, का उपयोग कर सकता है यही कारण है कि आप सभी के लिए है अपनी मेज के लिए एक ResizeSensor() पैदा कर रही है और फिर दोनों ऊंचाई और चौड़ाई रेंज परिवर्तन स्थापित करने के लिए गणना कर:

स्निपेट नीचे देखें:

var width = $('.elementTable').width(); 
 
var height = $('.elementTable').height(); 
 
var changePX = 50; 
 

 

 
new ResizeSensor(jQuery('.elementTable'), function(){ 
 

 
    //width calcuation 
 
    if(Math.abs($('.elementTable').width()-width) > changePX) { 
 
     $('.elementTable').width() > width ? width +=changePX : width -=changePX; 
 
    } 
 
    $('.elementTable').width(width); 
 
    
 
    //height calcuation 
 
    if(Math.abs($('.elementTable').height()-height) > changePX) { 
 
     $('.elementTable').height() > height ? height +=changePX : height -=changePX; 
 
    } 
 
    $('.elementTable').height(height); 
 
    
 
})

.foo { 
 
    resize: both; 
 
    min-width: 250px; 
 
    width: auto; 
 
    text-align: center; 
 
    min-height: 30px; 
 
    border: 1px solid #515151; 
 
    border-radius: 6px; 
 
    position: absolute; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33); 
 
    box-shadow: 5px 5px rgba(0,0,0, 0.1); 
 
} 
 
.thClass { 
 
    margin-left: -3px; 
 
    text-align: center; 
 
    box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    margin-top: -2px; 
 
    min-height: 30px; 
 
    line-height: 30px; 
 
    font-size: 19px; 
 
    cursor: move; 
 
} 
 
.header{ 
 
    margin-left: 17px; 
 
} 
 
.tableBody { 
 
    display: block; 
 
    min-height: 25px; 
 
    text-align: center; 
 
    width: 102%; 
 
    margin-left: -2px; 
 
    cursor: default; 
 
} 
 
.foo tbody tr td { 
 
    display: block; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
 
} 
 
#displaySizes { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin-top: 0; 
 
} 
 
.disp tbody tr th { 
 
    border: 1px solid black; 
 
} 
 
.disp tbody tr td { 
 
    display: table-cell; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script> 
 
<table class="foo disp elementTable"> 
 
       <tr class="tableHeader"> 
 
        <th class="thClass" colspan="5"> 
 
         <span class="header">Device</span> 
 
        </th> 
 
       </tr> 
 
       <tr> 
 
        <td rowspan="4" id="sizeContainer"> 
 
         <ul id="displaySizes"> 
 
          <li>4:3</li> 
 
          <li>16:9</li> 
 
          <li>Clock</li> 
 
         </ul> 
 
        </td> 
 
        <td>$100</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
      </table>

Answer 2

यहाँ एक समाधान मैं एक साथ रखा है कि आकार बदलने पर दिया ग्रिड पर स्नैप हो जाएगा है (source) (इस उदाहरण 20px में।)

यह "पार ब्राउज़र आकार बदलने घटना श्रोता" का उपयोग करता है, कि एक एक और डेवलपर को एक साथ रखा गया है:

असल में यह सिर्फ आकार घटना को सुनता है, तो के लिए शैलियों सेट जावास्क्रिप्ट का उपयोग कर चौड़ाई और ऊंचाई।

यहाँ फिडल:

https://jsfiddle.net/treetop1500/co8zbatz/

// utility function for rounding (20px in this case) 
function round20(x) 
{ 
    return Math.ceil(x/20)*20; 
} 

// Attach listener 
var myElement = document.getElementById('resize'), 
    myResizeFn = function(){ 
     h = round20(parseInt(this.style.height,10)); 
     w = round20(parseInt(this.style.width,10)); 
     this.style.height = h + "px"; 
     this.style.width = w + "px"; 
    }; 

addResizeListener(myElement, myResizeFn);