উইন্ডো প্রান্তের ক্ষেত্রে পপওভারের এক্স অবস্থানের ভিত্তিতে বুটস্ট্র্যাপ পপওভারের অবস্থান পরিবর্তন করা হচ্ছে?

Question

আমি ইন্টারনেটকে অনেকদূর প্রশস্ত করেছি এবং যখন এই স্ট্যাকওভারফ্লো পোস্টটি অন্তর্দৃষ্টিপূর্ণ পেয়েছি তখন কি পর্দার প্রস্থের ভিত্তিতে বুটস্ট্র্যাপ পপওভারের অবস্থান পরিবর্তন করা সম্ভব? , এটি এখনও আমার প্রশ্নের উত্তর দেয়নি, সম্ভবত আমার সমস্যা বোঝার অবস্থান / অফসেটের কারণে।

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

আমি ভাবছি এটি এমন কিছু হবে:

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

ভাবনা? ধন্যবাদ!

Answer 1

আমি কেবল লক্ষ্য করেছি যে প্লেসমেন্ট বিকল্পটি হয় স্ট্রিং বা কোনও ফাংশন হতে পারে একটি স্ট্রিং ফিরিয়ে দেয় যা প্রতিবার আপনি পপওভার-সক্ষম লিংকে ক্লিক করলে গণনা করে তোলে।

এটি প্রাথমিক $ .এইচ ফাংশন ব্যতীত আপনি যা করেছেন তার প্রতিলিপি তৈরি করা সত্যই সহজ করে তোলে :

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);

Comments

এটি সর্বোত্তম উপায় কারণ autoআপনি পৃষ্ঠাসমূহ এবং পপওভারে রেখে দেওয়া সামগ্রীর উপর নির্ভর করে সর্বদা নিখুঁতভাবে কাজ করে না।

— ব্রোন ডেভিস

এর জন্য ধন্যবাদ. আমরা যদি আপনার কাছে বিনা গুণে এটি ব্যবহার করি তবে ঠিক কি?

— D.Tate

@ ডি.েটেট আমি বিশ্বাস করি স্ট্যাকওভারফ্লোতে সমস্ত কিছু ব্যবহার ছাড়াই উচিত attrib এটির সাথে পাগল হয়ে যাও;)

— bchhun

left 515&top 110

— মুরালি মুরুগেসন

@ মুরালিমুরুজেসন মোটেই কোন যুক্তি নেই; আমি কেবল প্রশ্নে প্রদত্ত নম্বরগুলি ব্যবহার করেছি। আপনি যা চান তা ব্যবহার করতে পারেন।

— bchhun

Answer 2

বুটস্ট্র্যাপ 3 এর জন্য রয়েছে

placement: 'auto right'

যা সহজ। ডিফল্টরূপে, এটি ঠিক হবে, তবে উপাদানটি যদি স্ক্রিনের ডানদিকে অবস্থিত থাকে তবে পপওভারটি বামে থাকবে। সুতরাং এটি হওয়া উচিত:

$('.infopoint').popover({
   trigger:'hover',
   animation: false,
   placement: 'auto right'
});

Comments

আমি এ পর্যন্ত মিশ্র অভিজ্ঞতা আছে। আমি এখনও বুটস্ট্র্যাপ উত্সের দিকে নজর দিইনি, তবে দেখে মনে হচ্ছে এটি কেবলমাত্র উপাদানটির অবস্থান বিবেচনায় নিয়েছে, এবং পপওভারের টু-বি-পজিশন নয়। সুতরাং যে উপাদানগুলি প্রান্তে বা উইন্ডো প্রান্তের বাইরে রয়েছে তারা বেশিরভাগ প্রান্তে পপওভার পান তবে প্রান্তের ঠিক উপরে থাকা উপাদানগুলি (উদাহরণস্বরূপ) ভাঁজের নীচে পপওভার পান।

— ডেভড

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

— rzb

Answer 3

ডকুমেন্টেশনের উপর ভিত্তি করে autoআপনার পছন্দসই স্থান নির্ধারণের সাথে মিলিয়ে ব্যবহার করতে সক্ষম হওয়া উচিতauto left

http://getbootstrap.com/javascript/#popovers : "" অটো "নির্দিষ্ট করা হলে এটি পপওভারকে গতিশীলভাবে পুনঃপ্রবর্তন করবে example উদাহরণস্বরূপ, যদি প্লেসমেন্টটি" স্বয়ংক্রিয় বামে "থাকে, টুলটিপটি সম্ভব হলে বামদিকে প্রদর্শিত হবে, অন্যথায় এটি ঠিক প্রদর্শিত হবে। "

