Skip to content
This repository
tree: 45ee73faa5
Fetching contributors…

Cannot retrieve contributors at this time

file 79 lines (65 sloc) 2.976 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Live Preview</title>

    <!-- JS Dependencies -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/dragdrop/dragdrop-min.js"></script>
    <style>
    #context{position: absolute;left: 0;width:99.5%;height:100%;z-index:0;overflow: auto;}
    #creative {position: absolute;left: 40%;top: 40%;z-index: 100; zoom: 1; width: 256px; height: 370px;}
    #adTranslucent {background-color: black;position: absolute;height: 100%;width: 100%;z-index: -50;opacity: .4;filter:alpha(opacity=40);-moz-opacity:0.4;visibility: hidden;}
    #adInstructions {width: 250px;color: #fff;background-color: black;padding: 3px;text-align: center;visibility: hidden;}
    #adContainer {margin: 10px 10px 15px 10px;border: 1px solid #666;}
    .clearBoth {clear: both;}
    #title {background-color: #FFF9DD;border: 1px solid #aaa;padding: 4px 10px;}
    #title .caption {float: right;font-weight: bold;font-size: 11pt;}
    </style>
</head>

<body>
    <div id="title">
        <div class="caption">
            To move your Ad, hover over the image and drag the border area.
        </div>
        <b>Live Preview</b>
        <div id="creativeName"></div>
    </div>
    <iframe id="context" style="height:1000px;"></iframe>
    <div id="creative">
        <div id="adTranslucent" style="background-color:#cc2;"></div>
        <div id="adInstructions">To move, drag border area.</div>
        <div id="adContainer"></div>
    </div>
    <div id="mask"></div>
</body>
<script language="javascript">
var strO = '<img style="border:none" src="http://us.js2.yimg.com/us.yimg.com/i/us/sch/gr3/ngsprt_20080225.png"/>';
</script>
<script type="text/javascript">
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;

function showDrag(e) {
    Dom.setStyle( "adInstructions", "visibility", "visible" );
    Dom.setStyle( "adTranslucent", "visibility", "visible" );
}

function hideDrag(e) {
    Dom.setStyle( "adInstructions", "visibility", "hidden" );
    Dom.setStyle( "adTranslucent", "visibility", "hidden" );
}
// variable to hold the draggable ad object
var dd;

(function() {
    YAHOO.util.Event.onDOMReady(function() {
        Dom.get( 'context' ).src = "http://search.yahoo.com";

        document.getElementById('creativeName').innerHTML = "Some title"
        document.getElementById('adContainer').innerHTML = strO;


        Event.addListener("creative", "mouseover", showDrag);
        Event.addListener("creative", "mouseout", hideDrag);

        Event.addListener("adContainer", "mouseover", hideDrag);
        Event.addListener("adContainer", "mouseout", showDrag);

        dd = new YAHOO.util.DD("creative");

    });
})();


</script>

</html>
Something went wrong with that request. Please try again.