jQuery - দৃশ্যমান না হলে উপাদানগুলির প্রস্থ পান (প্রদর্শন: কিছুই নয়)

Question

এটি jQuery এর মতো মনে হয় যখন কোনও উপাদান দৃশ্যমান প্রস্থের () প্রদান করে না। 0 বোঝায়, তবে পিতামাতাকে দেখানোর আগে পিতামাতার প্রস্থটি নির্ধারণ করার জন্য আমার একটি টেবিলের প্রস্থ নেওয়া দরকার।

নীচে উল্লিখিত হিসাবে, পিতামাতার মধ্যে একটি পাঠ্য রয়েছে, যা পিতামাতাকে স্কিউ করে এবং খারাপ লাগবে। আমি চাই পিতামাতার কেবল টেবিলের মতোই প্রশস্ত হোক এবং পাঠ্য মোড়ানো হোক।

<div id="parent">
    Text here ... Can get very long and skew the parent
    <table> ... </table>
    Text here too ... which is why I want to shrink the parent based on the table
</div>

সিএসএস:

#parent
{
    display: none;
}

javascript:

var tableWidth = $('#parent').children('table').outerWidth();
if (tableWidth > $('#parent').width())
{
    $('#parent').width(tableWidth);
}

টেবিল প্রস্থ সর্বদা 0 প্রদান করে যেহেতু এটি দৃশ্যমান নয় (আমার ধারণা এটি যেহেতু এটি আমাকে দৃশ্যমান হওয়ার সময় একটি নম্বর দেয়)। পিতামাতাকে দৃশ্যমান না করে টেবিলটির প্রস্থ পাওয়ার কোনও উপায় আছে কি?

Answer 1

এখানে আমি ব্যবহার করেছি একটি কৌশল। এতে jQueryটিকে উপাদানটি দৃশ্যমান বলে মনে করার জন্য কয়েকটি সিএসএস বৈশিষ্ট্য যুক্ত করা জড়িত, তবে বাস্তবে এটি এখনও গোপন।

var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });

এটি হ্যাকের মতো, তবে এটি আমার পক্ষে ভাল কাজ করেছে বলে মনে হয়।

হালনাগাদ

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

রেফারেন্স করা ব্লগ পোস্ট থেকে কোড:

//Optional parameter includeMargin is used when calculating outer dimensions  
(function ($) {
$.fn.getHiddenDimensions = function (includeMargin) {
    var $item = this,
    props = { position: 'absolute', visibility: 'hidden', display: 'block' },
    dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
    $hiddenParents = $item.parents().andSelf().not(':visible'),
    includeMargin = (includeMargin == null) ? false : includeMargin;

    var oldProps = [];
    $hiddenParents.each(function () {
        var old = {};

        for (var name in props) {
            old[name] = this.style[name];
            this.style[name] = props[name];
        }

        oldProps.push(old);
    });

    dim.width = $item.width();
    dim.outerWidth = $item.outerWidth(includeMargin);
    dim.innerWidth = $item.innerWidth();
    dim.height = $item.height();
    dim.innerHeight = $item.innerHeight();
    dim.outerHeight = $item.outerHeight(includeMargin);

    $hiddenParents.each(function (i) {
        var old = oldProps[i];
        for (var name in props) {
            this.style[name] = old[name];
        }
    });

    return dim;
}
}(jQuery));

Comments

এটি কি ব্রাউজারটি পৃষ্ঠাটি দু'বার পুনরায় আঁকবে না? যদি তা হয় তবে এটি একটি সাবঅপটিমাল সমাধান।

— মার্কুস্ক্লাস

@ টিম ব্যাংকগুলি খুব সুন্দর! আমি আসলে একটি অনুরূপ এক্সটেনশন লিখেছি। ফায়ারফক্সে যা আমি লক্ষ্য করছি তা হ'ল আপনার এবং আমার প্লাগইন উভয়ের জন্যই প্রস্থ () 0 প্রদান করে। এবং সর্বোপরি এটি প্যাডিংয়ে কখনই ফ্যাক্টর হয় না। jsfiddle.net/67cgB । এটির সমাধানের জন্য আর কী করতে পারে তা নির্ধারণ করার জন্য আমার সবচেয়ে কঠিন সময় কাটাচ্ছে।