আমি একই জিনিসটি করার চেষ্টা করছিলাম এবং তখন বুঝতে পারি যে এই কার্যকারিতাটি ইতিমধ্যে বিদ্যমান।

Comments

অটো বাম অনুভূমিক স্ক্রোলবার দেয়

— জিতেন্দ্র ব্যাস

আপনি viewportযদি উপাদানগুলির পিতামাতার উপর ভিত্তি করে এটি গণনা করতে না চান তবে আপনি এটিও নির্দিষ্ট করতে পারেন।

— allicarn

Answer 4

সুতরাং আমি কার্যকরভাবে এটি করার একটি উপায় খুঁজে বের করেছি। আমার বিশেষ প্রকল্পের জন্য আমি একটি আইপ্যাড ওয়েবসাইট তৈরি করছি যাতে আমি পিক্সেলের এক্স / ওয়াইয়ের মানটি পর্দার প্রান্তে পৌঁছানোর জন্য ঠিক কী জানতাম। আপনার এইএক্স এবং এই ওয়াইয়ের মানগুলি পৃথক হবে।

যেভাবে যাইহোক পপওভারগুলি ইনলাইন স্টাইলিংয়ের দ্বারা স্থাপন করা হচ্ছে, তাই পপওভারটি কোন দিকের হবে তা ঠিক করার জন্য আমি প্রতিটি লিঙ্কের জন্য বাম এবং উপরের মানগুলি সহজেই ধরি। এটি এইচটিএমএল 5 ডেটা যুক্ত করে করা হয় - মানগুলি .popover () মৃত্যুদন্ড কার্যকর করার পরে ব্যবহার করে।

if ($('.infopoint').length>0){
    $('.infopoint').each(function(){
        var thisX = $(this).css('left').replace('px','');
        var thisY = $(this).css('top').replace('px','');
        if (thisX > 515)
            $(this).attr('data-placement','left');
        if (thisX < 515)
            $(this).attr('data-placement','right');
        if (thisY > 480)
            $(this).attr('data-placement','top');
        if (thisY < 110)
            $(this).attr('data-placement','bottom');
    });
    $('.infopoint').popover({
        trigger:'hover',
        animation: false,
        html: true
    });
}

কোনও মন্তব্য / উন্নতি স্বাগত জানানো হয় তবে আপনি মানগুলি ম্যানুয়ালি রাখতে ইচ্ছুক হলে এটি কাজ হয়ে যায়।

Answer 5

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

var options = {
  placement: function (context, source) {
    var $win, $source, winWidth, popoverWidth, popoverHeight, offset, toRight, toLeft, placement, scrollTop;

    $win = $(window);
    $source = $(source);
    placement = $source.attr('data-placement');
    popoverWidth = 400;
    popoverHeight = 110;
    offset = $source.offset();

    // Check for horizontal positioning and try to use it.
    if (placement.match(/^right|left$/)) {
      winWidth = $win.width();
      toRight = winWidth - offset.left - source.offsetWidth;
      toLeft = offset.left;

      if (placement === 'left') {
        if (toLeft > popoverWidth) {
          return 'left';
        }
        else if (toRight > popoverWidth) {
          return 'right';
        }
      }
      else {
        if (toRight > popoverWidth) {
          return 'right';
        }
        else if (toLeft > popoverWidth) {
          return 'left';
        }
      }
    }

    // Handle vertical positioning.
    scrollTop = $win.scrollTop();
    if (placement === 'bottom') {
      if (($win.height() + scrollTop) - (offset.top + source.offsetHeight) > popoverHeight) {
        return 'bottom';
      }
      return 'top';
    }
    else {
      if (offset.top - scrollTop > popoverHeight) {
        return 'top';
      }
      return 'bottom';
    }
  },
  trigger: 'click'
};
$('.infopoint').popover(options);

Answer 6

আপনি এটি ব্যবহার করে দেখতে পারেন,

==> ভিউপোর্টে লক্ষ্য / উত্সের অবস্থান পান
==> নীচে থেকে আপনার টুলটিপ উচ্চতা কম কিনা তা যাচাই করুন ==> নীচ থেকে
যদি স্থানটি আপনার সরঞ্জামদণ্ডের উচ্চতা থেকে কম হয় তবে কেবল পৃষ্ঠাটি উপরে স্ক্রোল করুন

