Zoom buttons on notes

diff --git a/karmaworld/assets/js/note-iframe.js b/karmaworld/assets/js/note-iframe.js
index 22f7bea6deb110cb3ef94ad2053dce855fbac04b..48ec0c7526621d291cffc6af1d618548fde97c7b 100644 (file)
--- a/karmaworld/assets/js/note-iframe.js
+++ b/karmaworld/assets/js/note-iframe.js
@@ -1,15 +1,42 @@
-  // resize the iframe based on internal contents on page load
-  function autoResize(id){
-      var newheight;
-      var newwidth;
-
-      if(document.getElementById){
-        newheight = document.getElementById(id).contentWindow.document .body.scrollHeight;
-        newwidth = document.getElementById(id).contentWindow.document .body.scrollWidth;
-      }
-
-      document.getElementById(id).height = (newheight+ 10) + "px";
-      document.getElementById(id).width= (newwidth + 5) + "px";
-      //alert('height: ' + newheight);
+// resize the iframe based on internal contents on page load
+function autoResize(id){
+  var newheight;
+  var newwidth;
+
+  if(document.getElementById){
+    newheight = document.getElementById(id).contentWindow.document .body.scrollHeight;
+    newwidth = document.getElementById(id).contentWindow.document .body.scrollWidth;
   }
 
+  document.getElementById(id).height = (newheight+ 10) + "px";
+  document.getElementById(id).width= (newwidth + 5) + "px";
+
+
+  var currFFZoom = 1;
+  var currIEZoom = 100;
+  var frameBody = $('#noteframe').contents().find('body');
+
+  $('#plus-btn').on('click',function(){
+    if ($.browser.mozilla){
+      var step = 0.25;
+      currFFZoom += step;
+      frameBody.css('MozTransform','scale(' + currFFZoom + ')');
+    } else {
+      var step = 25;
+      currIEZoom += step;
+      frameBody.css('zoom', ' ' + currIEZoom + '%');
+    }
+  });
+
+  $('#minus-btn').on('click',function(){
+    if ($.browser.mozilla){
+      var step = 0.25;
+      currFFZoom -= step;
+      frameBody.css('MozTransform','scale(' + currFFZoom + ')');
+    } else {
+      var step = 25;
+      currIEZoom -= step;
+      frameBody.css('zoom', ' ' + currIEZoom + '%');
+    }
+  });
+}

diff --git a/karmaworld/templates/base.html b/karmaworld/templates/base.html
index 40c657ad8ecae6415458d5b4e8dc281fef411223..0f2d719d128641edaab29a23660960db5605ebf3 100644 (file)
--- a/karmaworld/templates/base.html
+++ b/karmaworld/templates/base.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/lightbox.css">
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
   <!-- include Font Awesome -->
-  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index 4c4c2949495cec9bd7d49a1534640dfe4d80c2cb..5eadb1c388be19e58c30c66ce67868fef0552551 100644 (file)
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -32,8 +32,10 @@
       </div>
 
       <div class="row">
-        <div class="small-10 columns small-offset-1">
+        <div class="small-10 small-centered columns small-offset-1 center" style="padding-bottom: 20px;">
           <hr/>
+          <i id="minus-btn" class="fa fa-search-minus fa-2x" style="margin-right: 10px; cursor: pointer"></i>
+          <i id="plus-btn" class="fa fa-search-plus fa-2x" style="cursor: pointer"></i>
         </div>
       </div>