Changeset - 6e49d079dae5
[Not reviewed]
0 2 0
Bradley Kuhn (bkuhn) - 11 years ago 2013-05-01 02:17:04
bkuhn@ebb.org
Create pop-down of text for other donation methods.

For those methods that require further explanation, configure so that the
text appears upon clicking.
2 files changed with 44 insertions and 1 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/campaign/index.html
Show inline comments
...
 
@@ -5,24 +5,43 @@
 
{% block head %}
 
<link href="/jquery-ui.css" rel="stylesheet" type="text/css"/>
 
<script src="/jquery.min.js"></script>
 
<script src="/jquery-ui.min.js"></script>
 

	
 
<style type="text/css">
 
  #progressbar .ui-widget-header { background: rgb(206, 31, 31); }
 
</style>
 

	
 
<script type="text/javascript">
 
  $(document).ready(function() {
 
    $("#progressbar").progressbar({ value: (2515 / 75000) * 100 });
 

	
 
    $('.toggle-content').hide();
 

	
 
    $('.toggle-control')
 
     .addClass('clickable')
 
     .bind('click', function() {
 
        var $control = $(this);
 
        var $parent = $control.parents('.toggle-unit');
 

	
 
        $parent.toggleClass('expanded');
 
        $parent.find('.toggle-content').slideToggle();
 

	
 
        // if control has HTML5 data attributes, use to update text
 
        if ($parent.hasClass('expanded')) {
 
            $control.html($control.attr('data-expanded-text'));
 
        } else {
 
            $control.html($control.attr('data-text'));
 
        }
 
    })
 
  });
 
</script>
 
{% endblock %}
 

	
 
{% block content %}
 

	
 
<div style="position:fixed;top:180px;right:2%;width=18%">
 
<table style="background-color:#afe478;width=100%;">
 
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">
 

	
 
<!--
 
<script type="text/javascript" src="https://js.balancedpayments.com/v1/balanced.js"></script>
...
 
@@ -234,25 +253,47 @@ evbind(document.getElementById('bank-account-form'), 'submit',
 
 },
 
    function(response) {
 
      console.log(response);
 
      console.log(response.data.uri);
 
      $.ajax("/campaign/?token=" + response.data.uri + '&amount=' + document.getElementById('bank-account-form').ba_an.value);
 
      alert(response.status);
 
    });
 
});
 

	
 
</script>
 
- Balanced end -->
 

	
 
<p>Contact <a href="mailto:accounting@sfconservancy.org">Conservancy by email</a><br/> for other donation methods.</p>
 
<div class="toggle-unit">
 
    <h4 class="toggle-control" data-text="Donate by Wire Transfer?" 
 
    data-expanded-text="Donate by Wire Transfer:">Donate by Wire Transfer?</h4>
 
    <div class="toggle-content">
 
        Please
 
            contact <a href="mailto:accounting@sfconservancy.org">Conservancy
 
            by email</a><br/> for wire transfer instructions.<br/>
 
            Please Include your currency and country.<br/>
 
    </div><!-- /.toggle-content -->
 
</div><!-- /.toggle.unit -->
 

	
 
<div class="toggle-unit">
 
    <h4 class="toggle-control" data-text="Donate by Paper Check?" 
 
    data-expanded-text="Donate by Paper Check:">Donate by Paper Check?</h4>
 
    <div class="toggle-content">
 
    Send paper check donations to:<br/>
 
    Software Freedom Conservancy, Inc.<br/>
 
    137 MONTAGUE ST  STE 380<br/>
 
    BROOKLYN, NY 11201-3548<br/>
 
    Please write <q>NPO ACCOUNTING</q> in the memo line. 
 
    </div><!-- /.toggle-content -->
 
</div><!-- /.toggle.unit -->
 

	
 

	
 
</td></tr></table>
 
</div>
 

	
 
<div style="align:left;width:75%;">
 
<!-- begin campaign text -->
 

	
 
<h2>Fundraising Campaign: Non-Profit Accounting Software</h2>
 

	
 
<img src="/img/conservancy-accounting-campaign-logo.png" alt="Conservancy accounting campaign logo" style="float:left;" />
 

	
 
<p>Please help all non-profit organizations (NPOs) by <a href="http://sfconservancy.org/campaign">donating</a> to Conservancy
www/conservancy/static/conservancy.css
Show inline comments
...
 
@@ -263,12 +263,14 @@ body.conservancy-campaign #navbar ul li.campaign a
 
  margin-top: 10px;
 
  text-align: center;
 
  list-style: none;
 
  margin-right: 5px;
 

	
 
#subbox {
 
   position: absolute;
 
   padding-top: 10px;
 
   right: 0px;
 
   width: 200px;
 
   font-size: 12px;
 
}
 

	
 
.clickable {cursor: pointer;}
0 comments (0 inline, 0 general)