ডিভিতে উপচে পড়া উপাদান রয়েছে কিনা তা jquery দিয়ে পরীক্ষা করুন

Question

আমার একটি নির্দিষ্ট উচ্চতা এবং একটি ডিভ রয়েছে overflow:hidden;

আমি jQuery দিয়ে যাচাই করতে চাই যদি ডিভের এমন উপাদান থাকে যা ডিভের নির্দিষ্ট উচ্চতা পেরিয়ে যায়। কিভাবে আমি এটি করতে পারব?

Comments

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

— অ্যাডেনিও

হ্যাঁ, আমি যাচাই করার জন্য ভাবছিলাম যে ডিভের শীর্ষের অবস্থান এবং ডিভের অভ্যন্তরে শেষ সন্তানের উপাদানটির নীচের অবস্থানের মধ্যে পার্থক্য ডিভের উচ্চতার চেয়ে বেশি ছিল

— জাস্টিন মেল্টজার

জ্যাকুরি ব্যবহার করে সনাক্তকারী উপাদানগুলির ওভারফ্লোর

— নয়েও

Answer 1

ওভারফ্লো হচ্ছে কিনা তা যাচাই করার জন্য আপনার আসলে কোনও জিকুয়ের দরকার নেই। ব্যবহার element.offsetHeight, element.offsetWidth, element.scrollHeightএবং element.scrollWidthআপনি নির্ধারণ করতে পারেন যদি আপনার উপাদান এটা আকারের তুলনায় বিষয়বস্তু বড় আছে:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

ক্রিয়ায় উদাহরণ দেখুন: ফিডল

তবে আপনি যদি জানতে চান যে আপনার এলিমেন্টের ভিতরে কোন উপাদানটি দৃশ্যমান কিনা বা না হয় তবে আপনার আরও গণনা করা দরকার। দৃশ্যমানতার দিক থেকে শিশু উপাদানের জন্য তিনটি রাষ্ট্র রয়েছে:

আপনি যদি আধা-দৃশ্যমান আইটেমগুলি গণনা করতে চান তবে এটি আপনার প্রয়োজনীয় স্ক্রিপ্ট হবে:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

এবং আপনি যদি আধা-দৃশ্যমান গণনা করতে না চান তবে আপনি কিছুটা পার্থক্য নিয়ে গণনা করতে পারেন।

Comments

আমি ভুল হলে আমাকে সংশোধন করুন তবে এটি আর কোনও Chrome V.20.0.1132.57 তে কাজ করছে বলে মনে হচ্ছে না। আপনি যদি ডিভের

— রবি

@ রবি <p>একটি ব্লক স্তর উপাদান এবং 100% প্রস্থ নেয়। আপনি যদি পি এর ভিতরে টেক্সট পরিমাণ সহ এটি চেষ্টা করতে চান তবে তৈরি করুন p{display:inline}। এই ভাবে পাঠ্যটি এর প্রস্থ নির্ধারণ করে p।

— মোহসেন

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

— মাইকেল জে। ক্যালকিনস

বেশিরভাগ ক্ষেত্রে কাজ করে তবে সিএসএস টেবিলগুলির সাথে দৃশ্যের আচ্ছাদন করবে না (প্রদর্শন টেবিল-সেল, টেবিল-রো, টেবিল) -

— দিমিত্রি

আমি বুঝতে পারি অফসেটহাইটে সীমানা অন্তর্ভুক্ত রয়েছে, যা স্ক্রোলযোগ্য ক্ষেত্রের দিকে গণনা করে না। শুধু একটি নোট. (আমি ভুল হলে আমাকে সংশোধন করুন)

— লোডেভিজক

Answer 2

আমার ওপি-র মতো একই প্রশ্ন ছিল এবং সেগুলির উত্তরগুলির কোনওটিরই আমার প্রয়োজন অনুসারে নয়। সরল প্রয়োজনের জন্য আমার একটি সহজ শর্ত দরকার ছিল।

আমার উত্তর এখানে:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

এছাড়াও, আপনি পরিবর্তন করতে পারেন scrollWidthদ্বারা scrollHeightআপনি উভয় ক্ষেত্রেই পরীক্ষা করার প্রয়োজন হলে।

Comments

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

— মিখাইল-টি

প্যাডিং / মার্জিন সহ উপাদানগুলির জন্য কাজ করে না। বাহিরের প্রস্থের সত্য (সত্য) ইনস্ট্রড ব্যবহার করুন

— ভ্লাদিমির শমিট

যেমন কাজ করে না, মজিলা এবং ক্রোমে সূক্ষ্মভাবে কাজ করে।

— সুশীল কুমার

