{Carrer web log} ←

URL to QR Bookmarklet

Monday, June 11, 2012 { 14 Comments }

I thought that it can be handy to have some way to copy web browser url to mobile browser url without wasting time and auto sanding emails. The simple solution can be making the QR code from the current domain and scanning that QR your mobile phone.

I made simple bookmarklet that takes the current web browser url and inserts the QR photo inside the browser. It only takes one line of jQuery code and the simple web services read more here http://www.webmaster-source.com/2010/10/11/generate-qr-codes-on-the-fly-with-the-google-chart-api/

Here is the code used for this bookmarklet(jQuery):



Or pure JavaScript code:


Save some precious time and use this bookmarklet:

URL to QR - Drag or Save this link to your bookmarks


To remove the QR code from the web page simply Refresh the web browser.

If you don't know what is Bookmarklet here is the Wikipedia link

Update: thanks to Gergely Iharosi for the Close Button https://gist.github.com/2909104

14 Responses to “URL to QR Bookmarklet”

1. //  Aaron T. Groggq // 6/11/2012

   This is an absolute DREAM!!
   
   Smallest, most humble of critiques: a "close" link/button on the QR overlay would be helpful, preventing users from having to refresh the page to remove it.
   
   But seriously, f-ing awesome!!
   
   Atg  

2. //  Unknown // 6/11/2012

   I've just created a simple close button:
   https://gist.github.com/2909104  

3. //  Vladimir // 6/11/2012

   @Aaron & @Gergely: Thanks for tip and the script I just implemented the Gergely Close Button :)  

4. //  Tim Iles // 6/11/2012

   The current "close button" code depends on jQuery being loaded in the page (which is often not the case). Try this instead:
   
   document.body.removeChild(document.getElementById('qrcode'));
   
   The rest of it is great!  

5. //  Tim Iles // 6/11/2012

   Hmm, my previous comment is confusing, because of course, you actually are loading jQuery in order to add the img to the DOM in the first place... However $ falls out of scope (for me at least) before I click close, so I get "TypeError: undefined is not a function" (which is where a non-jQuery close button would avoid this problem).  

6. //  thujohn // 6/12/2012

   This comment has been removed by the author.  

7. //  thujohn // 6/12/2012

   I love this code !!! Thank you for this !
   
   But I don't like the current version in pure javascript so I modified a little : https://raw.github.com/gist/2916062/21ce2cc2adc8e10e90f0d3a62e326222b0b1703f/gistfile1.js  

8. //  Aaron T. Grogg // 6/12/2012

   Odd, clicking the new "X" button on this page gives me a "undefined is not a function" error, but it works on other pages...
   
   FYI,
   Atg  

9. //  thujohn // 6/12/2012

   A little fix for IE : https://raw.github.com/gist/2916062/96edb0a209f2bfd03442b88a11c83c93f78247c6/gistfile1.js  

10. //  Vladimir // 6/12/2012

    @thujohn: Nice. I love when developer community offers some other cool solutions and personalizations.
    There also some cools personalizations and solutions from reddit: http://www.reddit.com/r/javascript/comments/uvywq/show_reddit_url_to_qr_bookmarklet_one_line_of/  

11. //  thujohn // 6/12/2012

    Thank you :)
    
    There is only one solution in pure javascript and it only hides the DIV :/
    I prefer to delete all ;)  

12. //  Unknown // 6/13/2012

    I've just updated the code. Now it's getting similar than fancybox. And it's pure javascript. Hope you like it.
    
    https://gist.github.com/2909104  

13. //  thujohn // 6/13/2012

    This is obviously prettier :)  

14. //  Vladimir // 6/13/2012

    @ Gergely Iharosi: Much better! I have some problems in Safari with the Close Button "SyntaxError: Return statements are only valid inside functions".  

Post a Comment

<< Home