use css overflow instead of iframe for visualization scrolling

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index aa9878a47ce71bd4456bb49a79c0053d9a797103..b940f36e51c440b1616b469638b7ef0f25a97177 100644 (file)
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -46,7 +46,7 @@ a img { border: none; }
   margin-left: 1em;
 }
 .item_visualization select { width: 200px; }
-.item_visualization img { width: 300px; border: solid 1px black; }
+.item_visualization .viewport { width: 305px; border: solid 1px black; overflow: auto; }
 
 /* Geographic navigator */
 ul.continents, ul.continents ul { list-style: none; margin: 0; padding: 0;}

diff --git a/telemeta/templates/mediaitem_detail.html b/telemeta/templates/mediaitem_detail.html
index 1680be3f9eee5db596c1c97331b3a40e96fe6bfa..dd51c00298a849e675908196e7acc234035f9c8d 100644 (file)
--- a/telemeta/templates/mediaitem_detail.html
+++ b/telemeta/templates/mediaitem_detail.html
@@ -37,8 +37,9 @@
         </script>
       {% endif %}
 
-      <iframe src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" width="300" height="285">
-      </iframe>
+      <div class="viewport">
+        <img src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}">
+      </div>        
       <form method="GET">
         <select name="visualizer_id" onchange="this.form.submit()">
           {% for v in visualizers %}