Home
Build
Templates
bare_edm
content
crm
crm_splash
crm_wide
donation_form
edm
edmnew
edm_header
edm_head_no_social
edm_no_social
emeraldlink
first_chat
footer
footer_no_social
keith_donation_form
privacy_boilerplate
small_print
stylesheet
tax_body
tax_header
tax_receipt
testthing
view_on_site
wildchat
wildchat_header
wildnews
wildnews_header
Macros
crm
edm
DON_-_Keith_Azzopardi
Edit Definition
View Live
View Source
keith_donation_form
Edit Template
Edit Style Template
<div class="donate-options-container"> <div class="row donate-intro"> <h1>Choose a donation amount</h1> </div> <div id="single_donations"> <p id="total"> </p> <div class="row dollar-handles"> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/1.jpg" class="attachment-donate-handle" alt="HOVER#1"> <input class="btnDonAmount" type="button" id="one" value="$1" data-value="1"> <p class="small"> <strong>LABEL#1</strong> </p> </div> <div class="dollar-box active"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/2.jpg" class="attachment-donate-handle" alt="HOVER#2"> <input class="btnDonAmount" type="button" id="one" value="$2" data-value="2"> <p class="small"> <strong>LABEL#2</strong> </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/3.jpg" class="attachment-donate-handle" alt="HOVER#3"> <input class="btnDonAmount" type="button" id="one" value="$3" data-value="3"> <p class="small"> <strong>LABEL#3</strong> </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/4.jpg" class="attachment-donate-handle" alt="HOVER#4"> <input class="btnDonAmount" type="button" id="one" value="$4" data-value="4"> <p class="small"> <strong>LABEL#4</strong> </p> </div> </div> <div class="row donate-section"> <h2>Donate</h2> <span class="dollar-sign">$</span> <input type="number" id="amount" value="2"><span class="donate-currency">AUD</span> <div class="row"> <input type="button" id="single_donate_now" class="sendButton btn btn-xl" value="Donate Now" name="amt"><br> </div> </div> </div> </div> <style> table.DonationFormTable td.DonationListingHeading, table.DonationFormTable tbody.DonationFormTable_DonationPanel { display: none; } #amount { color: style=""; } </style> <script type="text/javascript"> jQuery(document).ready(function ($) { var AllDetails = $('div[id$="_UpdatePanel"]'); $('.btnDonAmount').click(function() { var amount = $(this).attr('data-value'); var amountText = $(this).attr('value'); $('#amount').val(amount).trigger('change'); $('#total').text('Single Donation Amount: ' + amountText); }); $('#amount').on('change keyup keydown',function() { if( $(this).val().trim().replace(" ","").length) { $('.sendButton').attr('disabled', false); } else { $('.sendButton').attr('disabled', true); $('#total').html(' '); } }); $('.img-thumbnail').click(function() { $(this).next().click(); }); $(".btnDonAmount").click(function() { $(".btnDonAmount").parent().removeClass('active'); $(this).parent().addClass('active'); }); var UpdateOldAmountField = function () { $("input[id$='_txtAmount']").val($("#amount").val()); }; $("#amount").on('input change keypress blur focus',UpdateOldAmountField); $('#single_donate_now').click(function() { UpdateOldAmountField(); AllDetails.show().slideDown(500); $('html, body').animate({scrollTop:$('.DonationFormTable').offset().top},300); }); // Getting around a stupid BBIS bug: AllDetails.hide(); }); </script> <!-- Builder 2.0.0: DON_-_Keith_Azzopardi at Tue, 17 Sep 2024 06:00:33 +1000 -->