— মার্ক পাইসাক - ট্রিলন.ও

লুকানো অ্যাকর্ডিয়নের মাত্রা পেতে আমি কীভাবে এই হ্যাকটি জ্যাকোরি অ্যাকর্ডিয়নের অভ্যন্তরে ব্যবহার করতে পারি? আপনার একটি সহায়তা দরকার।

— দীপক ইনগোলে

@ ফারকোসিকিউ আমি উল্লেখ করা ব্লগ পোস্ট থেকে কোডটি যুক্ত করেছি।

— টিম ব্যাংকস

.আন্ডসেল্ফ () jQuery 1.8+ এ অবচয় করা হয়েছে এবং jQuery 3+ এ সরানো হয়েছে । যদি আপনি jQuery 1.8+ ব্যবহার করেন তবে .addBack () দিয়ে .andSelf () প্রতিস্থাপন করুন ।

— টিম

Answer 2

function realWidth(obj){
    var clone = obj.clone();
    clone.css("visibility","hidden");
    $('body').append(clone);
    var width = clone.outerWidth();
    clone.remove();
    return width;
}
realWidth($("#parent").find("table:first"));

Comments

নোংরা সুন্দর কৌশল !!! ক্লোনটির সঠিক CSS বৈশিষ্ট্য রয়েছে কিনা তা নিশ্চিত করুন (উদাহরণস্বরূপ, মূল উপাদানটির ফন্টের আকার 15 হলে আপনার ক্লোন কোড ("দৃশ্যমানতা", "লুকানো") ব্যবহার করা উচিত। সিএসএস ("হরফ-আকার", "15px" );)

— এলেক্স

কেবল উল্লেখ করার জন্য, যদি আপনার উপাদানটি কোনও পিতামাতার কাছ থেকে প্রস্থের উত্তরাধিকার সূত্রে প্রাপ্ত হয় তবে এটি কাজ করবে না। এটি কেবলমাত্র দেহের প্রস্থের উত্তরাধিকারী হবে যা ভুল।

— ডিন

আমি পরিবর্তিত clone.css("visibility","hidden");করতে clone.css({"visibility":"hidden", "display":"table"});যা সমাধান করা সমস্যা @Dean দ্বারা নির্দিষ্ট

— isapir

দুর্দান্ত, ধন্যবাদ! এটি আমার ক্ষেত্রে সামান্য পরিবর্তন নিয়ে কাজ করেছে: আমি ক্লোন করার জন্য কোনও অবজেক্টকে সমর্থন করার জন্য এটির পরিবর্তক করেছি এবং এর প্রকৃত প্রস্থ পাওয়ার জন্য এটির মধ্যে একজন নির্বাচক রয়েছে। সমস্ত সময় আমরা গোপন যে একই মূল অবজেক্টটি পরিমাপ করতে চাই না।

— falsarella

আমি একই পদ্ধতির ব্যবহার করতাম এবং আমি সেদিন ডাউনভোটদের একগুচ্ছ পেলাম। আপনার কাছে এতগুলি উদ্দীপনা রয়েছে বলে অদ্ভুত: ডি আমি আপনাকে বলব কেন এটি খারাপ সমাধান এবং কয়েক বছর আগে আমার উত্তরের নীচে কী নির্দেশ করা হয়েছিল। একবার আপনি উপাদানটি অনুলিপি করে সরাসরি শরীরের মধ্যে রাখলে, অবশ্যই আপনি এই নির্দিষ্ট উপাদান সম্পর্কিত সমস্ত সিএসএস সরিয়ে ফেলছেন। উদাহরণ স্বরূপ. এই থেকে: #some wrapper .hidden_element{/*Some CSS*/}আপনি এই উপার্জন করছেন যারা body .hidden_element। আর #some_wrapper .hidden_elementব্যবহার হয় না! ফলস্বরূপ, আপনার গণনা করা আকারটি এটির মূল আকার থেকে পৃথক হতে পারে। টিএলটিআর: আপনি কেবল শৈলীগুলি হারাচ্ছেন

