JQuery এর সাথে অন্য উপাদানটির সাথে তুলনামূলকভাবে একটি উপাদান কীভাবে রাখবেন?

Question

আমার একটি লুকানো ডিআইভি রয়েছে যাতে একটি সরঞ্জামদণ্ডের মতো মেনু থাকে।

আমার কাছে অনেকগুলি ডিআইভি রয়েছে যা মাউস তাদের উপরের উপরে চলে যাওয়ার পরে মেনু ডিআইভি প্রদর্শন করতে সক্ষম হয়।

একটি অন্তর্নির্মিত ফাংশন আছে যা মেনু ডিআইভিকে সক্রিয় (মাউস হোভার) ডিআইভির উপরের ডানদিকে নিয়ে যাবে? আমি এরকম কিছু খুঁজছি$(menu).position("topright", targetEl);

Comments

কটাক্ষপাত আছে stackoverflow.com/questions/8400876/... যা ঠিকানাগুলি এত বেশি সমস্যার যা ঘটতে পারে

— Toskan

দয়া করে দেখুন "প্রশ্নগুলি তাদের শিরোনামে" ট্যাগ "অন্তর্ভুক্ত করা উচিত?" , যেখানে sensক্যমত্য "না, তাদের উচিত নয়"!

— Andreas Niedermair

@ পল হ্যাঁ, শৈলীতে কিছুটা পার্থক্য রয়েছে। এই প্রশ্নের প্রাথমিক শিরোনামটি jQuery সহ উপস্থাপিত হয়েছিল: যা উত্সাহিত হয় না। সাধারণত, প্রশ্নের অতিরিক্ত ট্যাগিংয়ের কারণে, যা উপসর্গটিকে অকেজো করে তোলে। যদি শিরোনামে প্রযুক্তির প্রয়োজন হয়, তবে এটি কেবল একটি উপসর্গ নয়, একটি সত্য বাক্যে বন্দী করা উচিত - কারণ এটি ট্যাগগুলির জন্য।

— Andreas Niedermair

Answer 1

দ্রষ্টব্য: এর জন্য jQuery UI প্রয়োজন (কেবল jQuery নয়)।

আপনি এখন ব্যবহার করতে পারেন:

$("#my_div").position({
    my:        "left top",
    at:        "left bottom",
    of:        this, // or $("#otherdiv")
    collision: "fit"
});

দ্রুত অবস্থানের জন্য ( jQuery UI / অবস্থান )।

আপনি এখানে jQuery UI ডাউনলোড করতে পারেন ।

Comments

আমি পজিটোন প্লাগইনটি ব্যবহার করার চেষ্টা করছি তবে কোনও কারণে আমি এটি কাজ করতে পারি না :(

— সালমান এ

এছাড়াও আমার জন্য কাজ করে না। এটির উপরে শরীরের উপরে একটি সরল কঠিন রঙের ডিভি অবস্থান করতে চেষ্টা করার ফলে এটি উপরের বামদিকে 17 পিক্সেল বন্ধ হয়ে গেছে।

— বেগুন জেফ

মনে রাখবেন যে এই উত্তরটি কেবল jQuery নয়, jQueryUI এর উপর নির্ভর করে। এটি আপনার কয়েকজনের জন্য কেন কাজ করছে না তা ব্যাখ্যা করুন।

— বিটিউবস

Answer 2

tl; dr: (এটি এখানে চেষ্টা করুন )

আপনার যদি নিম্নলিখিত HTML থাকে:

<div id="menu" style="display: none;">
   <!-- menu stuff in here -->
   <ul><li>Menu item</li></ul>
</div>

<div class="parent">Hover over me to show the menu here</div>

তাহলে আপনি নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি ব্যবহার করতে পারেন:

$(".parent").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});

কিন্তু কাজ করে না!

এটি মেনু এবং স্থানধারকটির অফসেট প্যারেন্ট হিসাবে যতক্ষণ কাজ করবে। যদি সেগুলি না হয় এবং আপনার কাছে নেস্টেড সিএসএস বিধি নেই যা ডিওমে #menuউপাদানটি কোথায় রয়েছে সেদিকে খেয়াল রাখে :

