testing

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">


<audio src="http://imagins.ro/snd/bubble.mp3" id="yes"></audio>
<audio src="http://imagins.ro/snd/wrong2.mp3" id="no"></audio>
<div data-role="popup" id="foo" data-history="false" data-overlay-theme="b" data-theme="b">
    <div class="ui-content">
        <p class="msg"></p> <a href="#" data-rel="back" class="ui-btn else showcontinue"></a>
    </div>
</div>

<!--ENTRY PAGE-->
<div data-role="page" id="intro">
    <div data-role="main" class="ui-content">
        <a href="#pageone" data-transition="slide"><img src="http://www.clker.com/cliparts/V/K/J/Q/5/W/harta-albastra-romania-md.png" /></a>
 <a href="#firstmage" id="resume" data-role="button" style="display:none;">Continue</a>
    </div>
</div>
<!--FIRST PAGE-->
<div data-role="page" id="pageone">
    <div class="hide answer">dog</div>
    <div class="hide accepted">hound.canine</div>

    <a href="#hint2" data-rel="popup" data-position-to="window" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">Open Popup</a>

<div data-role="popup" id="hint2">
    <h3>Hint:</h3>
    <p>This is a completely basic popup, no options set.</p>
</div>
    
    <div data-role="main" class="ui-content">
        <img src="http://images.clipartpanda.com/clipart-dog-dog_silhouette_Clip_Art.png" />
    </div>
    <div data-role="footer" id="footer" class="ui-footer ui-bar-footer">
        <input type="text" class="" />
    </div>
</div>
<!--SECOND PAGE-->
<div data-role="page" id="pagetwo">
    <div class="hide answer">cat</div>
    <div class="hide accepted">kitten.kitty.puss</div>

    <a href="#hint" data-rel="popup" data-position-to="window" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">Open Popup</a>

<div data-role="popup" id="hint">
    <h3>Hint:</h3>
    <p>This is a completely basic popup, no options set.</p>
</div>
    
    <div data-role="main" class="ui-content">
    ...

CSS

.hide {
    display:none;
}
img {
    width:250px;
    height:auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.ui-popup {
    background-color:rgba(0, 0, 0, 0.7);
}
.ui-popup-screen {
    background-color: #000 !important;
    opacity: 0.5 !important;
}
div.ui-input-text {
    width: 90% !important;
    margin-left:auto;
    margin-right:auto;
    border:none;
}
.correct {
    background-color:#D7FFE7 !important;
}
.accepted {
    background-color:#FFE9C2 !important;
}
.wrong {
    background-color:#FFDED7 !important;
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    bottom:0;
}
.ui-footer.ui-bar-footer {
    border: 0 none;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #009999), color-stop(1, #076e8c));
    z-index:9000;
}
#tips {
    position:absolute;
    right:10px;
    top:10px;
}

JavaScript

$(document).on("pagecontainerhide", function (e, data) {
        var page = data.toPage.attr('id');
        console.log(page);
        localStorage.setItem('page', page);
        var test = localStorage.getItem('page');
        var resume = "#" + test;
        $("#resume").attr("href", resume);
    }).on("pagecontainerbeforechange", function (e, data) {
        if (typeof data.toPage == "object" && typeof data.prevPage == "undefined" && typeof localStorage.getItem('page') != "undefined") {
            data.toPage = "#"+localStorage.getItem('page');
        }
        
        $('.showcontinue').click(function(e) {
            $('#resume').delay(300).fadeIn();
        });
});