— পরিবর্তে

Answer 3

রবার্টস উত্তর উপর ভিত্তি করে, এখানে আমার ফাংশন। এটি আমার জন্য কাজ করে যদি উপাদান বা এর পিতামাতাকে jQuery এর মাধ্যমে ম্লান করে দেওয়া হয় তবে হয় অভ্যন্তরীণ বা বাহ্যিক মাত্রা পেতে পারে এবং অফসেট মানগুলিও ফেরত পেতে পারে।

/ edit1: ফাংশনটি আবার লিখুন। এটি এখন আরও ছোট এবং সরাসরি অবজেক্টে কল করা যেতে পারে

/ সম্পাদনা 2: ফাংশনটি এখন দেহের পরিবর্তে মূল উপাদানটির ঠিক পরে ক্লোনটি প্রবেশ করবে, ফলে ক্লোনটির পক্ষে উত্তরাধিকার সূত্রে প্রাপ্ত মাত্রাগুলি বজায় রাখা সম্ভব হবে।

$.fn.getRealDimensions = function (outer) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .insertAfter($this);        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();
    return result;
}

var dimensions = $('.hidden').getRealDimensions();

Comments

যাদের প্রয়োজন তাদের জন্য ওয়াইউআই

— কোড

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

— টেরি

Answer 4

উপরে রিয়েলউইথ ফাংশন পোস্ট করার জন্য আপনাকে ধন্যবাদ, এটি সত্যিই আমাকে সাহায্য করেছে। উপরের "রিয়েলউইথ" ফাংশনের উপর ভিত্তি করে আমি লিখেছি, একটি সিএসএস রিসেট, (নীচে বর্ণিত কারণ)।

function getUnvisibleDimensions(obj) {
    if ($(obj).length == 0) {
        return false;
    }

    var clone = obj.clone();
    clone.css({
        visibility:'hidden',
        width : '',
        height: '',
        maxWidth : '',
        maxHeight: ''
    });
    $('body').append(clone);
    var width = clone.outerWidth(),
        height = clone.outerHeight();
    clone.remove();
    return {w:width, h:height};
}

"রিয়েলউইথ" একটি বিদ্যমান ট্যাগের প্রস্থ পায়। আমি কিছু চিত্র ট্যাগ দিয়ে এটি পরীক্ষা করেছি। সমস্যাটি ছিল, যখন চিত্রটি প্রতি প্রস্থে (বা সর্বোচ্চ-প্রস্থ) সিএসএস মাত্রা দিয়েছে, আপনি কখনই সেই চিত্রটির আসল মাত্রা পাবেন না। সম্ভবত, আইএমজিটির "সর্বোচ্চ-প্রস্থ: 100%" রয়েছে, "রিয়েলউইথ" ফাংশন এটি ক্লোন করে এবং এটি শরীরে সংযোজন করে। যদি চিত্রটির আসল আকারটি শরীরের চেয়ে বড় হয়, তবে আপনি দেহের আকার পাবেন এবং সেই চিত্রটির আসল আকার নয়।

Answer 5

আমি লুকানো উপাদানগুলির জন্য কার্যকারী ফাংশন সন্ধান করার চেষ্টা করি তবে আমি বুঝতে পারি যে সিএসএস প্রত্যেকের চেয়ে অনেক জটিল। সিএসএস 3 এ অনেকগুলি নতুন লেআউট কৌশল রয়েছে যা পূর্ববর্তী সমস্ত উত্তরের মতো নমনীয় বাক্স, গ্রিড, কলাম বা জটিল প্যারেন্ট উপাদানগুলির মধ্যে এমনকি উপাদানটির জন্য কাজ না করে।

ফ্লেক্সিবক্স উদাহরণ

আমি মনে করি একমাত্র টেকসই এবং সহজ সমাধান হ'ল রিয়েল-টাইম রেন্ডারিং । সেই সময়ে, ব্রাউজারে আপনাকে সেই সঠিক উপাদানটির আকার দেওয়া উচিত ।