$(this).append($("#menu"));

লাইনের ঠিক আগে #menuউপাদানটি অবস্থান করে ।

কিন্তু এটি এখনও কাজ করে না!

আপনার কিছু অদ্ভুত লেআউট থাকতে পারে যা এই পদ্ধতির সাথে কাজ করে না। সেক্ষেত্রে কেবল jQuery.ui এর অবস্থান প্লাগইন ( নীচের উত্তরে উল্লিখিত হিসাবে ) ব্যবহার করুন, যা প্রতিটি অনুমেয় ঘটনাকে পরিচালনা করে। মনে রাখবেন show()কল করার আগে আপনার মেনু উপাদানটি থাকতে হবে position({...}); প্লাগইন লুকানো উপাদান অবস্থান করতে পারে না।

3 বছর পরে 2012 সালে নোটগুলি আপডেট করুন:

(মূল সমাধানটি উত্তরোত্তর জন্য এখানে সংরক্ষণাগারভুক্ত করা হয়েছে )

সুতরাং, দেখা যাচ্ছে যে আমার এখানে মূল পদ্ধতিটি আদর্শ থেকে দূরে ছিল। বিশেষত, এটি ব্যর্থ হবে যদি:

• মেনুর অফসেট পিতা-মাতা স্থানধারকের অফসেট পিতামাতার নয়
• স্থানধারকের সীমানা / প্যাডিং রয়েছে

ভাগ্যক্রমে, jQuery এমন পদ্ধতিগুলি ( position()এবং outerWidth()) প্রবর্তন করে 1.2.২-এ ফিরে যা পরবর্তী ক্ষেত্রে এখানে সঠিক মান খুঁজে পাওয়া সহজ করে দেয়। পূর্ববর্তী ক্ষেত্রে, appendস্থানধারকটিতে মেনু উপাদানটি যুক্ত করা কাজ করে (তবে নীড়ের উপর ভিত্তি করে সিএসএসের নিয়মগুলি ভঙ্গ করবে)।

Comments

ওহ এই কৌতুকপূর্ণ: অন্য দিন আমাকে এই কাজটি করতে হয়েছিল, কীভাবে, এটি গুগল করে পেয়েছিল তা মনে করতে পারিনি ... এই উত্তর! এসওএফকে ভালবাসি।

— জ্যাকব

হি - আমার সাথে আমারও একই ঘটনা ঘটেছিল - কীভাবে কিছু করা যায় তা মনে করতে পারিনি, এবং স্ট্যাক ওভারফ্লোতে আমার নিজের উত্তর খুঁজে পেল।

— ভেষজ কডিল

আমি মনে করি আপনার মেনু ডিভ স্টাইলটি প্রদর্শন ব্যবহার করা উচিত: প্রদর্শনের পরিবর্তে কোনওটি নয়: লুকানো।

— গাব

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

— মাইক কুপার

কীভাবে আপনার মেনুতে jQuery এর .offset () অবস্থান রয়েছে তা নির্ভর করে। অবস্থান () এর জন্য ড্রপ-ইন প্রতিস্থাপন হিসাবে ব্যবহার করা যেতে পারে। api.jquery.com/offset

— ড্যানি সি

Answer 3

শেষ পর্যন্ত আমার পক্ষে এটিই কাজ করেছিল।

var showMenu = function(el, menu) {
    //get the position of the placeholder element  
    var pos = $(el).offset();    
    var eWidth = $(el).outerWidth();
    var mWidth = $(menu).outerWidth();
    var left = (pos.left + eWidth - mWidth) + "px";
    var top = 3+pos.top + "px";
    //show the menu directly over the placeholder  
    $(menu).css( { 
        position: 'absolute',
        zIndex: 5000,
        left: left, 
        top: top
    } );

    $(menu).hide().fadeIn();
};

Answer 4

এখানে আমি লিখেছি এমন একটি jQuery ফাংশন যা আমাকে উপাদানগুলির অবস্থানের পক্ষে সহায়তা করে।

এখানে একটি উদাহরণ ব্যবহার:

