how to get the last coordinates(Top and Left) of the popover using javascript

satmisha
satmisha used Ask the Experts™
on
Hi Team,

Have made the popover which appears when the user clicks on the button, the user can scroll wherever the user wants.

The issue I am facing when I click on popover again it resets its position that means that popover appears from its default location rather appearing from the location where it was left earlier.

Enclosing the running code example, please suggest?

Click on 'POpover' button brings popover, you can drag and drop the popover wherever you want but the moment you click the button again it resets its position whereas expected is it should appear from the last location.

https://jsfiddle.net/girinishantg/w9cgzayj/12/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
test page : https://jsfiddle.net/7aL1khe2/

 
   <html>
    <head>
        <title></title>
        <!--script tags should go in the header -->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">    
    <link rel="canonical" href="https://popper.js.org/">
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        
    </head>
    <body>
        <div class="popover-demo mb-2">
        <button id="notesButton" type="button" class="btn btn-primary"   data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
    </div>
    <p><strong>Note:</strong> Click on the buttons to display/hide the popover.</p>
    </body>
</html>

Open in new window


    $(document).ready(function(){
            $('[data-toggle="popover"]').popover({
                placement : 'bottom'
            });

            var backupPosition = {}
            $('#notesButton').on('shown.bs.popover',
                function () {
                    var popoverId = $(this).data('bs.popover').tip.id;
                    //console.log(popoverId);
                    //console.log("dragging");
                    //$('#'+popoverId).draggable();
                    if(backupPosition.top) {
                        $('#' + popoverId).css({top:backupPosition.top, left:backupPosition.left});
                    }
                    $('#' + popoverId).on('mousedown', function (e) {

                        $(this).addClass('active');

                        var oTop = e.pageY - $('.active').offset().top;
                        var oLeft = e.pageX - $('.active').offset().left;

                        $(this).parents().on('mousemove', function (e) {

                            $('.active').offset({

                                top: e.pageY - oTop,
                                left: e.pageX - oLeft

                            });

                        });

                        $(this).on('mouseup', function () {

                            $(this).removeClass('active');
                            backupPosition = $('#' + popoverId).offset();
                        });

                        return false;
                    });
                });
        });

Open in new window

Author

Commented:
Thanks leakim971, I have gone through that but you see there are some associated issues like
1- flickering is happening  
2- coordinates are not accurate as popover does not appear exactly where it was left.

I am trying with limited knowledge to solve it appreciate if you could help in this.

Author

Commented:
Hi Leakim971, I have achieved the second point i.e. generating the popover last left. The only issue left is the flickering part.

If you see there is a fraction of second flickering happens when popover appears second time onwards, is there anything that we could do here? enclosing working example below.

https://jsfiddle.net/girinishantg/w9cgzayj/30/
Multitechnician
Top Expert 2014
Commented:
test page :  https://jsfiddle.net/rvt69cxo/1/

$(document).ready(function () {
            var gTop = 0;
            var gLeft = 0;

            $('[data-toggle="popover"]').popover({
                placement: 'bottom'
            }).on("hidden.bs.popover", function() {
            	$("<style type='text/css' id='x'> .popover { display:none !important;} </style>").appendTo("head");
            });
            
            $('#notesButton').on('show.bs.popover',
                function () {
               // alert('show.bs.popover');
                });

            $('#notesButton').on('shown.bs.popover',
                function () {
                //alert('shown.bs.popover');
                    var popoverId = $(this).data('bs.popover').tip.id;
                    $('#' + popoverId).css({ top: parseFloat(gTop), left: parseFloat(gLeft) });
                    $("#x").remove();
 
                    $('#' + popoverId).on('mousedown', function (e) {

                        $(this).addClass('active');

                        var oTop = e.pageY - $('.active').offset().top;
                        var oLeft = e.pageX - $('.active').offset().left;

                        $(this).parents().on('mousemove', function (e) {
                            $('.active').offset({
                                top: e.pageY - oTop,
                                left: e.pageX - oLeft

                            });
                        });

                        $(this).on('mouseup', function () {

                            $(this).removeClass('active');
                            console.log("mouseup");
                            var ID = $('#' + popoverId);
                            gTop = $(this).css("top");
                            gLeft = $(this).css("left");
                            console.log($(this).css("top"));
                            console.log($(this).css("left"));
                            console.log("********************");
                        });
                        return false;
                    });
                });
        });

Open in new window

Author

Commented:
Thank you so much leakim971.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial