Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow asynchronous loading of CoinWidget #11

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Conversation

q--
Copy link

@q-- q-- commented Jan 7, 2014

Currently, CoinWidget needs to wait until the coin.js script is loaded, blocking the loading of a page.

<script src="coin.js"></script>
<script>
//Synchronous: the script needs to be loaded before this function can be called and the widget will be created at the place where the function is called. It isn't possible to call it after page load.
CoinWidgetCom.go({

    /* make sure you update the wallet_address or you will not get your donations */
    wallet_address: "122MeuyZpYz4GSHNrF98e6dnQCXZfHJeGS"

    , currency: "bitcoin"
    , counter: "count"
    , alignment: "bl"
    , qrcode: true
    , auto_show: false
    , lbl_button: "Donate"
    , lbl_address: "Donate Bitcoin to this Address:"
    , lbl_count: "donations"
    , lbl_amount: "BTC"
});
</script>

With the new code, it will be possible to do it as follows:

<span id='put_coinwidget_here'></span>
<!--The rest of the HTML document-->
Bottom of the page:
<script src='coin.js'></script>
//Asynchronous: replace an element with the CoinWidget
CoinWidgetCom.go({

    /* make sure you update the wallet_address or you will not get your donations */
    wallet_address: "122MeuyZpYz4GSHNrF98e6dnQCXZfHJeGS"

    , currency: "bitcoin"
    , counter: "count"
    , alignment: "bl"
    , qrcode: true
    , auto_show: false
    , lbl_button: "Donate"
    , lbl_address: "Donate Bitcoin to this Address:"
    , lbl_count: "donations"
    , lbl_amount: "BTC"
}, "#put_coinwidget_here");

Edit: The old way still works, by the way.
Another edit: The 2nd argument can be one of the following:

  1. A reference to an HTML element; e.g. var element=document.body.firstChild;CoinWidgetCom.go({},element);
  2. A jQuery wrapper for an HTML element; e.g. var element=$("#test");CoinWidgetCom.go({},element);
  3. A list of HTML nodes, where the first one will be replaced; e.g. var elements=document.getElementsByClassName('test');CoinWidgetCom.go({},elements);
  4. A string starting with a # followed by the ID of the element to be replaced; e.g. var element='#test';CoinWidgetCom.go({},element);
  5. A string starting with a . followed by the class of the element to be replaced, where the first element with the class will be replaced; e.g. var element='.test';CoinWidgetCom.go({},element);
  6. A string with the ID of the element to be replaced; e.g. var element='test';CoinWidgetCom.go({},element);

q-- added 3 commits January 7, 2014 11:41
By passing an element to replace as the second parameter to
CoinWidgetCom.go() or the ID of the element or the CLASS of the element it
will replace that instead of using document.write()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants