Changeset - efe90bd2d04e
Parent rev.
Child rev.
[Not reviewed]
0 3 0
Bradley Kuhn (bkuhn) - 9 years ago 2015-03-09 15:46:16
bkuhn@ebb.org
Better animation effects when donate link clicked.

The banner always faded in/out, but now other texts can be designated
with the class 'donate-box-highlight' and those will fade out and fade
back in with bold and slightly larger font.
3 files changed with 16 insertions and 8 deletions:
www/conservancy/static/npoacct/index.html
2
2
www/conservancy/static/supporter-page.js
10
2
www/conservancy/templates/base_compliance.html
4
4
0 comments (0 inline, 0 general)
www/conservancy/static/npoacct/index.html
➞
Show inline comments
...
 
@@ -100,25 +100,25 @@ el.attachEvent('on'+ev, function() {handler.apply(el);});
 
        balanced.bankAccount.create(bankAccountData, responseCallbackHandler);
 
    };
 
   $('#bank-account-form').submit(tokenizeInstrument);
 
*/
 
</script>
 
-->
 
<h3>Support NPO Accounting Project Now!</h3>
 
$<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span> raised toward<br/>
 
our $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|intcomma  }}</span> goal.<br/>
 
<div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>
 
<p style="font-size: 75%">(Progress bar updated daily.)</p>
 
<a id="donate" style="text-decoration:none"></a>
 
<h3>Help us reach our goal:</h3>
 
<h3 class="donate-box-highlight">Help us reach our goal:</h3>
 

			




	
	
	
		
 
<!-- PayPal start -->


			




	
	
	
		
 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">


			




	
	
	
		
 
<input type="hidden" name="cmd" value="_s-xclick">


			




	
	
	
		
 
<input type="hidden" name="hosted_button_id" value="3VRTJALJ5PQRW">


			




	
	
	
		
 
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" style="border:0" name="submit" alt="Donate Now!">


			




	
	
	
		
 
<img alt="" style="border:0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">


			




	
	
	
		
 
</form>


			




	
	
	
		
 
<!-- PayPal end -->


			




	
	
	
		
 

			




	
	
	
		
 
<!-- Balanced start -


			




	
	
	
		
 
<div class="container">


			




	...
	
		
 
@@ -195,25 +195,25 @@ 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>


			




	
	
	
		
 
Other donation methods:


			




	
	
	
		
 
  <span class="donate-box-highlight">Other donation methods:</span>


			




	
	
	
		
 
<div class="toggle-unit">


			




	
	
	
		
 
    <h4 class="toggle-control" data-text="Wire Transfer" 

			




	
	
	
		
 
    data-expanded-text="Wire Transfer:">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">


			




        

    


    
    

    

        

                

                    www/conservancy/static/supporter-page.js
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	...
	
		
 
