JQuery Mobile Popup with Canvas -
i looking create popup in jquery mobile has canvas embedded in it.
the trick need popup/cavans launch in landscape mode.. no matter current orientation of screen?
any advice?
thanks
you use css transform on popup content rotate 90 degrees when detect device in portrait mode.
create css class performs rotation (-90 counter clockwise, 90 clockwise):
.rotateccw { -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
then on popup popupbeforeposition
event, check orientation , either add or remove css class:
$("#popupdialog").on("popupbeforeposition", function(event, ui) { if (is_landscape()){ $("#popupdialog").removeclass("rotateccw"); } else { $("#popupdialog").addclass("rotateccw"); } }); function is_landscape() { return (window.orientation === 90 || window.orientation === -90); }
here demo
Comments
Post a Comment