Pixel Perfect technique with jQuery


/ Published in: JavaScript
Save to your folder(s)

Pixel Perfect technique with jQuery


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.