@@ -50,28 +50,36 @@ $(document).ready(function() {


			




	
	
	
		
 

			




	
	
	
		
 
        // 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'));


			




	
	
	
		
 
        }


			




	
	
	
		
 
    });


			




	
	
	
		
 
    $('a.donate-now')


			




	
	
	
		
 
      .addClass('clickable')


			




	
	
	
		
 
      .bind('click', function() {


			




	
	
	
		
 
        var $control = $('#donate-box');


			




	
	
	
		
 
        var $otherTextControl = $('.donate-sidebar');


			




	
	
	
		
 

			




	
	
	
		
 
        setTimeout(function() { $control.find('.toggle-content').slideUp(100);


			




	
	
	
		
 
                                $control.toggleClass('expanded');


			




	
	
	
		
 
        $control.find('.toggle-content').slideUp("slow");


			




	
	
	
		
 
        $control.find('.toggle-content').slideDown("slow");


			




	
	
	
		
 
                                $control.find('.toggle-content').slideDown(800).fadeOut(10);


			




	
	
	
		
 
                                $otherTextControl.find('.donate-box-highlight').fadeOut(100);


			




	
	
	
		
 
                              }, 300);


			




	
	
	
		
 
          setTimeout(function() { $control.find('.toggle-content').fadeIn(2000);


			




	
	
	
		
 
                                  $otherTextControl.find('.donate-box-highlight')


			




	
	
	
		
 
                                  .css({'font-weight': 'bold', 'font-size' : '110%' });


			




	
	
	
		
 
                                  $otherTextControl.find('.donate-box-highlight').fadeIn(10000);


			




	
	
	
		
 
                                }, 500);


			




	
	
	
		
 
    });


			




	
	
	
		
 
    $(".t-shirt-size-selector").hide();


			




	
	
	
		
 
    $('input[name=on0]:radio').change(function() {


			




	
	
	
		
 
        var input=$(this);


			




	
	
	
		
 
        var tShirtSelector = input.parent().children('.t-shirt-size-selector')


			




	
	
	
		
 
        var noShippingSelector = input.parent().children('input#no_shipping');


			




	
	
	
		
 
        var value = input.val();


			




	
	
	
		
 
        if (value == "wantGiftYes") {


			




	
	
	
		
 
            tShirtSelector.show();


			




	
	
	
		
 
            noShippingSelector.val("2");


			




	
	
	
		
 
        } else {


			




	
	
	
		
 
            tShirtSelector.hide();


			




        

    


    
    

    

        

                

                    www/conservancy/templates/base_compliance.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	...
	
		
 
@@ -10,45 +10,45 @@


			




	
	
	
		
 

			




	
	
	
		
 
{% endblock %}


			




	
	
	
		
 

			




	
	
	
		
 
{% block outercontent %}


			




	
	
	
		
 
<div class="donate-sidebar">


			




	
	
	
		
 
<table style="background-color:#afe478;width:100%;">


			




	
	
	
		
 
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">


			




	
	
	
		
 
<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Support


			




	
	
	
		
 
    Now!</h1></div>


			




	
	
	
		
 

			




	
	
	
		
 
<h3>Support GPL Compliance Now!</h3>


			




	
	
	
		
 

			




	
	
	
		
 
<p>Support our GPL compliance work now &amp; <strong>donations count double!</strong></p>


			




	
	
	
		
 
<p>Support our GPL compliance work now &amp; <span class="donate-box-highlight">donations count double!</span></p>


			




	
	
	
		
 

			




	
	
	
		
 
{% cache 3600 compliancedonation fundgoal.fundraiser_so_far_amount %}


			




	
	
	
		
 
$<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span>


			




	
	
	
		
 
of $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|intcomma  }}</span> match met.<br/>


			




	
	
	
		
 
<div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>


			




	
	
	
		
 
{% endcache %}


			




	
	
	
		
 

			




	
	
	
		
 
<p>Donate now via PayPal:


			




	
	
	
		
 
<p><span class="donate-box-highlight">Donate now via PayPal:</span>


			




	
	
	
		
 
</p>


			




	
	
	
		
 
<!-- PayPal start -->


			




	
	
	
		
 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">


			




	
	
	
		
 
<input type="hidden" name="cmd" value="_s-xclick">


			




	
	
	
		
 
<input type="hidden" name="hosted_button_id" value="4ZKJN4F9BMFAS">


			




	
	
	
		
 
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" style="border:0" name="submit" alt="PayPal - The safer, easier way to pay online!">


			




	
	
	
		
 
<img alt="" style="border:0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">


			




	
	
	
		
 
</form>


			




	
	
	
		
 
<!-- PayPal end -->


			




	
	
	
		
 

			




	
	
	
		
 
<p>Or, <a href="/supporter/#annual"><strong>become a Conservancy


			




	
	
	
		
 
      Supporter</strong></a> (&mdash; a better option if you're donating more


			




	
	
	
		
 
<p>Or, <a href="/supporter/#annual"><span class="donate-box-highlight">become a Conservancy


			




	
	
	
		
 
      Supporter</span></a> (&mdash; a better option if you're donating more


			




	
	
	
		
 
      than $120, since you'll get a t-shirt!).</p>


			




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


			




	
	
	
		
 
</div>


			




	
	
	
		
 
<div class="content-with-donate-sidebar">


			




	
	
	
		
 
    <div id="container">


			




	
	
	
		
 
         <div id="sidebar" class="{% block submenuselection %}other{% endblock %}">


			




	
	
	
		
 
            <h2>Our GPL {% block category %}Compliance{% endblock %} Work</h2>


			




	
	
	
		
 
            <ul>


			




	
	
	
		
 
            <li class="VMwareLawsuitAppeal"><a href="/linux-compliance/vmware-lawsuit-appeal.html">Stand Up For GPL!</a></li>


			




	
	
	
		
 
            <li><a href="/news/2015/mar/05/vmware-lawsuit/">VMware Lawsuit: Press Release</a></li>


			




	
	
	
		
 
            <li class="VMwareLawsuitFAQ"><a href="/linux-compliance/vmware-lawsuit-faq.html">


			




	
	
	
		
 
                <abbr title="Frequently Asked Questions">FAQ</abbr> on VMware Lawsuit</a></li>


			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







    


    

  


    








    
        Server instance: kapok.sfconservancy.org-11118
    
    
        This site is powered by
            Kallithea 0.6.3,
        which is
        © 2010–2020 by various authors & licensed under GPLv3.
            – Support
        – Privacy Policy