দুঃখজনকভাবে, জাভাস্ক্রিপ্ট উপাদান প্রদর্শিত বা লুকানো যখন তা অবহিত করার জন্য কোনও সরাসরি ইভেন্ট সরবরাহ করে না। যাইহোক, আমি ডিওএম অ্যাট্রিবিউট মোডিফাইড এপিআইয়ের উপর ভিত্তি করে কিছু ফাংশন তৈরি করি যা যখন উপাদানটির দৃশ্যমানতা পরিবর্তন হয় তখন কলব্যাক ফাংশন সম্পাদন করে।

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

আরও তথ্যের জন্য, দয়া করে আমার প্রকল্প গিটহাব দেখুন at

https://github.com/Soul-Master/visible.event.js

ডেমো: http://jsbin.com/ETiGIre/7

Comments

এটি এতটা সত্য বলে সিএসএসের চেয়ে অনেক জটিল ...

— ডিজিটাল

Answer 6

যদি আপনার কোনও গোপনীয়তার প্রস্থের প্রয়োজন হয় এবং যেকোন কারণে আপনি এটিকে গোপন করতে পারবেন না, আপনি এটি ক্লোন করতে পারেন, সিএসএস পরিবর্তন করতে পারেন যাতে এটি পৃষ্ঠাটি প্রদর্শন করে, অদৃশ্য করে তোলে এবং তারপরে এটি পরিমাপ করে। এটি লুকানো এবং পরে মুছে ফেলা থাকলে ব্যবহারকারীর কেউই জ্ঞানী হবে না।

এখানে অন্যান্য উত্তরগুলির মধ্যে কিছু কেবল দৃশ্যমানতাটি লুকিয়ে রাখে যা কাজ করে তবে এটি সেকেন্ডের ভগ্নাংশের জন্য আপনার পৃষ্ঠায় একটি ফাঁকা স্থান গ্রহণ করবে।

উদাহরণ:

$itemClone = $('.hidden-item').clone().css({
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    }).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();

Comments

লেআউট স্তরক্রমের উপর ভিত্তি করে মৌলিক মাত্রাগুলি কোনও পিতামাতার ধারক বা আরও জটিল সিএসএস নির্বাচক দ্বারা প্রভাবিত হলে এটি কাজ করবে না।

— সেবাস্তিয়ান নওক

Answer 7

প্রস্থটি নেওয়ার আগে পিতামাতাকে প্রদর্শন প্রদর্শন করুন, তারপরে প্রস্থটি নিন এবং অবশেষে পিতামাতাকে প্রদর্শন গোপন করুন। ঠিক যেমন অনুসরণ করা

$('#parent').show();
var tableWidth = $('#parent').children('table').outerWidth();
 $('#parent').hide();
if (tableWidth > $('#parent').width())
{
    $('#parent').width() = tableWidth;
}

Answer 8

একটি সমাধান, যদিও এটি সমস্ত পরিস্থিতিতে কাজ করে না, এটি হল অস্বচ্ছটিকে 0 এ সেট করে উপাদানটি আড়াল করা A একটি সম্পূর্ণ স্বচ্ছ উপাদানটির প্রস্থ থাকবে।

ফিরে আসার বিষয়টি হ'ল উপাদানটি এখনও স্থান গ্রহণ করবে, তবে এটি সব ক্ষেত্রেই কোনও সমস্যা হবে না।

উদাহরণ স্বরূপ:

$(img).css("opacity", 0)  //element cannot be seen
width = $(img).width()    //but has width

Answer 9

এখানে বেশিরভাগ সমাধানের দ্বারা মিস হওয়া সবচেয়ে বড় সমস্যাটি হ'ল এইচটিএমএল এ স্কোপ করা হয় তার উপর ভিত্তি করে কোনও উপাদানের প্রস্থ প্রায়শই সিএসএস দ্বারা পরিবর্তিত হয়।

আমি যদি কোনও উপাদানটির অফসেটউইথটি শরীরের সাথে যুক্ত করে যখন এটির শৈলী থাকে যা কেবলমাত্র তার বর্তমান স্কোপে প্রয়োগ হয় তবে আমি ভুল প্রস্থটি পেতে পারি।

উদাহরণ স্বরূপ:

// CSS

