Link to home
Start Free TrialLog in
Avatar of satmisha
satmishaFlag for India

asked on

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

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/
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

Avatar of satmisha

ASKER

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.
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/
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you so much leakim971.