For now I have displayed the div like thisMy quick view

the code is

createWindow: function()
    var qWindow = new Element('div', {id: 'quick-window'});
    qWindow.innerHTML = '<div id="quickview-header"><a href="javascript:void(0)" id="quickview-close">close</a></div><div class="quick-view-content"></div>';
    $('quickview-close').observe('click', this.hideWindow.bind(this)); 
showWindow: function()

        top:  document.viewport.getScrollOffsets().top + 100 + 'px',
        left:  document.body.clientWidth/2 - $('quick-window').getWidth()/2 + 'px',
        display: 'block'

I need the position to be changed dynamically..accoring to the product list height in magento.. Something like thisQuick view from myntra.com

Need your help.. I am using prototype.js

1 Answer 1


You could use getBoundingClientRect(); on the product list item which will give you left & top relative to the top-left of the viewport.

See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect



  • I have grid of products quick view has to be displayed underneath each product that too in full width.. Kindly take a look at screenshot.. Wanna know what do they use.. Mar 7, 2015 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.