tests/stapibas/Content/Extractor/data/shadowbox-popup-positioning.htm

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4  <head profile="http://microformats.org/profile/rel-tag http://microformats.org/profile/h-entry">
   5   <title>Shadowbox: Manual popup positioning</title>
   6   <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
   7   <meta name="author" content="Christian Weiske" />
   8   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   9   <meta http-equiv="content-language" content="en" />
  10   <meta name="keywords" content="programming, web" />
  11   <meta name="DC.date.created" content="2013-04-30T22:10:01+02:00" />
  12   <meta name="DC.date.modified" content="2013-04-30T22:10:01+02:00" />
  13   <link rel="license" type="text/html" href="http://creativecommons.org/licenses/by-nc-sa/3.0/" />
  14   <link rel="license" type="application/rdf+xml" href="http://creativecommons.org/licenses/by-nc-sa/3.0/rdf" />
  15   <link rel="canonical" href="http://www.netresearch.de/blog/shadowbox-manual-popup-positioning/" />
  16    <link rel="stylesheet" type="text/css" href="tagebuch.css"/>
  17   <link rel="contents" href="./" title="Sitemap"/>
  18   <link rel="author" href="/" title="About the creator of this post"/>
  19
  20   <link rel="prev" href="php-redirection-limit-reached.htm" title="Next blog entry"/>
  21
  22   <link rel="next" href="gitorious-wildcard-search.htm" title="Previous blog entry"/>
  23
  24   <!--[if IE]>
  25   <meta http-equiv="refresh" content="5; url=http://stackoverflow.com/q/9182692/282601">
  26   <![endif]--></head>
  27  <body class="h-entry hentry">
  28  <div class="sidebar">
  29   <!-- date -->
  30   <p>
  31    <span title="2013-04-30T22:10:01+02:00" class="dt-published published">
  32     April 30, 2013   </span>
  33      </p>
  34
  35   <ul class="prevnext">
  36      <li class="next"><a href="gitorious-wildcard-search.htm">Gitorious: Enable wildcard search</a></li>
  37    <li><a href="php-redirection-limit-reached.htm">PHP: Redirection limit reached</a></li>
  38    <li class="up"><a href="./">Tagebuch</a></li>
  39   </ul>
  40
  41   <h3>Tags</h3>
  42   <ul class="tags">
  43      <li><a rel="tag" class="p-category" href="tag/programming">programming</a>
  44     <ul>
  45      <li><a href="json-display.htm">Displaying JSON in your browser</a></li>
  46     </ul>
  47    </li>
  48    <li><a rel="tag" class="p-category" href="tag/web">web</a>
  49     <ul>
  50      <li><a href="json-display.htm">Displaying JSON in your browser</a></li>
  51     </ul>
  52    </li>
  53   </ul>
  54  </div>
  55
  56  <div class="frame">
  57   <h1 class="p-name entry-title">Shadowbox: Manual popup positioning</h1>
  58
  59   <div id="content" class="e-content entry-content">
  60
  61   <div class="warning">
  62    <p>
  63     This article has originally been published on my employer's
  64     blog:
  65     <a href="http://www.netresearch.de/blog/shadowbox-manual-popup-positioning/">
  66      Shadowbox: Manual popup positioning @ netresearch
  67     </a>.
  68    </p>
  69   </div>
  70
  71   <p>
  72    <a href="http://shadowbox-js.com/">Shadowbox</a> can be used to display
  73    images, videos or other HTML pages in a popup on your website.
  74    Sometimes it is necessary to manually adjust the position of the overlay
  75    window, for example when using it in an iframe with a very large
  76    height setting.
  77    Shadowbox itself does not offer a hook to modify the position, but with some
  78    JavaScript trickery it is possible to manipulate the position nevertheless.
  79   </p>
  80   <p>
  81    The idea is - since we have no hook to register with - to replace the
  82    original positioning method with our own.
  83    Since JavaScript allows method renaming, this is fairly easy.
  84   </p>
  85
  86
  87   <h2 id="static-position">Static position<a class="anchorlink" href="#static-position"></a></h2>
  88   <p>
  89    Shadowbox uses method <tt>setDimensions()</tt> to calculate and set position
  90    and size of the popup window.
  91    We rename it and put our own method at this place:
  92   </p>
  93   <pre><code class="lang-js"><![CDATA[<script type="text/javascript">
  94 window.Shadowbox.setDimensionsOld = window.Shadowbox.setDimensions;
  95 window.Shadowbox.setDimensions = function (height, width, maxHeight, maxWidth, topBottom, leftRight, padding, preserveAspect) {
  96     var S = window.Shadowbox;
  97     window.Shadowbox.setDimensionsOld(height, width, maxHeight, maxWidth, topBottom, leftRight, padding, preserveAspect);
  98     window.Shadowbox.dimensions.top = 10;
  99     return window.Shadowbox.dimensions;
 100 }
 101 </script>
 102 ]]></code></pre>
 103   <p>
 104    Now we have our shadowbox popup fixed at 10 pixels from the top of the page.
 105   </p>
 106   <p>
 107    Have a look at the
 108    <a href="demo/shadowbox-manual-positioning/static.html">static positioning demo</a>.
 109   </p>
 110
 111
 112   <h2 id="dynamic-position">Dynamic position<a class="anchorlink" href="#dynamic-position"></a></h2>
 113   <p>
 114    When you have an iframe with some several thousand pixels in height,
 115    you don't want to have a fixed position on top but a position near the mouse
 116    cursor or the element that has been clicked.
 117   </p>
 118   <p>
 119   The following code positions the popup 10 pixels below the object that has
 120   been clicked to open the overlay:
 121   </p>
 122   <pre><code class="lang-js"><![CDATA[<script type="text/javascript">
 123 window.Shadowbox.setDimensionsOld = window.Shadowbox.setDimensions;
 124 window.Shadowbox.setDimensions = function (height, width, maxHeight, maxWidth, topBottom, leftRight, padding, preserveAspect) {
 125     var S = window.Shadowbox;
 126     window.Shadowbox.setDimensionsOld(height, width, maxHeight, maxWidth, topBottom, leftRight, padding, preserveAspect);
 127     if (window.shadowboxClickObj && window.shadowboxClickObj.link) {
 128         var offset = $(window.shadowboxClickObj.link).offset();
 129         window.Shadowbox.dimensions.top = offset.top + 10;
 130         $('#sb-container').css({position: 'absolute', 'height': $(document).height()});
 131     }
 132     return window.Shadowbox.dimensions
 133 }
 134
 135 window.Shadowbox.skin.onOpenOld = window.Shadowbox.skin.onOpen;
 136 window.Shadowbox.skin.onOpen = function(obj, callback) {
 137     window.shadowboxClickObj = obj;
 138     window.Shadowbox.skin.onOpenOld(obj, callback);
 139 }
 140 </script>
 141 ]]></code></pre>
 142   <p>
 143    Here, <tt>onOpen()</tt> needs to be overwritten as well because the clicked
 144   object is not available anymore in <tt>setDimensions()</tt>.
 145   </p>
 146   <p>
 147    Have a look at the
 148    <a href="demo/shadowbox-manual-positioning/dynamic.html">dynamic positioning demo</a>.
 149   </p>
 150
 151   </div>
 152   <div class="comments">
 153    <p>
 154     Comments? Please
 155     <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;Christian%20Weiske%20%3C&#x63;&#x77;&#x65;&#x69;&#x73;&#x6B;&#x65;&#x0040;&#x63;&#x77;&#x65;&#x69;&#x73;&#x6B;&#x65;&#x2E;&#x64;&#x65;%3E?subject=Re:%20Shadowbox%3A%20Manual%20popup%20positioning">send an e-mail</a>.
 156    </p>
 157   </div>
 158  </div></body>
 159 </html>