নির্দিষ্ট স্থানাঙ্কে কীভাবে ডিআইভি পজিশন করবেন?

Question

আমি একটি নির্দিষ্ট স্থানাঙ্কে একটি ডিআইভি অবস্থান করতে চান? আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এটি করতে পারি?

Answer 1

যথাক্রমে বাম প্রান্ত এবং শীর্ষ প্রান্ত থেকে পিক্সেল সংখ্যা হিসাবে এর leftএবং topবৈশিষ্ট্যগুলি স্ক্রিপ্ট করুন । এটা অবশ্যই আছেposition: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

বা এটি কোনও ফাংশন হিসাবে করুন যাতে আপনি এটির মতো ইভেন্টের সাথে সংযুক্ত করতে পারেন onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

Comments

আমি মাউস ক্লিক থেকে x, y স্থানাঙ্ক পুনরুদ্ধার করি, আমি কীভাবে মাউসের অবস্থানের মধ্যে ডিভটি প্রদর্শন করতে পারি?

— অ্যাডাম

@ অ্যাধাম আপনার কাছে ইতিমধ্যে এক্স, ওয়াই স্থানাঙ্ক রয়েছে? শুধু স্থানে তাদের আবেদন x_pos,y_pos

— মাইকেল Berkowski

এটি সর্বদা অবস্থানকে ঘিরে রাখে ... 2 বা 1 হওয়ার পরিবর্তে 1.6 এর মতো অবস্থান নির্ধারণ করা কি সম্ভব

— মুহাম্মদ উমর

আমাদের যদি কর্ডিনেটস (x1, y2) (x2, y2) (x3, y3) (x4, y4) থাকে?

— জন দে

আমি ঠিক একই জিনিসটি করছি তবে আমার ডিভটি আমার মাউসের কর্ডিনেটের কাছে অবস্থান করছে না। তবে এটি শিরোনামের পরে মূল পৃষ্ঠার শীর্ষ প্রারম্ভিক অবস্থানে চলে যায়। মানে মাস্টার ডিভ কেউ আমাকে বুঝতে সাহায্য করতে পারে কেন?

— JNPW

Answer 2

এটি করার জন্য আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে না। সাধারণ-পুরানো সিএসএস ব্যবহার:

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

আপনি যদি মনে করেন আপনার অবশ্যই জাভাস্ক্রিপ্ট ব্যবহার করা উচিত, বা জিকুয়েরি ব্যবহার করে এটি গতিশীল করার চেষ্টা করছেন, এটি "বেলা" শ্রেণীর সমস্ত বিভাগকে প্রভাবিত করে:

var blahclass =  $('.blah'); 
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it

বিকল্পভাবে, আপনার অবশ্যই নিয়মিত পুরানো-জাভাস্ক্রিপ্ট ব্যবহার করতে গেলে আপনি আইডি দ্বারা দখল করতে পারেন

var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever 
domElement.style.left = 0; // or whatever

Comments

কি? আপনার আমার এলিমেন্টের পরিবর্তে .class ব্যবহার করা উচিত এবং x & y এর পরিবর্তে উপরের এবং বামে থাকা উচিত?

— টিএমএস

এইচটিএমএল উপাদানটির সাথে একটি রেফারেন্স পাওয়ার পাশাপাশি document.getElemtentById(), আপনি এটিকে একটি স্বেচ্ছাসেবী

— jQuery- জাতীয় বাছাইকারী হিসাবে

Answer 3

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

অন্যথায় Jquery এর সাথে যদি আপনি নথির সাথে সম্পর্কিত কোনও উপাদান রাখতে চান তবে আপনি অফসেট () পদ্ধতিটি ব্যবহার করতে পারেন।

$(".mydiv").offset({ top: 10, left: 30 });

যদি পিতা-মাতার অবস্থান অফসেট সম্পর্কিত হয় তবে পিতামাতার আত্মীয় বা নিখুঁত। তারপরে নিম্নলিখিত ব্যবহার করুন ...

var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';

$('.mydiv').css({
  position:'absolute',
  top:top,
  left:left
});

Comments

দুর্দান্ত @ এহতেশাম এটি সত্যই আমাকে সাহায্য করেছিল।

— আরএন কুশওয়াহা

Answer 4

আপনি অবস্থান স্থির সিএসএস সম্পত্তি ব্যবহার করতে পারেন।

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

Answer 5

এখানে একটি সঠিকভাবে বর্ণিত নিবন্ধ এবং কোড সহ একটি নমুনাও রয়েছে। জেএসের সমন্বয়

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

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

Answer 6

আমি এটিকে আঁকড়ে ধরে 'px' যুক্ত করেছি; খুব ভাল কাজ করে।

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +'px',
    top: (el.top + window.scrollY ) +'px'
  }
}
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ;