Difference between revisions of "Template:NKU China/js/share"

(Created page with " var debug = true; var igem = document.location.href.includes('https://2016.igem.org/'); //element is $(<img>), which is 100% embed in its parent. So aut...")
 
Line 1: Line 1:
−
        var debug = true;
+
var debug = true;
−
        var igem = document.location.href.includes('https://2016.igem.org/');
+
var igem = document.location.href.includes('https://2016.igem.org/');
−
        //element is $(<img>), which is 100% embed in its parent. So automatically adjust the parent can simultaneously automatically adjust the <img>
+
//element is inner jquery, $('.auto-adjust') is middle jquery. Inner jquery is 100% embed in its parent--middle jquery. So we just need to automatically adjust middle jquery accordingly to outer jquery
−
        var auto_adjust_parent = function (element) {
+
function auto_adjust() {
−
            var impl = function () {
+
    $('.auto-adjust-inner').each(function (index, value) {
−
                var parent = $(element).parent();
+
        var inner = $(value)
−
                parent.width(parent.parent().width());
+
        var middle = inner.parent();
−
                parent.height(parent.parent().width() * 9 / 16);
+
        var outer = middle.parent();
−
            }
+
        var ratio = inner.width() / inner.height();
  
−
            impl();
+
         function impl() {
−
            window.addEventListener('resize', impl)
+
             middle.width(outer.width());
−
         }
+
             middle.height(outer.width() / ratio);
−
        //img is $(<img>), local is local path, igem is igem server's path
+
−
        var load_img = function (img, local, server) {
+
−
             img.each(function (index, value) {
+
−
                var image = new Image();
+
−
                image.onload = function () { $(value).attr('src', image.src); };
+
−
                if (igem)
+
−
                    image.src = server;
+
−
                else
+
−
                    image.src = local;
+
−
            })
+
−
        }
+
−
        //the parameters are all jqueries
+
−
        var switcher = function (tabs, contents_array, tab) {
+
−
             var index = tabs.index(tab);
+
−
            contents_array.forEach(function (value) {
+
−
                value.hide();
+
−
                value.slice(index, index + 1).show();
+
−
            });
+
 
         }
 
         }
 +
 +
        impl();
 +
        window.addEventListener('resize', impl)
 +
    })
 +
}

Revision as of 02:53, 20 August 2016

var debug = true; var igem = document.location.href.includes('https://2016.igem.org/'); //element is inner jquery, $('.auto-adjust') is middle jquery. Inner jquery is 100% embed in its parent--middle jquery. So we just need to automatically adjust middle jquery accordingly to outer jquery function auto_adjust() { 

   $('.auto-adjust-inner').each(function (index, value) {
       var inner = $(value)
       var middle = inner.parent();
       var outer = middle.parent();
       var ratio = inner.width() / inner.height();

       function impl() {
           middle.width(outer.width());
           middle.height(outer.width() / ratio);
       }

       impl();
       window.addEventListener('resize', impl)
   })

}