.মডিউল-ধারক। মাই-এলেম {সীমানা: 60px শক্ত কালো; }

এখন যখন আমি শরীরের প্রসঙ্গে আমার-এলেমের প্রস্থ নির্ধারণ করার চেষ্টা করব তখন এটি 120px দ্বারা বের হয়ে যাবে। পরিবর্তে আপনি মডিউল ধারকটি ক্লোন করতে পারেন, তবে আপনার জেএসকে এই বিবরণগুলি জানতে হবে না।

আমি এটি পরীক্ষা করে দেখিনি তবে মূলত সোল_মাস্টারের সমাধানটি কেবলমাত্র সঠিকভাবে কাজ করতে পারে বলে মনে হয়। তবে দুর্ভাগ্যক্রমে বাস্তবায়নের দিকে তাকালে এটি সম্ভবত ব্যবহারের জন্য ব্যয়বহুল এবং কার্য সম্পাদনের জন্য খারাপ হবে (এখানে উপস্থাপিত বেশিরভাগ সমাধান যেমন রয়েছে তেমনই রয়েছে।)

যদি সম্ভব হয় তবে দৃশ্যমানতাটি ব্যবহার করুন: পরিবর্তে লুকানো। এটি এখনও উপাদানটিকে রেন্ডার করবে, আপনাকে সমস্ত হট্টগোল ছাড়াই প্রস্থ গণনা করতে দেয় allowing

Answer 10

টিম ব্যাংকগুলির পোস্ট করা উত্তর ছাড়াও , যা আমার সমস্যাটি সমাধান করার পরে আমাকে একটি সাধারণ জিনিস সম্পাদনা করতে হয়েছিল।

অন্য কারও একই সমস্যা হতে পারে; আমি একটি ড্রপডাউনে একটি বুটস্ট্র্যাপ ড্রপডাউন নিয়ে কাজ করছি। তবে পাঠ্যটি এই মুহুর্তে বর্তমান সামগ্রী হিসাবে আরও বিস্তৃত হতে পারে (এবং এটি CSS এর মাধ্যমে সমাধান করার অনেক ভাল উপায় নেই)।

আমি ব্যবহার করতাম:

$table.css({ position: "absolute", visibility: "hidden", display: "table" });

পরিবর্তে, যা ধারকটি একটি টেবিলের জন্য সেট করে যা সামগ্রীগুলি আরও বিস্তৃত হলে সর্বদা প্রস্থে স্কেল করে।

Answer 11

jQuery(".megamenu li.level0 .dropdown-container .sub-column ul .level1").on("mouseover", function () {
    var sum = 0;
    jQuery(this).find('ul li.level2').each(function(){
    sum -= jQuery(this).height();
    jQuery(this).parent('ul').css('margin-top', sum / 1.8);
    console.log(sum);
    });
});

হোভারে আমরা তালিকা আইটেমের উচ্চতা গণনা করতে পারি।

Answer 12

আগেই বলা হয়েছে, ক্লোন এবং অন্য কোথাও সংযুক্ত পদ্ধতি স্টাইলিং ভিন্ন হতে পারে বলে একই ফলাফলের গ্যারান্টি দেয় না।

নীচে আমার পদ্ধতির রয়েছে। এটি লুকানোর জন্য দায়বদ্ধ পিতামাতার সন্ধানে পিতামাতাকে ভ্রমণ করে, তারপরে অস্থায়ীভাবে প্রয়োজনীয় প্রস্থ, উচ্চতা ইত্যাদি গণনা করার জন্য এটিকে লুকায়িত করে

    var width = parseInt($image.width(), 10);
    var height = parseInt($image.height(), 10);

    if (width === 0) {

        if ($image.css("display") === "none") {

            $image.css("display", "block");
            width = parseInt($image.width(), 10);
            height = parseInt($image.height(), 10);
            $image.css("display", "none");
        }
        else {

            $image.parents().each(function () {

                var $parent = $(this);
                if ($parent.css("display") === "none") {

                    $parent.css("display", "block");
                    width = parseInt($image.width(), 10);
                    height = parseInt($image.height(), 10);
                    $parent.css("display", "none");
                }
            });
        }
    }