{"id":1157,"date":"2012-03-07T13:17:23","date_gmt":"2012-03-07T13:17:23","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=1157"},"modified":"2012-03-07T13:32:57","modified_gmt":"2012-03-07T13:32:57","slug":"fixing-nyromodal-positioning-in-ios-devices","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2012\/03\/07\/fixing-nyromodal-positioning-in-ios-devices\/","title":{"rendered":"Fixing nyroModal positioning in iOS devices"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushJScript.js\"><\/script>\n<p>NyroModal is a JQuery component for showing fancy popups. It has a problem in centering the popup in iOS devices .<\/p>\n<p>The specific problem being that if you have scrolled a few pages and then you click on something which calls a Nyromodal popup , you have to scroll back all the way to the top of the page to see the popup. As a result , either you will either see the top of the popup being cut off or not at all. See image below for an example:<\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/2012\/03\/07\/fixing-nyromodal-positioning-in-ios-devices\/21mc2u0\/\" rel=\"attachment wp-att-1159\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1159\" title=\"21mc2u0\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/03\/21mc2u0.png\" alt=\"\" width=\"768\" height=\"1024\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/03\/21mc2u0.png 768w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/03\/21mc2u0-225x300.png 225w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a>The workaround for this is to call the endShowContent callback function and reposition the popup. The sample code for this is given below:<br \/>\n<pre class=\"brush: js\"> $.nyroModalSettings({\r\n              type: &#039;iframe&#039;,\r\n              height: 250,\r\n              width: 520,\r\n              resizable: true,\r\n              autoSizable: true,\r\n              titleFromIframe: true,\r\n              modal: false,\r\n              \/\/ selIndicator: &#039;#loading&#039;,\r\n              contentLoading: &quot;&quot; \/\/ use our own,\r\n\t\t\t  \t,cssOpt: { \r\n\t\t\t\t\tbg: {\r\n\t\t\t\t\t\tposition: &#039;absolute&#039;,\r\n\t\t\t\t\t\toverflow: &#039;hidden&#039;,\r\n\t\t\t\t\t\ttop: 0,\r\n\t\t\t\t\t\tleft: 0,\r\n\t\t\t\t\t\theight: &#039;100%&#039;,\r\n\t\t\t\t\t\twidth: &#039;100%&#039;\r\n\t\t\t\t\t},\r\n\t\t\t\t\twrapper: {\r\n\t\t\t\t\t\tposition: &#039;relative&#039;,\r\n\t\t\t\t\t\ttop: &#039;50%&#039;,\r\n\t\t\t\t\t\tleft: &#039;50%&#039;\r\n\t\t\t\t    },\r\n\t\t\t\t\twrapper2: {\r\n\t\t\t\t  \t},\r\n\t\t\t\t    content: {\r\n\t\t   \t\t    },\r\n\t\t\t\t    loading: {\r\n\t\t\t\t\t  position: &#039;absolute&#039;,\r\n\t\t\t\t\t  top: &#039;50%&#039;,\r\n\t\t\t\t\t  left: &#039;50%&#039;,\r\n\t\t\t\t\t  marginTop: &#039;-50px&#039;,\r\n\t\t\t\t\t  marginLeft: &#039;-50px&#039;\r\n\t\t\t\t    }\r\n\t\t\t\t},\t\t\t  \r\n\t\t\t\tendShowContent: function(nm){\r\n                    if( $(&quot;div.nyroModalBg&quot;).outerHeight() &lt; $(window).outerHeight() ){\r\n                        $(&quot;div.nyroModalBg&quot;).css(&quot;height&quot;, $(window).outerHeight());\r\n                    }\r\n                    if ( $(&quot;div.nyroModalBg&quot;).outerHeight() &lt; $(&quot;body&quot;).outerHeight() ){\r\n                        $(&quot;div.nyroModalBg&quot;).css(&quot;height&quot;, $(&quot;body&quot;).outerHeight());\r\n                    }\r\n                } \/\/ Will be called one the content is resized\t\t\t\t\r\n<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>NyroModal is a JQuery component for showing fancy popups. It has a problem in centering the popup in iOS devices . The specific problem being <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2012\/03\/07\/fixing-nyromodal-positioning-in-ios-devices\/\" title=\"Fixing nyroModal positioning in iOS devices\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":1159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-1157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=1157"}],"version-history":[{"count":14,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1157\/revisions"}],"predecessor-version":[{"id":1921,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1157\/revisions\/1921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/1159"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}