Keep HTML pop aspect ratio - similar to image popup

  • Hi

    I have a bunch of html popups and I specify the hotspot like so:
    onclick="popup('html', get(data[mypage].content), 1659, 1464, false);"

    But how this currently works is it takes the minimum between the values I specify and the global stage dimensions.
    Meaning, the one dimension my fit the screen, but the other one will be shrinked if larger than the stage

    How can I keep the proportions in a similar way the image popup does it?

    I tried copying the math from the image popup to the html popup, but can't get it to work.

  • ok, sorry... thats a newer example i forgot about

    i think you already know, you need to replace this code to keep your given aspect ratio...

    width=calc(min(width,global.stagewidth*0.9)),
    height=calc(min(height,global.stageheight*0.8)),

    thats the old fill or fit to frame problem ... tricky stuff :)

    here is a link...
    https://stackoverflow.com/questions/1106…in-bounding-box

  • ok, sorry... thats a newer example i forgot about

    i think you already know, you need to replace this code to keep your given aspect ratio...

    width=calc(min(width,global.stagewidth*0.9)),
    height=calc(min(height,global.stageheight*0.8)),

    thats the old fill or fit to frame problem ... tricky stuff :)

    here is a link...
    https://stackoverflow.com/questions/1106…in-bounding-box

    Yeah I get that bit that, that code should be replaced. The link you posted has already been solved in the image popup, which is why my question specificially asked about it.

    Here's the code for the image popup which makes the image fit the screen, proportionally:

    but for the life of me I can't manage to replace the 2 lines of code from the html popup you posted, with the above. Tried various things to modify the code, with no luck.
    The reason for doing this is that the html popup can be zoomed and panned around, which is actually what I need for the image popup.

    It seemed easier to adjust the html popup's proportions, than trying to adjust and stick this into the image popup's code:

    Code
    // enable browsed-based mouse-wheel and touch-scrolling support:
    		div.addEventListener("wheel", stopPropagation, true);
    		div.addEventListener("mousewheel", stopPropagation, true);
    		div.addEventListener("DOMMouseScroll", stopPropagation, true);
    		div.addEventListener("touchstart", function(event){ if(krpano.device.ios && window.innerHeight == krpano.display.htmltarget.offsetHeight){ /* avoid the iOS 'overscrolling' for fullpage viewers */ var bs = document.body.parentNode.style; bs.position="fixed"; bs.top=0; bs.left=0; bs.right=0; bs.bottom=0; } krpano.control.preventTouchEvents = false; event.stopPropagation(); }, true);
    		div.addEventListener("touchend", function(event){ krpano.control.preventTouchEvents = true; event.stopPropagation(); }, true);
    		div.addEventListener("gesturestart", preventDefault, true);

    Seems either of those are easier said than done. I'd appreciate some help with this

  • ah thanks man
    makes sense now, I had it like that, but stuck the calculations into the wrong place, I stuck it into the set popup, instead of before it

    yours work great, thanks again

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!