Files
@ af5d12f7a1d6
Branch filter:
Location: website/www/conservancy/static/supporter-page.js
af5d12f7a1d6
6.1 KiB
application/javascript
Rework CSS for "Big News" & add image.
This image now is displayed with the same background and to the left of
the "Big News". I spent extensive time researching how best to present
a larger <div> with the grey background and have the image properly
scale beside it. Ultimately, I couldn't find a better way than this,
and this is hardly optimal.
For example, I looked into wrapping the whole thing in a div, with two
div's inside, and applying various CSS to each to get the image to
properly stay right next to the text and scale in size when resizing of
media made paragraph longer. This generated even more problems, so I
went with the simpler solution herein, which probably isn't correct and
may well do odd things on different types of media.
This image now is displayed with the same background and to the left of
the "Big News". I spent extensive time researching how best to present
a larger <div> with the grey background and have the image properly
scale beside it. Ultimately, I couldn't find a better way than this,
and this is hardly optimal.
For example, I looked into wrapping the whole thing in a div, with two
div's inside, and applying various CSS to each to get the image to
properly stay right next to the text and scale in size when resizing of
media made paragraph longer. This generated even more problems, so I
went with the simpler solution herein, which probably isn't correct and
may well do odd things on different types of media.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | /* Copyright (C) 2012-2013 Denver Gingerich,
** Copyright (C) 2013-2014 Bradley M. Kuhn.
** License: GPLv3-or-later
** Find a copy of GPL at https://sfconservancy.org/GPLv3
*/
$(document).ready(function() {
$("#progressbar").progressbar({ value: (0.00 / 5000.00) * 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'));
}
});
$('a.donate-now')
.addClass('clickable')
.bind('click', function() {
var $control = $('#donate-box');
$control.toggleClass('expanded');
$control.find('.toggle-content').slideUp("slow");
$control.find('.toggle-content').slideDown("slow");
});
$(".t-shirt-size-selector").hide();
$('input[name=os1]: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 == "Yes") {
tShirtSelector.show();
noShippingSelector.val("2");
} else {
tShirtSelector.hide();
noShippingSelector.val("0");
}
});
// Forms start in "invalid" form, with the errors shown, so that
// non-Javascript users see the errors by default and know what they must
// enter. The following two lines correct that.
$('*#amount').addClass("valid");
$('.supporter-form-inputs .form-error-show')
.removeClass('form-error-show').addClass('form-error');
$('*#amount').on('input', function() {
var input=$(this);
var value = input.val();
var errorElement=$("span#error", input.parent());
var noCommaValue = value;
noCommaValue = value.replace(/,/g, "");
var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;
var isValid = ( re.test(value) &&
parseInt(noCommaValue) >= parseInt(input.attr("minimum")));
if (isValid) {
input.removeClass("invalid").addClass("valid");
errorElement.removeClass("form-error-show").addClass("form-error");
$("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
}
else {
input.removeClass("valid").addClass("invalid");
errorElement.removeClass("form-error").addClass("form-error-show");
}
});
var validateFormAtSubmission = function(element, event) {
var valid = element.hasClass("valid");
if (! valid) {
$("#form-correction-needed").removeClass("form-error").addClass("form-error-show")
.css("font-weight", "bold").css("font-size", "150%");
event.preventDefault();
} else {
$("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
}
};
$(".supporter-form-submit#monthly").click(function (event) {
validateFormAtSubmission($(".supporter-form#monthly input#amount"), event);
});
$(".supporter-form-submit#annual").click(function (event) {
validateFormAtSubmission($(".supporter-form#annual input#amount"), event);
});
/* Handle toggling of annual/monthly form selections */
$('.supporter-type-selection#monthly').hide();
$('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
$("a[href$='monthly']").bind('click', function() {
$('.supporter-type-selection#annual').hide();
$('.supporter-type-selection#monthly').show();
$('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
$('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
$("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
});
$("a[href$='annual']").bind('click', function() {
$('.supporter-type-selection#annual').show();
$('.supporter-type-selection#monthly').hide();
$('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
$('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
});
$( ".footnote-mark" ).tooltip({
items: "a",
hide: { duration: 5000 },
position: {
my: "center bottom-20",
at: "center left",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
},
content: function() {
return $('.footnote-1-text').text();
}
});
});
$(window).load(function () {
verifySelctionCorrectOnPageLoad = function() {
var ourURL = document.URL;
if (ourURL.search("#monthly") > 0) {
$('.supporter-type-selection#annual').hide();
$('.supporter-type-selection#monthly').show();
$('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
$('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
}
if (ourURL.search("#annual") > 0) {
$('.supporter-type-selection#monthly').hide();
$('.supporter-type-selection#annual').show();
$('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
$('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
}
}
if (location.hash) {
setTimeout(verifySelctionCorrectOnPageLoad, 1);
}
window.addEventListener("hashchange", verifySelctionCorrectOnPageLoad);
});
|