jQuery উইন্ডো সম্পর্কিত একটি উপাদান এর অবস্থান পেতে

Question

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

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

Answer 1

প্রাথমিকভাবে, এলিমেন্টের .Ofset অবস্থানটি ধরুন এবং উইন্ডোটির সাথে সম্পর্কিত হয়ে এর তুলনামূলক অবস্থান গণনা করুন

উল্লেখ করুন :
1. অফসেট
2. স্ক্রোল
3. স্ক্রোলটপ

তুমি তো বেশ এটা ব্যবহার করে দেখুন দিতে পারেন বেহালার

কোডের কয়েকটি লাইন অনুসরণ করে কীভাবে এটি সমাধান করা যায় তা ব্যাখ্যা করে

.scrol ইভেন্টটি সম্পাদিত হয়ে গেলে , আমরা উইন্ডো অবজেক্টের সাথে সম্পর্কিত উপাদানটির তুলনামূলক অবস্থান গণনা করি

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

যখন স্ক্রোলটি ব্রাউজারে সঞ্চালিত হয়, আমরা উপরের ইভেন্ট হ্যান্ডলার ফাংশনটিকে কল করি

টুকিটাকি সংকেতলিপি

---

function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});

#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>

Comments

স্ক্রিপ্ট জন্য ধন্যবাদ। এটি ডেস্কটপে কাজ করছে বলে মনে হচ্ছে তবে আইপ্যাডে কাজ করে না। দেখে মনে হচ্ছে $ (উইন্ডো)। স্ক্রোলটপ () এবং $ (উইন্ডো)। স্ক্রোল লেফট () আইপ্যাডে আপডেট হয় না। আপনি মাধ্যমে আমার সংস্করণ চেষ্টা করে দেখতে পারেন jsbin.com/ogiwu4/5

— আদিব

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

— eselk

এটি ব্যর্থ হওয়া উচিত যখন কোনও উপাদান অন্য স্ক্রোলযোগ্য উপাদানগুলির মধ্যে থাকে, e। ছ। <div>। আপনি কেবল দস্তাবেজটিকে স্ক্রোলিং বিবেচনা করুন তবে অন্যান্য উপাদান স্ক্রোলিং নয়।

— ygoe

Answer 2

বাউন্ডিং বক্স চেষ্টা করুন। ইহা সহজ:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();

Comments

getBoundingClientRect () হ'ল এই সমস্যার উত্তর। আপনাকে অগ্রগামীর ধন্যবাদ।

— ভ্লাদ লেগো

এটি ভাল কাজ করেছে। আপনার স্ক্রোললিটফ এবং স্ক্রোলটপ ছাড়াও আমাকে আমার স্ক্রোলটি ঠিক করার জন্য কিছু কোড অন্তর্ভুক্ত করতে হবে: শীর্ষপোস = শীর্ষপোস - $ (উইন্ডো)। স্ক্রোলটপ (); বামপোস = বামপোস - $ (উইন্ডো)। স্ক্রোল লেফট (); ডানপোস = ডানপোস - $ (উইন্ডো)। স্ক্রোলটপ (); তলপোস = তলপোস - $ (উইন্ডো) .স্ক্রোল লেফট ();

— সিজার

যেদিন মানুষ একটি দরকারী দরকারী পদ্ধতিতে জিনিসগুলি গুটিয়ে রাখতে শিখতে চলেছে

— মিমি

@ নলডোরিন আইই / এজতে সমর্থনটি

— প্রগ্রেহামার

@ প্রগ্রহামহ্মার আমার খারাপ, আপনি ঠিক বলেছেন। আমি এটি কোনও ওয়েবসাইটে পড়লাম এবং এর শব্দটিকে মূল মূল্য দিয়েছি ... দেখা গেছে এটি ভুল ছিল (বা কমপক্ষে কেবল পুরানো আইইতে কাজ করে না)।

— নলডোরিন

Answer 3

function getWindowRelativeOffset(parentWindow, elem) {
        var offset = {
            left : 0,
            top : 0
        };
        // relative to the target field's document
        offset.left = elem.getBoundingClientRect().left;
        offset.top = elem.getBoundingClientRect().top;
        // now we will calculate according to the current document, this current
        // document might be same as the document of target field or it may be
        // parent of the document of the target field
        var childWindow = elem.document.frames.window;
        while (childWindow != parentWindow) {
            offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
            offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
            childWindow = childWindow.parent;
        }
        return offset;
    };

আপনি এটি এভাবে কল করতে পারেন

getWindowRelativeOffset(top, inputElement);

আমি শুধুমাত্র আমার প্রয়োজন অনুসারে IE এর জন্য ফোকাস করি তবে অন্যান্য ব্রাউজারগুলির জন্যও এটি করা যেতে পারে

Answer 4

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

অন্যথায় যদি আপনি নিজে এটি করতে চান তবে আপনি jQuery ব্যবহার করতে পারেন .position()। আরও তথ্য সম্পর্কে .position()চালু আছে http://api.jquery.com/position/

$("#element").position(); অফসেট পিতামাতার সাথে সম্পর্কিত কোনও উপাদানের বর্তমান অবস্থান ফিরিয়ে দেবে।

এছাড়াও jQuery। অফসেট (); যা নথির সাথে সম্পর্কিত অবস্থানটি ফিরিয়ে দেবে।

Comments

এটি আসলে কোনও সরঞ্জামদণ্ড নয়, তবে টীকাগুলি যুক্ত করতে নেটিভ ইউআই উইজেটটি খুলতে হবে।

— আদিব

Answer 5

টি এল; ডিআর

headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();

headroom_by_DOM = $('#id')[0].getBoundingClientRect().top;   // if no iframe

.getBoundingClientRect () সর্বজনীন বলে মনে হয় । .offset () এবং .scrolTop () jQuery 1.2 থেকে সমর্থিত। ধন্যবাদ @ ব্যবহারকারী 372551 এবং @ প্রোগ্রোহ্যামার। আইফ্রমে ডিওএম ব্যবহার করতে @ ইমরানআনসারির সমাধান দেখুন ।

Answer 6

    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative['scrollTop'] (),
                    r : r.right  + relative['scrollLeft'](),
                    b : r.bottom + relative['scrollTop'] (),
                    l : r.left   + relative['scrollLeft']() 

            }
    }

    // Example
    trbl(e, window);

Answer 7

উইন্ডোর সাথে সম্পর্কিত কোনও উপাদানটির অবস্থান পেতে এটি চেষ্টা করুন।

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });

    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

আরও দেখুন @ jQuery এর সাথে ডকুমেন্টের সাথে সম্পর্কিত কোনও উপাদানটির অবস্থান পান