ফ্লেক্স ট্রানজিশন: সামগ্রীতে ফিট করার জন্য প্রসারিত (বা সঙ্কুচিত)

9

আমি একটি স্ক্রিপ্ট কোড করেছি (এখানে একটি ব্যবহারকারীর সহায়তায়) যা আমাকে একটি নির্বাচিত ডিভটি প্রসারিত করতে এবং অন্য ডিভগুলি বাকী জায়গার সাথে সমানভাবে প্রসারিত করে সেই অনুযায়ী আচরণ করতে দেয় (প্রথমটি যা প্রস্থটি স্থির করা আছে তা বাদে)।

এবং এখানে আমি কী অর্জন করতে চাই তার একটি চিত্র:

এখানে চিত্র বর্ণনা লিখুন

তার জন্য আমি ফ্লেক্স এবং ট্রানজিশনগুলি ব্যবহার করি।

এটি ভাল কাজ করে, তবে jQuery স্ক্রিপ্ট একটি "400%" প্রসারিত মান নির্দিষ্ট করে (যা পরীক্ষার জন্য দুর্দান্ত)।

এখন আমি নির্বাচিত ডিভাইসটি "400%" স্থির মানের পরিবর্তে সামগ্রীতে ফিট করার জন্য প্রসারিত / সঙ্কুচিত করতে চাই।

আমি কীভাবে এটি করতে পারি তা আমার কোনও ধারণা নেই।

এটা কি সম্ভব ?

আমি ডিভটি ক্লোন করার চেষ্টা করেছি, সামগ্রীতে এটি ফিট করেছি, এর মান পেতে এবং তারপরে এই মানটি ট্রানজিশনে ব্যবহার করতে পারি তবে এর অর্থ আমার শতাংশের প্রাথমিক প্রস্থ কিন্তু পিক্সেলের একটি লক্ষ্য মান রয়েছে। যে কাজ করে না।

এবং যদি আমি শতাংশে পিক্সেল মান রূপান্তর করি, তবে ফলাফল যাই হোক না কেন কারণ হিসাবে সামগ্রীতে ফিট করে না।

সব ক্ষেত্রে, যাই হোক না কেন আমি যা চাই তা অর্জন করার জন্য এটি কিছু জটিল উপায় বলে মনে হচ্ছে।

নির্বাচিত ডিভের সামগ্রীতে ফিট করার জন্য এমন কোনও ফ্লেক্স সম্পত্তিটি স্থানান্তরিত হতে পারে না?

এখানে কোডটি রয়েছে ( আরও ভালভাবে পড়ার জন্য সম্পাদিত / সরলীকৃত ):

var expanded = '';

$(document).on("click", ".div:not(:first-child)", function(e) {

  var thisInd =$(this).index();
  
  if(expanded != thisInd) {
    //fit clicked fluid div to its content and reset the other fluid divs 
    $(this).css("width", "400%");
    $('.div').not(':first').not(this).css("width", "100%");
    expanded = thisInd;
  } else {
    //reset all fluid divs
    $('.div').not(':first').css("width", "100%");
    expanded = '';
  }
});
.wrapper {
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  border: 1px solid black;
  display: flex;
  justify-content: flex-start;
}

.div {
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid black;
  text-align:center;
}

.div:first-child {
  min-width: 36px;
  background: #999;
}

.div:not(:first-child) {
  width: 100%;
  transition: width 1s;
}

.div:not(:first-child) span {
  background: #ddd;
}

