Show Dynamic Content

Building on the Quick Start example, you can change the content of the card dynamically using the flipping event. In this case, we change the content based on the user's entry in an <input> element.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which uses the flipping event to change the backPanel content based on the value entered in the input.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijflipcard"], function () { $(document).ready(function () { $("#playingflipcard").wijflipcard({ flipping: function (e, data) { if (document.querySelector("#num").value === "7") { data.backPanel.html('<img src="http://lorempixel.com/160/180/animals/7/SIGNS%20POINT%20TO%20YES/"/>'); } else if (document.querySelector("#num").value === "5") { data.backPanel.html('<img src="http://lorempixel.com/160/180/cats/1/Try%20again%20BRING%20TREATS/"/>'); } else { data.backPanel.html('<img src="http://lorempixel.com/160/180/animals/6/HECKS%20NO/"/>'); } } }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#playingflipcard").wijflipcard({
            flipping: function (e, data) {
                if (document.querySelector("#num").value === "7") {
                data.backPanel.html('<img src="http://lorempixel.com/160/180/animals/7/SIGNS%20POINT%20TO%20YES/"/>');
                }
                else if (document.querySelector("#num").value === "5") {
                data.backPanel.html('<img src="http://lorempixel.com/160/180/cats/1/Try%20again%20BRING%20TREATS/"/>');
                }
                else {
                data.backPanel.html('<img src="http://lorempixel.com/160/180/animals/6/HECKS%20NO/"/>');
                }
            }
        });
    });
});
</script>

Replace the markup within the <body> tags with the following. The <div> element creates the widget, and we call its id attribute in jQuery to initialize it. Two nested <div> elements hold content for the front and back panels, and an <input> element collects data that we use to determine the content to show in the back panel.

Markup	Copy Code
<div id="playingflipcard"> <div style="text-align:center"> <img src="Images\wijmo.png" /> </div> <div style="text-align:center"> Back Panel </div> </div> <br/> <input id="num" type="text" size="2"></input> <p>With your yes or no question in <br/> mind, enter a number between one <br/> and ten, and then click the card <br/> to receive your reading. Click the<br/> card again to flip it back over.</p>

Markup

Copy Code

<div id="playingflipcard">
    <div style="text-align:center"> 
        <img src="Images\wijmo.png" />
    </div>
    <div style="text-align:center">
        Back Panel
    </div>
</div>
<br/>
<input id="num" type="text" size="2"></input>
<p>With your yes or no question in <br/>
   mind, enter a number between one <br/>
   and ten, and then click the card <br/>
   to receive your reading. Click the<br/>
   card again to flip it back over.</p>

Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Enter a number and click the card to flip it, and click it again to flip it back. Try different numbers (5 and 7) to see the content change.

Widgets

FlipCard

Quick Start