Create New Campaign

sketch for ML Dashboard

by SebastianPataneMasuelli

HTML

<h2>Bid on this motherfucker</h2>

<article>
    <label>Why?</label>
    <input id="campaignNameInput" type="text"/>
</article>
<article>
    <label>Budget: $</label>
    <input id="campaignBudgetInput" type="text"/>
</article>
<article>
    <label>Your Bid: $</label>
    <input id="campaignBidInput" type="text"/>
</article>


<section id="summary">
    <div id="campaignNameValue">&nbsp;</div>
    <div id="campaignBudgetValue"></div>
    <div id="campaignBidValue"></div>
</section>

CSS

body {
    font-family: Arial, Helverica;   
   width: 600px;
   border: 1px solid gray; 
    margin: 0 auto;
    position: relative;
}

h2 {
   font-size: 1.5em; 
   margin-bottom: 1em;
}

article {
     margin-bottom: 10px;   
}

input[type="text"] {
 color: gray;
 -webkit-border-radius: .5em;
 padding: .1em;    
     
}

label {
  display: inline-block;
  width: 150px;  
  text-align: right;
   vertical-align: middle;
}

#summary {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 200px;
  border: 1px solid gray;
  -webkit-border-radius:.25em; 
  padding: .20em;
  background-color: #fff;
}

/* opacity classes */

.opacity10 {opacity: 1}
.opacity08 {opacity: .8}
.opacity06 {opacity: .6}
.opacity04 {opacity: .4}
.opacity02 {opacity: .2}

JavaScript

//automatically focus on first visible text-field
var firstField = $('input:text:visible:first')
firstField.focus();

//give original opacity values to fields.
firstField.closest('article').css('opacity', '1');
firstField.closest('article').next('article').css('opacity', '.6');
firstField.closest('article').next('article').next('article').css('opacity', '.2');

//place #summary at the top position of the first input
var position = $('input:text:visible:first').position().top;
$('#summary').css('top', position);

//move #summary to the selected input top position
$('input').bind('focus', function() {
    position = $(this).position().top;
    $('#summary').animate({
    top: position
  }, 250, function() {
    // Animation complete.
  });
    
    $(this).closest('article').css('opacity', '1');
    $(this).closest('article').next('article').css('opacity', '.6');
    $(this).closest('article').next('article').next('article').css('opacity', '.2');
});

//
$('input').bind('blur', function() {
        //alert('blur');
        
});

//write input values to the #summary (needs to be refactored);
$('#campaignNameInput').bind('keyup', function() {
    campaignName = $('#campaignNameInput').val();
   $('#campaignNameValue').html(campaignName); 
});

$('#campaignBudgetInput').bind('keyup', function() {
    campaignBudget = "Budget: $" + $('#campaignBudgetInput').val();
   $('#campaignBudgetValue').html(campaignBudget); 
});

$('#campaignBidInput').bind('keyup', function() {
    campaignBid = "Bid: $" + $('#campaignBidInput').val();
   $('#campaignBidValue').html(campaignBid); 
});