Advanced Search

Pixel Perfect technique with jQuery

/ Published in: JavaScript
Save to your folder(s)
Pixel Perfect technique with jQuery

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // EXAMPLE:
  2. // http://jsfiddle.net/vvvvvv/3r0wLk5L/
  3.  
  4. // https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/
  5.  
  6. (function(){
  7.   var CONFIG = {
  8.     // Change to real path/to/image.png
  9.     path: 'image.png',
  10.     // Change to height of background image
  11.     height: '400',
  12.     // Preferred key binding
  13.     keys: 'alt+q',
  14.   };
  15.   function loadExtScript(src,test,callback) {
  16.     if(window.jQuery) {
  17.       callback();
  18.     } else {
  19.       var s = document.createElement('script');
  20.       s.src = src;
  21.       document.body.appendChild(s);
  22.       var callbackTimer = setInterval(function(){
  23.         var call = false;
  24.         try {
  25.           call = test.call();
  26.         } catch(e) {}
  27.         if(call) {
  28.           clearInterval(callbackTimer);
  29.           callback.call();
  30.         }
  31.       },100);
  32.     }
  33.   }
  34.   loadExtScript('https://yandex.st/jquery/2.1.1/jquery.min.js',function(){
  35.     return (typeof $ == 'function');
  36.   },function(){
  37.     $(function(){
  38.       $.ajax({
  39.         type: 'GET',
  40.         url: 'https://rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js',
  41.         dataType: 'script',
  42.         success: function(){
  43.           $('body').prepend('<div id="pixp" style="background: url('+CONFIG.path+') top center no-repeat; position: absolute; width: 100%; top: '+parseInt($('body').css('margin-top'))+'px; height: '+CONFIG.height+'px; opacity: .5; z-index: -1;"></div>');
  44.           $('#pixp').css({
  45.             'width': ( $('body').width() - ( parseInt($('body').css('margin-left')) + parseInt($('body').css('margin-right')) ) )+'px',
  46.             'padding': $('body').css('margin'),
  47.           });
  48.           $(document).bind('keydown',CONFIG.keys,function(){
  49.             if($('#pixp').css('opacity') == 1) {
  50.               $('body > *').fadeTo(0,1);
  51.               $('#pixp').fadeTo(0,0.5);
  52.             } else {
  53.               $('body > *').fadeTo(0,0.5);
  54.               $('#pixp').fadeTo(0,1);
  55.             }
  56.           });
  57.         },
  58.       });
  59.     });
  60.   });
  61. })();

URL: http://jsfiddle.net/vvvvvv/3r0wLk5L/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.