{Carrer web log}


Blog about web design & development

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. // Anonymous 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. // Blogger Gergely Iharosi // 6/11/2012

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

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

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

  4. // Anonymous 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. // Anonymous 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. // Blogger thujohn // 6/12/2012

    This comment has been removed by the author.  

  7. // Blogger 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. // Anonymous 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. // Blogger thujohn // 6/12/2012

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

  10. // Blogger 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. // Blogger 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. // Blogger Gergely Iharosi // 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. // Blogger thujohn // 6/13/2012

    This is obviously prettier :)  

  14. // Blogger 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

Content is licensed under a Creative Commons Public Domain License