How to work mraid script into airpush

Question

I have a query can you help me?I want to publish campaigns with mraid script into airpush and I have tested into mraid simulator (http://webtester.mraid.org/) its run perfectly on that.My script is:

         <div id="adContainer" style="margin:0px;padding:0px;background-color:white;">
        <div id="normal" style="display:none;margin:auto;position:relative;top:0px;left:0px;background-color:white;border-style:solid;border-width:1px;border-color:rgb(238,50,36);" onclick="javascript:resize();"><img id="smallbanner" style="position:relative!important;top:0px;left:0px;" src="http://winnowwin.com/ap/directory2422/21_banner.jpg" />
        <a href="">
        <div style="position:absolute;top:5px;right:5px;background-color:rgb(238,50,36);">
            <div style="width:20px;height:20px;display:table-cell;text-align:center;vertical-align:middle;font-family: Arial, Helvetica, sans-serif;">X</div>
        </div>
        </a>
        </div>
        <div id="resized" style="display:none;margin:auto;position:relative;top:0px;left:0px;background-color:white;border-style:solid;border-width:1px;border-color:rgb(238,50,36);">
        <a href="http://downloadactivity.com/main/click.php?id=qN2jYuhcjQKfEBnTa3SsCg&c2=812_xxx&c3=%dapp%&c4=%pubid%&c5=%carrier%&c6=%campaignid%&c7=%creativeid%&c8=%wifi%&c9=%idfa%" target="_blank"><img id="bigbanner" src="http://winnowwin.com/ap/directory2422/19_bg.png" /></a>
        <div style="position:absolute;top:5px;right:5px;background-color:rgb(238,50,36);">
        <div style="width:20px;height:20px;display:table-cell;text-align:center;vertical-align:middle;font-family: Arial, Helvetica, sans-serif;">X</div>
        </div>
        </div>
        </div>
        <script>
        function collapse() {
        mraid.close();
        }
        function showMyAd() {
        var el = document.getElementById("normal");
        el.style.display = "";
        mraid.addEventListener("stateChange", updateAd);
        }
        function resize() {
        mraid.setResizeProperties({
        "width": bw,
        "height": bh,
        "offsetX": 0,
        "offsetY": 0,
        "allowOffscreen": false
    });
    mraid.resize();
}
    function updateAd(state) {
    if (state == "resized") {
        toggleLayer("normal", "resized");
    } else if (state == "default") {
        toggleLayer("resized", "normal");
    }
}
    function toggleLayer(fromLayer, toLayer) {
    var fromElem = document.getElementById(fromLayer);
    fromElem.style.display = "none";
    var toElem = document.getElementById(toLayer);
    toElem.style.display = "";
}

    function doReadyCheck() {
    var currentPosition = mraid.getCurrentPosition();
    sw = currentPosition.width;
    sh = currentPosition.height;
    var adcon = document.getElementById("adContainer");
    adcon.style.width = sw + "px";
    var sb = document.getElementById("smallbanner");
    sb.height = sh;
    sb.width = sw;
    var nor = document.getElementById("normal");
    nor.style.width = parseInt(sw) - 2 + "px";
    nor.style.height = parseInt(sh) - 2 + "px";
    var maxSize = mraid.getMaxSize();
    bw = maxSize.width;
    bh = maxSize.height;
    var bb = document.getElementById("bigbanner");
    bb.height = bh;
    bb.width = bw;
    var e2 = document.getElementById("resized");
    e2.style.width = bw + "px";
    e2.style.height = bh + "px";
    showMyAd();
    }
    var bw = "";
    var bh = "";
    var sw = "";
    var sh = "";
    doReadyCheck();
    </script>

I'm facing issue, script is not rendering on airpush during published.can you tell me why it is happening?

Answer 1

You problem is you are directly using Mraid related functionality without waiting for mraid container to be in ready state. You need to wait until SDK/Container finishes initializing MRAID library into the webview, without doing will result your ad in bad/corrupt state because most of the mraid related methods will return wrong data or throw exceptions.

So you need to first wait until Mraid is in ready state and then add mraid related listeners or functionality

E.g.

function doReadyCheck()
{
    if (mraid.getState() == 'loading')
    {

        mraid.addEventListener("ready", mraidIsReady);
    }
    else
    {
        mraidIsReady();
    }
}

function mraidIsReady()
{
    mraid.removeEventListener("ready", mraidIsReady);

    //NOTE: Here you shall do rest of the stuff which you are currently doing in doReadyCheck method

    var currentPosition = mraid.getCurrentPosition();
    sw = currentPosition.width;
    sh = currentPosition.height;
    var adcon = document.getElementById("adContainer");
    adcon.style.width = sw + "px";
    var sb = document.getElementById("smallbanner");
    sb.height = sh;
    sb.width = sw;
    var nor = document.getElementById("normal");
    nor.style.width = parseInt(sw) - 2 + "px";
    nor.style.height = parseInt(sh) - 2 + "px";
    var maxSize = mraid.getMaxSize();
    bw = maxSize.width;
    bh = maxSize.height;
    var bb = document.getElementById("bigbanner");
    bb.height = bh;
    bb.width = bw;
    var e2 = document.getElementById("resized");
    e2.style.width = bw + "px";
    e2.style.height = bh + "px";
    showMyAd();        
}
doReadyCheck();