placement: function(context, source){
  //get target/source position in viewport
  var bounds = $(source)[0].getBoundingClientRect();
      winHeight = $(window).height();

  //check wheather space from bottom is less that your tooltip height
  var rBottom = winHeight - bounds.bottom;

  //Consider 180 == your Tooltip height
  //if space from bottom is less that your tooltip height, this will scrolls page up
  //We are keeping tooltip position is fixed(at bottom)

  if (rBottom < 180){
    $('html, body').animate({ scrollTop: $(document).scrollTop()+180 }, 'slow');
  }

  return "bottom";
}

Answer 7

আপনি ডেটা-প্লেসমেন্টের মতো ডেটা স্থাপনে অটো ব্যবহার করতে পারেন = "অটো বাম"। এটি আপনার স্ক্রিনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে সামঞ্জস্য করবে এবং ডিফল্ট প্লেসমেন্টটি ছেড়ে যাবে।

Answer 8

বাছুনের দুর্দান্ত উত্তর ছাড়াও, যদি আপনি অবাস্তব অবস্থান চান, আপনি এটি করতে পারেন

var options = {
    placement: function (context, source) {
         setTimeout(function () {
               $(context).css('top',(source.getBoundingClientRect().top+ 500) + 'px')
         },0)
         return "top";
    },
    trigger: "click"
};
$(".infopoint").popover(options);

Answer 9

আমি AngularJS এ আমার সমস্যাটি নিম্নরূপ সমাধান করেছি:

var configPopOver = {
        animation: 500,
        container: 'body',
        placement: function (context, source) {
                    var elBounding = source.getBoundingClientRect();
                    var pageWidth = angular.element('body')[0].clientWidth
                    var pageHeith = angular.element('body')[0].clientHeith

                    if (elBounding.left > (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
                        return "left";
                    }

                    if (elBounding.left < (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
                        return "right";
                    }

                    if (elBounding.top < 110){
                        return "bottom";
                    }

                    return "top";
                },
        html: true
    };

এই ফাংশনটি বুটস্ট্র্যাপ পপওভারের অবস্থানের অবস্থানের উপর ভিত্তি করে সেরা অবস্থানে ভাসমান do

Answer 10

$scope.popoverPostion = function(event){
    $scope.pos = '';

       if(event.x <= 207 && event.x >= 140){
           $scope.pos = 'top';
           event.x = '';
       }
       else if(event.x < 140){
           $scope.pos = 'top-left';
           event.x = '';
       }
       else if(event.x > 207){
           $scope.pos = 'top-right';
           event.x = '';
       }

};

Answer 11

আপনার যদি পৃষ্ঠার প্রায় সব জায়গায় প্রয়োজন হয় তবে আপনি এটি ব্যবহার করে দেখতে পারেন।

ইউ এটি একটি সাধারণ উপায়ে কনফিগার করতে পারে তবে কেবল এটি ব্যবহার করুন।

এইভাবে আপনি এইচটিএমএল উপাদান এবং আপনি যে কোনও কিছু ব্যবহার করতে পারেন :)

$(document).ready(function()
                  {
  var options =
      {
        placement: function (context, source)
        {
          var position = $(source).position();
          var content_width = 515;  //Can be found from a JS function for more dynamic output
          var content_height = 110;  //Can be found from a JS function for more dynamic output

          if (position.left > content_width)
          {
            return "left";
          }

          if (position.left < content_width)
          {
            return "right";
          }

          if (position.top < content_height)
          {
            return "bottom";
          }

          return "top";
        }
        , trigger: "hover"
        , animation: "true"
        , html:"true"
      };
  $('[data-toggle="popover"]').popover(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
	<h3>Popover Example</h3>
	<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>

যোগ

---

আরও বিকল্প সেট করার জন্য, আপনি এখানে যেতে পারেন ।

আরও কিছু এখানে পাওয়া যাবে ।

হালনাগাদ

---

আপনি যদি ক্লিকের পরে পপআপ চান তবে আপনি এটি পছন্দ করতে জেএস বিকল্পটি পরিবর্তন করতে trigger: "click"পারেন-

        return ..;
    }
    ......
    , trigger: "click"
    ......
};

আপনি এটি এইচটিএমএল বিজ্ঞাপনেও এটি অনুকূলিত করতে data-trigger="click"পারেন-

<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>

আমি মনে করি এটি আরও ওরিয়েন্টেড কোড এবং আরও পুনরায় ব্যবহারযোগ্য এবং সকলের জন্য আরও সহায়ক হবে :)।