.div:last-child {
  border-right: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Click on the div you want to fit/reset (except the first div)

<div class="wrapper">

  <div class="div"><span>Fixed</span></div>
  <div class="div"><span>Fluid (long long long long long text)</span></div>
  <div class="div"><span>Fluid</span></div>
  <div class="div"><span>Fluid</span></div>

</div>
স্নিপেট প্রসারিত করুন

এখানে jsfiddle:

https://jsfiddle.net/zajsLrxp/1/

সম্পাদনা: আপনার সকলের সহায়তায় আমার কার্যনির্বাহী সমাধানটি এখানে রয়েছে (উইন্ডোর পুনরায় আকারে আপডেট হওয়া মাপগুলি + ডিভের সংখ্যা এবং প্রথম কলামের প্রস্থটি গতিশীলভাবে গণনা করা হয়):

var tableWidth;
var expanded	   = '';
var fixedDivWidth  = 0;
var flexPercentage = 100/($('.column').length-1);

$(document).ready(function() {

    // Set width of first fixed column
    $('.column:first-child .cell .fit').each(function() {
        var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
        if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
    });
    $('.column:first-child'  ).css('min-width',fixedDivWidth+'px')
	
    //Reset all fluid columns
    $('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})

$(window).resize( function() {

    //Reset all fluid columns
    $('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')	
    expanded   = '';
})

$(document).on("click", ".column:not(:first-child)", function(e) {
	
    var thisInd =$(this).index();	
	
    // if first click on a fluid column
    if(expanded != thisInd) 
    {
        var fitDivWidth=0;
    
        // Set width of selected fluid column
        $(this).find('.fit').each(function() {
            var c = $(this)[0].getBoundingClientRect().width;
            if( c > fitDivWidth ){fitDivWidth = c;}
        });
        tableWidth = $('.mainTable')[0].getBoundingClientRect().width; 
        $(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
		
        // Use remaining space equally for all other fluid column
        $('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
		
        expanded = thisInd;
    }

    // if second click on a fluid column
    else
    {
        //Reset all fluid columns
        $('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')

        expanded = '';
    }
  
});
body{
    font-family: 'Arial';
    font-size: 12px;
    padding: 20px;
}

.mainTable {
    overflow: hidden;
    width: 100%;
    border: 1px solid black;
    display: flex;
    margin-top : 20px;
}

.cell{
    height: 32px;
    border-top: 1px solid black;
    white-space: nowrap;
}

.cell:first-child{
    background: #ccc;
    border-top: none;
}

.column {
    border-right: 1px solid black;
    transition: flex 0.4s;
    overflow: hidden;
    line-height: 32px;
    text-align: center;
}

.column:first-child {
    background: #ccc;
}

.column:last-child {
  border-right: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="text">Click on the header div you want to fit/reset (except the first one which is fixed)</span>

<div class="mainTable">
    <div class="column">
        <div class="cell"><span class="fit">Propriété</span></div>
        <div class="cell"><span class="fit">Artisan 45</span></div>
        <div class="cell"><span class="fit">Waterloo 528</span></div>	    
    </div>
		  
    <div class="column">	    
        <div class="cell"><span class="fit">Adresse</span></div>
        <div class="cell"><span class="fit">Rue du puit n° 45 (E2)</span></div>
        <div class="cell"><span class="fit">Chaussée de Waterloo n° 528 (E1)</span></div>	    
    </div>
		
    <div class="column">	    
        <div class="cell"><span class="fit">Commune</span></div>
        <div class="cell"><span class="fit">Ixelles</span></div>
        <div class="cell"><span class="fit">Watermael-Boitsfort</span></div>	    
    </div>
		    
    <div class="column">	    
        <div class="cell"><span class="fit">Ville</span></div>
        <div class="cell"><span class="fit">Marche-en-Famenne</span></div>
        <div class="cell"><span class="fit">Bruxelles</span></div>	    
    </div>
		  
    <div class="column">
        <div class="cell"><span class="fit">Surface</span></div>
        <div class="cell"><span class="fit">120 m<sup>2</sup></span></div>
        <div class="cell"><span class="fit">350 m<sup>2</sup></span></div>	    
    </div>
</div>
স্নিপেট প্রসারিত করুন

এবং এখানে কর্মক্ষেত্রে একটি পূর্ণাঙ্গ উদাহরণ (স্টাইলস + প্যাডিং + আরও ডেটা):

https://jsfiddle.net/zrqLowx0/2/

সবাইকে ধন্যবাদ !

javascript  jquery  css  flexbox  css-transitions 
— বাচির মেসৌরি
সূত্র
1
এত কিছুর পরে আপনি কী তৈরি করেছেন তা দেখিয়ে আপনার প্রশ্নের চূড়ান্ত ফলাফল যুক্ত করতে দয়া করে যথেষ্ট দয়া করুন । আমি এটির মতো দেখতে কীভাবে আগ্রহী। ধন্যবাদ! (... এটির জন্য কী ব্যবহৃত হয় সে সম্পর্কে কিছুটা অন্তর্দৃষ্টি হতে পারে? ...)
— রিনি ভ্যান ডের লেন্ডে
ঠিক আছে, আমি আমার স্ক্রিপ্টটি সমস্ত অপ্রয়োজনীয় উপাদানগুলি থেকে পরিষ্কার করার সাথে সাথেই করব (কয়েক মিনিটের মধ্যে আমার ধারণা)। বলেছিল, আমি কীভাবে করব? আজামেতজিনের উত্তরটি পুরোপুরি ঠিক থাকলেও আমি কি কেবল আসল পোস্টটি সম্পাদনা করব এবং এটিকে আমার পোস্টটি যুক্ত করব? আমি কয়েকটি জিনিস পরিবর্তন করেছি তবে এটি 90% একই (যদিও আমি এটি দেখিয়ে খুশি হব) ..
— বাচির মেসৌরি
এই বিষয়টি এখানে: আমি এক ধরণের এক্সেল স্প্রেডশিট অনুকরণ করি এবং আমি চাই যে লোকেরা সামগ্রীটি ফিট করতে একটি নির্দিষ্ট কলামে ক্লিক করতে সক্ষম হবে। সাধারণত একটি টেবিলটি করতে পারে তবে কলামগুলি যখন চাই সেগুলি পুনরায় আকার দেওয়ার ক্ষেত্রে সঠিকভাবে আচরণ করছে না (একবারে একটি কলাম প্রসারিত করা সহজ তবে অবশিষ্ট স্থানটি দখল করার জন্য অন্যকে বাস্তব সময়ে আচরণ করা শক্ত) ফ্লেক্স ডিভগুলির জন্য করবে They তারা কেবল ভুলভাবে প্রসারিত করবে I আমি কিছু গবেষণা করেছি এবং আমি যা চাই তা টেবিলগুলি দিয়ে অসম্ভব)। আমি কোনও সারণী বা ডেটা টেবিল ব্যবহার না করার অন্যান্য কারণ রয়েছে তবে এটি এই পোস্টের আওতার বাইরে।
— বাচির মেসৌরি
1
যথেষ্ট সহজ, কেবল 'সম্পাদনা' টিপুন, প্রশ্নের শেষে যান এবং একটি নতুন স্নিপেট (এটি সমস্ত) সহ কিছু প্রজেক্টিক চিন্তাভাবনা যুক্ত করা শুরু করুন। ডিফল্ট (নীচে বাম চেকবক্স) 'স্নিপেট লুকানোর' বিষয়টি নিশ্চিত করুন, 'নতুন পাঠকদের' জন্য কম হস্তক্ষেপ / বিভ্রান্ত করা। আমার প্রথম ধারণাটি ছিল আপনি এটি কোনও অভিনব 'হারমোনিকা'-জাতীয় উইজেট, আইকন এবং সমস্ত কিছুর জন্য ব্যবহার করতে যাচ্ছেন। স্প্রেডশিট হু, আমার এখানে কিছু পূর্ণ পর্দা আছে, পুরো জায়গা জুড়ে উপরে / নীচে / বামে / ডানদিকে বিস্তৃত একই নীতিগুলি এখানে আলোচিত (যদি আপনি আগ্রহী) ব্যবহার করে চারদিকে ছড়িয়ে পড়ে।
— রিনি ভ্যান ডের লেন্ডে
2
দুর্দান্ত আপনি চূড়ান্ত ফলাফল পোস্ট করে অতিরিক্ত মাইল গেছেন। এসও উপর প্রশ্নের উত্তর দেয় আরও অনেক ফলপ্রসূ!
— চুডোস

উত্তর:

4

এটা ব্যবহার করে সমাধান করা সম্ভব max-widthএবং calc()।

প্রথমত, প্রতিস্থাপন width: 100%সঙ্গে flex: 1, CSS এর আছে divs জন্য তাই তারা বেড়ে উঠবে যা এই ক্ষেত্রে উত্তম। এছাড়াও, এর জন্য রূপান্তর ব্যবহার করুন max-width।

এখন, আমাদের কিছু প্রাসঙ্গিক মান সংরক্ষণ করতে হবে:

  • এক্ষেত্রে ডিভের পরিমাণ যা অ্যানিমেটেড হবে ( divsLengthপরিবর্তনশীল) - 3 এই ক্ষেত্রে।
  • এই ক্ষেত্রে স্থির extraSpaceডিভ এবং সীমানা ( পরিবর্তনশীল) - 39px এর জন্য ব্যবহৃত মোট প্রস্থ ।

এই 2 টি ভেরিয়েবলের সাহায্যে আমরা সমস্ত ডিভগুলিতে একটি ডিফল্ট max-width( defaultMaxWidthপরিবর্তনশীল) সেট করতে পারি , পাশাপাশি সেগুলি পরে ব্যবহার করতে পারি। সে কারণেই এগুলি বিশ্বব্যাপী সংরক্ষণ করা হচ্ছে।

defaultMaxWidthহয় calc((100% - extraSpace)/divsLength)।

এখন, ক্লিক ফাংশন প্রবেশ করান:

ডিভটি প্রসারিত করার জন্য, লক্ষ্য পাঠ্যের প্রস্থটি একটি পরিবর্তিত কল হিসাবে সংরক্ষণ textWidthকরা হবে এবং এটি ডিভটিতে max-width.এটি প্রয়োগ করা হবে যেমন এটি ব্যবহার করে .getBoundingClientRect().width(যেহেতু এটি ভাসমান-পয়েন্ট মানটি ফেরায়)।

অবশিষ্ট আছে divs জন্য, এটি একটি তৈরি করা হয় calc()জন্য max-widthযে তাদের প্রয়োগ করা হবে।
এটি হল: calc(100% - textWidth - extraScape)/(divsLength - 1)।
গণনা করা ফলাফলটি প্রতিটি অবশিষ্ট ডিভের প্রস্থ হওয়া উচিত।

প্রসারিত ডিভি-তে ক্লিক করার পরে, স্বাভাবিক অবস্থায় ফিরে আসতে, ডিফল্টটি max-widthআবার সমস্ত .divউপাদানগুলিতে প্রয়োগ করা হয় ।

var expanded = false,
    divs = $(".div:not(:first-child)"),
    divsLength = divs.length,
    extraSpace = 39, //fixed width + border-right widths 
    defaultMaxWidth = "calc((100% - " + extraSpace + "px)/" + divsLength + ")";

    divs.css("max-width", defaultMaxWidth);

$(document).on("click", ".div:not(:first-child)", function (e) {
  var thisInd = $(this).index();

  if (expanded !== thisInd) {
    
    var textWidth = $(this).find('span')[0].getBoundingClientRect().width;  
    var restWidth = "calc((100% - " + textWidth + "px - " + extraSpace + "px)/" + (divsLength - 1) + ")";
    
    //fit clicked fluid div to its content and reset the other fluid divs 
    $(this).css({ "max-width": textWidth });
    $('.div').not(':first').not(this).css({ "max-width": restWidth });
    expanded = thisInd;
  } else {
    //reset all fluid divs
    $('.div').not(':first').css("max-width", defaultMaxWidth);
    expanded = false;
  }
});
.wrapper {
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  border: 1px solid black;
  display: flex;
  justify-content: flex-start;
}

.div {
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid black;
  text-align:center;
}

.div:first-child {
  min-width: 36px;
  background: #999;
}

.div:not(:first-child) {
  flex: 1;
  transition: max-width 1s;
}

.div:not(:first-child) span {
  background: #ddd;
}

.div:last-child {
  border-right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Click on the div you want to fit/reset (except the first div)

<div class="wrapper">

  <div class="div"><span>Fixed</span></div>
  <div class="div"><span>Fluid (long long long long text)</span></div>
  <div class="div"><span>Fluid</span></div>
  <div class="div"><span>Fluid</span></div>

</div>
স্নিপেট প্রসারিত করুন

এই পদ্ধতির গতিশীল আচরণ করে এবং কোনও রেজোলিউশনে কাজ করা উচিত।
হার্ড কোডের জন্য আপনার কেবলমাত্র মূল্যটি extraSpaceভেরিয়েবল।

— Azametzin
সূত্র
1
হ্যাঁ, এটি এমন একটি সমস্যা যার জন্য একটি সুনির্দিষ্ট গণনা এবং ফ্লেক্সবক্স সঙ্কুচিত প্রভাবের বৃহত্তর বোঝার প্রয়োজন। আমার কাছে এখনও একটি "নিখুঁত" সমাধান নেই তবে ভবিষ্যতে আবার চেষ্টা করতে চাই, সুতরাং কীভাবে এটি সঠিকভাবে করা যায় তা বের করার চেষ্টা করার জন্য আমি আপনার প্রশ্নটি আরও একবার বুকমার্ক করেছি। এটি একটি ভাল চ্যালেঞ্জ।
— আজমেটজিন
1
শুধু এফওয়াইআই, আমি কোডটি সম্পাদনা করেছি যেহেতু কোডটি পড়া এবং পরীক্ষার সহজ করে তুলতে। আমি স্প্যান যোগ করেছি যা একটি ভাল সংযোজন। আমি এখনও পর্যন্ত সর্বোচ্চ-প্রস্থের রূপান্তরগুলি যুক্ত করি নি, তারা দুর্দান্ত কাজ করেনি।
— বাচির মেসৌরি
1
কুল। আমি কেবল এটি সমাধান করেছি। আমি উত্তর সম্পাদনা করছি।
— আজমেটজিন
1
নিস! যাইহোক যাইহোক আমি কয়েক ঘন্টা বাইরে
— থাকায়
1
ওহ, আমি আপনার সম্পাদিত মন্তব্যটি দেখেছি (একটি আপডেট মন্তব্য প্রত্যাশী ছিল)। GetBoundingClientRect () এর ব্যবহারটি খুব চালাক এবং এটি আমার কাছে ঘটেনি (39 পিক্সের নির্দিষ্ট প্রস্থকে অ্যাকাউন্টে নেওয়ার জন্য একই)। এটি কোনও উইন্ডো আকার এবং কোনও সংখ্যক ফ্লুইড ডিভের জন্য কাজ করে কিনা তা দেখতে আমি আরও কিছুটা পরীক্ষা করব। আমি আপনি ফিরে পাবেন. আপনাকে অনেক ধন্যবাদ! PS: আপনার সমাধান jQuery 3.3.1 এর সাথে কাজ করে তবে 3.4.1 এর সাথে নয়, কারণ যাই হোক না কেন।
— বাচির মেসৌরি
3

আপনাকে প্রস্থ বা ক্যালক ফাংশনগুলি মোকাবেলা করতে হবে। ফ্লেক্সবক্স একটি সমাধান হবে।

সমস্ত ডিভগুলি সমান করতে (প্রথমটি নয়) আমরা ব্যবহার করি flex: 1 1 auto।

<div class="wrapper">
  <div class="div"><span>Fixed</span></div>
  <div class="div"><span>Fluid (long long long long text)</span></div>
  <div class="div"><span>Fluid</span></div>
  <div class="div"><span>Fluid</span></div>
</div>

আপনার স্বাভাবিক ডিভ এবং নির্বাচিত ডিভের জন্য নমনীয় নিয়মগুলি সংজ্ঞায়িত করুন। transition: flex 1s;তোমার বন্ধু. নির্বাচিত একটির জন্য আমাদের ফ্লেক্স বাড়ার দরকার নেই তাই আমরা ব্যবহার করি flex: 0 0 auto;

.wrapper {
  width: 100%;
  margin-top: 20px;
  border: 1px solid black;
  display: flex;
}

.div {
  white-space: nowrap;
  border-right: 1px solid black;
  transition: flex 1s;
  flex: 1 1 auto;
}

.div.selected{
  flex: 0 0 auto;
}

.div:first-child {
  min-width: 50px;
  background: #999;
  text-align: center;
}

.div:not(:first-child) {
  text-align: center;
}

.div:last-child {
  border-right: 0px;
}

div:not(:first-child) span {
  background: #ddd;
}

ব্যবহারকারী যখন কোনও ডিভিতে ক্লিক করেন তখন প্রতিটি সময় নির্বাচিত ক্লাস যুক্ত করুন। আপনি দ্বিতীয় ক্লিকের জন্যও টগল ব্যবহার করতে পারেন যাতে আপনি একটি মানচিত্রে নির্বাচিত আইটেমগুলি সংরক্ষণ করতে পারেন এবং আপনি একাধিক নির্বাচিত আইটেমগুলি প্রদর্শন করতে পারেন (অবশ্যই এই কোডের উদাহরণ সহ নয়)।

$(document).on("click", ".div:not(:first-child)", function(e) {
  const expanded = $('.selected');
  $(this).addClass("selected");
  if (expanded) {
    expanded.removeClass("selected");
  }
});

https://jsfiddle.net/f3ao8xcj/

— হ্যারিকেন
সূত্র
ধন্যবাদ. আমাকে আপনার কেসটি অধ্যয়ন করতে হবে কারণ এটি আমার যা ইচ্ছা তা তার বিপরীতে করে এবং আমি কীভাবে এখনও এটির বিপরীত করব তা নিশ্চিত নই (সম্ভবত এটি তুচ্ছ)। আমি চাই ডিফল্টরূপে সমস্ত তরল ডিভগুলি সমানভাবে বড় হতে হবে। এটি কেবলমাত্র যখন আমি একটিতে ক্লিক করি যে এটির তার বিষয়বস্তু ফিট করে (এবং অন্যান্য তরল ডিভগুলি একই অংশে সমানভাবে ভাগ করে নেবে)। এবং যদি আমি একই ডিভের উপর দ্বিতীয়বার ক্লিক করি তবে সমস্ত ফ্লুয়েড ডিভস পুনরায় সেট করে, তাদের সামগ্রীর বিষয়ে কোনও উদ্বেগ ছাড়াই আবার স্থানটি সমানভাবে ভাগ করে নেবে। সুতরাং, আমি যদি ভুল না হয়ে থাকি তবে এটি আপনি যা করেছেন তার ঠিক বিপরীত। কীভাবে এটি বিপরীত করা যায় তা এখনও নিশ্চিত নয়।
— বাচির মেসৌরি
যাইহোক, যদি এটি বিপরীত হতে পারে, তবে আমি সত্যিই পছন্দ করি যে আপনার সমাধানটি কতটা মার্জিত এবং কতটা সহজ, কারণ সিএসএস প্রস্থের বৈশিষ্ট্যটি নিয়ে গণ্ডগোলের দরকার নেই। ফ্লেক্স মনে হয় এটি কেবল অভ্যন্তরীণভাবে এটি পরিচালনা করে। এটি বলেছিল, আমার একটা কুঁচকির বিপরীত উপায়ে অর্জন করা আরও কঠিন হবে। অপেক্ষা কর এবং দেখ. ফলোআপের জন্য ধন্যবাদ।
— বাচির মেসৌরি
1
পছন্দ করুন আপডেট সংস্করণ দেখুন।
— হারিকেন
আমি আপনার স্ক্রিপ্টের কমনীয়তা পছন্দ করি তবে আপনার সমাধানগুলি কেবল আমার অনুরোধের অংশগুলি বিবেচনা করে। আমার অনুরোধটি কেবল সামগ্রীটি ফিট করার বিষয়ে নয়, এটি তরল ডিভগুলি ক্লিক করার আগে এবং তারপরে অবশিষ্ট স্থান সমানভাবে ভাগ করে নেওয়া সম্পর্কেও। আপনার স্ক্রিপ্ট এটিকে খুব ভালভাবে সম্বোধন করে না, যদি তা না হয়। এবং এটিই পুরো জিনিসটিকে মস্তিষ্কে বার্নার করে তোলে। আমার প্রয়োজনীয়তাগুলি খুব পরিষ্কার করার জন্য আমি মূল পোস্টে একটি ছবি যুক্ত করেছি। উপরের অন্যান্য স্ক্রিপ্টটি ঠিক সেখানে শুরু হয় যেখানে আপনার বিতরণ করতে ব্যর্থ হয়। এটি অদ্ভুতভাবে মনে হচ্ছে যে আপনার উভয় স্ক্রিপ্টগুলির মিশ্রণ কাজ করতে পারে। আমি পরীক্ষা করছি এবং একবার হয়ে গেলে আমি আপনার কাছে ফিরে আসব।
— বাচির মেসৌরি
@ বাচিরমেসৌউরি আপনি এখানে যে অনুপস্থিত তা হ'ল, আপনার মামলার জন্য কারও পক্ষে নিখুঁত সমাধান দেওয়ার দরকার নেই। Flex transition: Stretch (or shrink) to fit contentআপনার প্রশ্নের শিরোনাম এবং এই উত্তরটি এটি কীভাবে করা যায় তার সহজ উদাহরণ। আপনার মামলার সমাধান খুঁজে পাওয়া আপনার দায়িত্ব।
— হারিকেন
2

কয়েকটি পরীক্ষামূলক সংস্করণের পরে, এটি আমার সবচেয়ে সংক্ষিপ্ত এবং সবচেয়ে সোজা সমাধান বলে মনে হচ্ছে।

যে সমস্ত মূলত প্রয়োজন flexbox প্রসারিত আছে কাজ করতে হবে <div>ডিফল্টরূপে তাদের সীমা উপাদান, কিন্তু <span>ক্লিক করেন, এর প্রসারিত বাধ্যতা <div>থেকে <span>প্রস্থ ...

সুডোকোড:

when <span> clicked and already toggled then <div> max-width = 100%, reset <span> toggle state

otherwise <div> max-width = <span> width, set <span> toggle state

আমি সিএসএসকে সহজেই পড়ার (এবং কোড পুনর্ব্যবহারযোগ্য) বিভাগে 'প্রাসঙ্গিক প্রক্রিয়া' এবং 'কেবলমাত্র আই-ক্যান্ডি' বিভাগে বিভক্ত করেছি।

কোডটি ভারী মন্তব্য করা হয়েছে, এখানে খুব বেশি পাঠ্য নেই ...

Quirk কোনওরকম থেকে transitionস্যুইচ করার সময় অতিরিক্ত বিলম্ব হয় । আমি ক্রোম, এজ, আইই 11 এবং ফায়ারফক্স (সমস্ত ডাব্লু 10) এ এই আচরণটি পরীক্ষা করে দেখেছি এবং সবার মনে হয় এই উদ্বেগ রয়েছে। হয় কিছু ব্রাউজার অভ্যন্তরীণ পুনর্ব্যবহার চলছে, বা হতে পারেdivmax-width: 100%max-width = span widthtransition সময়টি দু'বার ব্যবহৃত হয়েছে ('মনে হচ্ছে')। ভাইস ভার্সা, অদ্ভুতভাবে যথেষ্ট, কোনও অতিরিক্ত বিলম্ব নেই।

যাইহোক, একটি সংক্ষিপ্ত রূপান্তর সময়ের সাথে (উদাহরণস্বরূপ 150 মিমি, এখন যেমন আমি ব্যবহার করছি) এই অতিরিক্ত বিলম্বটি / খুব কমই লক্ষণীয়। (অন্য একটি প্রশ্নের জন্য খুব ভাল ...)

কোড স্নিপেট দেখান

হালনাগাদ

নতুন সংস্করণ যা অন্য সকলকে পুনরায় সেট করে <div>। আমি সত্যিই লাফালাফি ঘৃণা করি তবে এটি ফ্লেক্সবক্স স্ট্রেচিং এবং transitionমানের কারণে । ছাড়াtransitionকোনও জাম্প দৃশ্যমান। আপনার জন্য কী কাজ করে তা চেষ্টা করা দরকার।

আমি কেবল document.querySelectorAll()জাভাস্ক্রিপ্ট কোডে যুক্ত করেছি।

কোড স্নিপেট দেখান

— রেনে ভ্যান ডের লেন্ডে
সূত্র
আপনার প্রস্তাবের জন্য আপনাকে অনেক ধন্যবাদ। এটি আমার প্রয়োজনের সাথে খাপ খায় না (তবে এটি একটি খুব ভাল সূচনা পয়েন্ট) যেমন আমরা যখন তরল ডিভিতে ক্লিক করি তখন এটি ঠিক ফিট হয় তবে অন্য দুটি ডিভগুলি অবশিষ্ট স্থান দখল করতে সমানভাবে প্রসারিত হয় না। যা ইস্যুর 50%। এবং হ্যাঁ, এই উদাসীনতা আছে। আজমেটজিনের স্ক্রিপ্টটি কোনও নিরবচ্ছিন্নতার সাথে 100% কাজ করে .. আমি তার স্ক্রিপ্ট এবং সর্বাধিক প্রস্থের পরিবর্তে ফ্লেক্স ট্রানজিশনের ব্যবহার দুটি মিশ্রিত করেছিলাম এবং এটি একটি কবজির মতো কাজ করে। আপনার সাহায্যের জন্য আপনাকে অনেক ধন্যবাদ !
— বাচির মেসৌরি
দ্বিতীয় @ আজমেটজিনের মন্তব্য: এই কাহিনিতে অনেক মজার দিন ছিল। :)। পরের বারে ছবিটি দিয়ে শুরু করবেন?
— রিনি ভ্যান ডের লেন্ডে
ঠিক আছে. আমি ভেবেছিলাম ব্যাখ্যাটি যথেষ্ট তবে স্পষ্টতই আমি ভুল ছিলাম। গতকাল থেকেই ছবিটি রয়েছে। তবে আমি আপনার বক্তব্য পেতে। আমি কয়েক মিনিটের মধ্যে আমার কাস্টম স্ক্রিপ্টটি দেখানোর জন্য আমার আসল বার্তাটি সম্পাদনা করব। আপনাকে অনেক ধন্যবাদ !
— বাচির মেসৌরি
আসল পোস্ট কাস্টম সমাধান সঙ্গে আপডেট!
— বাচির মেসৌরি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.