এই স্ক্রিপ্টটির সাথে আমার কিছু অদ্ভুত প্রভাব রয়েছে। Chrome এ পরীক্ষা করা হচ্ছে। আমি এটি উচ্চতা পরীক্ষা করতে (আউটারহাইট ব্যবহার করে) পুনরায় লিখেছিলাম এবং যদি আমি স্ক্রিপ্টটি পরীক্ষা করতে কোনও পৃষ্ঠা পুনরায় লোড করতে F5 ব্যবহার করি বা অন্য পৃষ্ঠা থেকে নেভিগেট করি তবে এটি সর্বদা ওভারফ্লো = সত্য হিসাবে ফিরে আসে তবে আমি যদি সিটিআরএল-এফ 5 ব্যবহার করি তবে এটি আসে ওভারফ্লো হিসাবে ফিরে = মিথ্যা। এটি এমন পরিস্থিতি পরীক্ষা করার সময় যা মিথ্যা ফিরে আসার কথা। যখন এটি সত্য হওয়ার কথা এটি সর্বদা কার্যকর হয়।

— ডেনিস

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

— ডেনিস

Answer 3

সুতরাং আমি উপচে পড়া জ্যাকোয়ারি লাইব্রেরিটি ব্যবহার করেছি: https://github.com/kevinmarx/overflowing

লাইব্রেরি ইনস্টল করার পরে, আপনি যদি overflowingসমস্ত উপচে পড়া উপাদানগুলিতে শ্রেণি নির্ধারণ করতে চান তবে আপনি কেবল চালান:

$('.targetElement').overflowing('.parentElement')

এটি ক্লাসটি দেবে overflowing, যেমন <div class="targetElement overflowing">উপচে পড়া সমস্ত উপাদানগুলিতে। এরপরে আপনি এটিকে কোনও ইভেন্ট হ্যান্ডলার (ক্লিক, মাউসওভার) বা অন্যান্য ফাংশনে যুক্ত করতে পারেন যা উপরের কোডটি চালাবে যাতে এটি গতিশীলভাবে আপডেট হয়।

Answer 4

আংশিকভাবে মোহসেনের উত্তরের উপর ভিত্তি করে (যুক্ত হওয়া প্রথম শর্তটি সেই সন্তানের পিতা-মাতার সামনে লুকিয়ে রয়েছে সেই ক্ষেত্রে এটি কভার করে):

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);
};

তারপরে কেবল করুন:

jQuery('#parent').isChildOverflowing('#child');

Answer 5

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

http://jsfiddle.net/ukvBf/

Answer 6

সরল ইংরাজীতে: প্যারেন্ট উপাদানটি পান। এটির উচ্চতা পরীক্ষা করুন এবং সেই মানটি সংরক্ষণ করুন। তারপরে সমস্ত শিশু উপাদান থেকে লুপ করুন এবং তাদের পৃথক উচ্চতা পরীক্ষা করুন check

এটি নোংরা, তবে আপনি প্রাথমিক ধারণাটি পেতে পারেন: http://jsfiddle.net/VgDgz/

Comments

এটি একটি ভাল উদাহরণ, তবে অবস্থান সম্পর্কে কী। যদি কোনও উপাদান পিতামাতার শীর্ষে সমস্ত পথে নিখুঁতভাবে অবস্থান করে তবে উচ্চতা কম থাকলেও পিতামাতার পক্ষে এটি উপচে পড়তে পারে।

— অ্যাডিনিও

অবশ্যই, সম্ভবত বেশ কয়েকটি পৃথক ক্ষেত্রে এর কারণ হতে পারে। কোথায় শুরু হতে পারে তার একটি দ্রুত উদাহরণ। ওপ-এর নির্দিষ্ট ক্ষেত্রে সম্ভবত

— কীটি

Answer 7

এখানে একটি খাঁটি jQuery সমাধান আছে, তবে এটি বরং অগোছালো:

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}

Answer 8

এটি আমার জন্য কাজ করা jQuery সমাধান। offsetWidthইত্যাদি কাজ করেনি।

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

এই কাজ না করে তাহলে, নিশ্চিত করুন যে উপাদান 'মূল পছন্দসই প্রস্থ আছে (ব্যক্তিগতভাবে, আমি ব্যবহার করতে হয়েছে parent().parent())। positionপিতা বা মাতা আপেক্ষিক নয়। আমিও অন্তর্ভুক্ত করেছি extra_widthকারণ আমার উপাদানের ( "ট্যাগ") ইমেজ যা ছোট সময় লাগতে থাকে লোড করুন, তবে ফাংশন কলের সময় তাদের শূন্য প্রস্থ রয়েছে, গণনাটি নষ্ট করে দিচ্ছে that

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

আশাকরি এটা সাহায্য করবে.

Answer 9

ওভারফ্লো হয়ে যাওয়াতে আমি আরও একটি ডিভ যোগ করে এটি ঠিক করেছি। তারপরে আপনি 2 ডিভের উচ্চতা তুলনা করুন।

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

এবং জেএস

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

এটি সহজ দেখাচ্ছে ...