showing url as a QR code
(function() { | |
function cssAsNum(width){ | |
return Number(width.replace("px","")) | |
} | |
var body,img; | |
body = document.body; | |
img = document.createElement("img"); | |
img.style.userSelect = "none"; | |
img.style.position = "fixed"; | |
img.style.zIndex = 999999; | |
img.style.display = "none"; | |
img.src = 'http://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=' + escape(window.location.href); | |
body.appendChild(img); | |
img.onclick = function() { | |
body.removeChild(img); | |
}; | |
img.onload = function() { | |
var imgStyle; | |
img.style.display = ""; | |
imgStyle = window.getComputedStyle(img, null); | |
img.style.left = (window.screen.width / 2 - cssAsNum(imgStyle.width) / 2) + "px"; | |
img.style.top = (window.screen.height / 2 - cssAsNum(imgStyle.height) / 2) + "px"; | |
}; | |
if(img.complete) { | |
img.onload(); | |
} | |
})(); |
(function($) { | |
var img,body; | |
img = $('<img style="user-select: none;position:fixed;z-index:999999" src="http://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=' + escape(window.location.href) + '">'); | |
body = $(document.body); | |
img | |
.prependTo(body) | |
.hide() | |
.click(function() { | |
img.fadeOut(function(){ | |
img.remove(); | |
}) | |
}) | |
.on("load", function() { | |
img.show().css({ | |
left: $(window).width()/2 - img.width()/2, | |
top: $(window).height()/2 - img.height()/2 | |
}) | |
}); | |
if(img.prop("complete")) { | |
img.load(); | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Wow, thank you for this beautiful code.
I tested the plugin but wanted to request if you could assist me for a way to place the QR at the Top Left side around the area proportion of 30% if we should determine center is at 50%
As yes the center is right, but on my end, it gets hidden due to the reason that I already use another element at the center
Could you kindly share areas a code could use at the child theme to resolve it
Thanks in advance