0

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>';
    document.body.appendChild(qWindow);
    $('quickview-close').observe('click', this.hideWindow.bind(this)); 
},
showWindow: function()
{

    $('quick-window').setStyle({
        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

0

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

and

http://javascript.info/tutorial/coordinates

  • 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.. – Aravind Umasankar Mar 7 '15 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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