Interim Notification

until we come up with a better plan

by SebastianPataneMasuelli

HTML

<link rel="stylesheet" href="http://my.admarketplace.com//frontend_common/css/screen-fluid.css">
<link rel="stylesheet" href="https://amp.admarketplace.com/direct_advertiser/css/daui-fluid.css">
<div class="interim_notification">
    <a id="close_this" class="float_right close_box" href="#" title="close this notice">
        <span class="normal">close </span><span class="extra_large">x</span>
    </a>
    
    
    <h3 class="float_left gray">We've changed this page!</h3>
    <select class="questions float_left">
        <option>Now you can...</option>
        <option value="1">Sort.</option>
        <option value="2">Perform Bulk Changes.</option>
        <option value="3">Edit Ad Group Properties.</option>
        <option value="4">Review your ad copy.</option>
    </select>
    <div data-answer="1" class="answer clear nodisplay">
        Sort metrics by Ad Group.
    </div>
    <div data-answer="2" class="answer clear nodisplay">
       <!-- Perform bulk changes by checking the boxes next to the items you want to change and choose an option from the “Select Action” drop down box. -->
        Perform bulk changes by: 
        <ol>   
            <li>
              checking the boxes next to the items you want to change
            </li>
            <li>
              choosing an option from the “Select Action” drop down box. 
            </li>
        </ol>
        See this on your Ad Group, Keyword Details, and Category Details pages.
    </div>
    <div data-answer="3" class="answer clear nodisplay">
        Click on the name of the Ad Group to edit its properties and targeting.
    </div>
    <div data-answer="4" class="answer clear nodisplay">
        See how your ad copy will look right in the Ad Group Grid, now in a sub-grid under individual Ad Groups. Just click the [+] sign or “view creatives” to see the creatives and their metrics.
    </div>
    <div class="clear"></div>     
</div>

test content

CSS

.interim_notification {
    margin: 20px 0pt; 
    background: none repeat scroll 0% 0% rgb(255, 255, 153); 
    padding: 8px; 
    border-radius: 0.8em 0.8em 0.8em 0.8em;
    width: auto;
}

.interim_notification a.close_box {
    margin-right: 8px;
}

.interim_notification ol {
    list-style-type: decimal;   
    margin-left: 30px;
}

.interim_notification h3 {
    margin-left: 8px; 
    margin-bottom: 0px; 
    border-bottom-width: 0px;
    width: 260px;
}

.interim_notification h4 {
    margin: 0 0 0 0;
    border-bottom-width: 0px;
}

.interim_notification select {
    margin: 8px 0pt 0pt 10px;
}

.interim_notification div {
    margin: 8px 0px 0px 281px;
}

JavaScript

$('.interim_notification').each(function(){
    var $that = $(this);
    $that.find('.questions').bind('change', function(){
        var val = $(this).val(),
            $visibleAnswer = $that.find('.answer:visible');
         
        // just slide down if nothing is visible
         if($visibleAnswer.size() === 0) {
            $that.find('[data-answer="' + val + '"]').slideDown('slow');
         }
        
        // slide up the visible answer and slide down the selected answer
        $visibleAnswer.slideUp('fast', function(){
            $that.find('[data-answer="' + val + '"]').slideDown('slow');
        });       
    })
});


$('#close_this').bind('click', function() {
    $(this).parent().slideUp('slow');
});