$(document).ready(function() {
  $('#el1').position('#el2', {
    anchor: ['br', 'tr'],
    offset: [-5, 5]
  });
});

উপরের কোডটি # el1 এর উপরের-ডানদিকে # el1 এর নীচের ডানদিকে সারিবদ্ধ করে। ['সিসি', 'সিসি'] # এলএলে # এল 1 টি কেন্দ্র করে। নিশ্চিত করুন যে # এল 1 এর পজিশনের সিএসএস রয়েছে: পরম এবং জেড-ইনডেক্স: 10000 (বা কিছু সত্যিই বড় সংখ্যা) শীর্ষে রাখার জন্য।

অফসেট বিকল্প আপনাকে নির্দিষ্ট সংখ্যক পিক্সেল দ্বারা স্থানাঙ্কগুলিকে টানতে দেয়।

উত্স কোডটি নীচে রয়েছে:

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: ['tl', 'tl'],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var left = targetBox.left;
  var top = targetBox.top;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  //add offset to final coordinates
  left += options.offset[0];
  top += options.offset[1];

  $(this).css({
    left: left + 'px',
    top: top + 'px'
  });

}

Answer 5

কেন খুব জটিল? সমাধান খুব সহজ

CSS:

.active-div{
position:relative;
}

.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}

jQuery:

$(function(){
    $(".active-div").hover(function(){
    $(".menu-div").prependTo(".active-div").show();
    },function(){$(".menu-div").hide();
})

এটি কাজ করে এমনকি যদি,

• দুটি ডিভ অন্য কোথাও রাখা হয়েছে
• ব্রাউজার পুনরায় আকারের

Comments

যদি আমি

— প্লেসোল্ডারকে

আমি যখন দুইটি ভাইবোন বা এমনকি সম্পূর্ণ সম্পর্কহীন নয় এমন দুটি উপাদান সারিবদ্ধ করতে চাই তখন এটি কার্যকর হয় না, যা খুব সাধারণ।

— ওরিয়াদাম

Answer 6

আপনি প্লাগইন jQuery ব্যবহার করতে পারেন PositionCalculator

এই প্লাগইনে সংঘর্ষ হ্যান্ডলিং (ফ্লিপ) অন্তর্ভুক্ত রয়েছে, সুতরাং সরঞ্জামদণ্ডের মতো মেনুটি দৃশ্যমান স্থানে স্থাপন করা যেতে পারে।

$(".placeholder").on('mouseover', function() {
    var $menu = $("#menu").show();// result for hidden element would be incorrect
    var pos = $.PositionCalculator( {
        target: this,
        targetAt: "top right",
        item: $menu,
        itemAt: "top left",
        flip: "both"
    }).calculate();

    $menu.css({
        top: parseInt($menu.css('top')) + pos.moveBy.y + "px",
        left: parseInt($menu.css('left')) + pos.moveBy.x + "px"
    });
});

সেই মার্কআপের জন্য:

<ul class="popup" id="menu">
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

<div class="placeholder">placeholder 1</div>
<div class="placeholder">placeholder 2</div>

এই হিটটি হ'ল: http://jsfiddle.net/QrrpB/1657/

Comments

কনসোল লিখেছেন অপরিজ্ঞাপিত লাইনের জন্য কোনও কাজ নয়: var pos = $ .পজিশনক্যালকুলেটর (you আপনি কি দয়া করে সমস্যাটি সমাধানে সহায়তা করতে পারেন?

— আলেকজান্ডার বেলভ

@ আলেকজান্ডারবেলভ: আমার ধারণা, আপনি প্লাগইনটি লোড করেননি। আপনি এটি ব্যবহারের আগে, আপনাকে পজিশনক্যালকুলেটর প্লাগইনটির জেএস-ফাইলটি লোড করতে হবে।

— TLindig

Answer 7

এটার মতো কিছু?

$(menu).css("top", targetE1.y + "px"); 
$(menu).css("left", targetE1.x - widthOfMenu + "px");

Answer 8

এটি আমার পক্ষে কাজ করে:

var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$('#personTooltipContainer').css({top: tPosY, left: tPosX});