Get Fundraising plugin to show all digits of total goal, even if only collected lesser amount

Hi guys,
I'm creating a fundraising site to be online as soon as possible, using the Fundraising pluign and all is well, apart from one thing.

I have styled the plugin to have a background behind each digit, and to fit with 5 digits in total (no decimals)... Only to realise that the plugin only shows the digits for the collected amount, and not of the goal total.
I need to find a way to make it show 5 digits continuously, even if it means that there will be 0's in front of the collected amount - i.e right-aligned but with a "fill-out" of 0's for digits not yet reached.
As is, it looks very weird without 0's in front.

I do not yet have it online anywhere, but I can install it on a live testserver if needed.

See screenshot, it might make a better sense then :slight_smile:

  • Kimberly

    Hello there :slight_smile:

    First off, I've asked the developer to chime in here, if he can.

    There seems to be, looking at the template functions, a function for wdf_goal

    in the functions php

    // If The Type is goal display the raise amount with the goal total
    				if($this->has_goal($post->ID) && $goal != 0) {
    					$classes = ($total >= $goal && $goal != 0 ? 'class="wdf_complete"' : '');
    					echo '<div '.$classes.'>'.$this->format_currency('',$total) . ' / ' . $this->format_currency('',$goal) . '</div>';
    					if($bar = $this->prepare_progress_bar(null,$total,$goal,'column',false)) {
    						echo $bar;

    So it looks like you could display the $goal instead of the $total if you wanted since the plugin finds $total and $goal separately, i'd have to have a play to figure out exactly how though as I am no coder

    Cole will probably cringe when he see's this :slight_smile: sorry Cole, hehe

  • Claire Wielandt

    Hi Kimberly - Thx for getting back to me so quickly :slight_smile:

    Not sure if we're on the same page here (I'm no developer as well) but it seems to me, that what you suggest is for the total-wished-for-amount to be displayed, and not what has been already raised?

    If I'm correct on my assumption then this is NOT what I'm trying to achieve.

    What I would like, is for the amount of fields to be shown equally to what the goal is, but it has to display the amount raised so far - and fill in the blanks before with 0's.

    IDEAL would be, if each digit in the in the amount wished for and the comma separator as well (i.e. a 85.000 dollar goal) teach could have it's own class or something, to use for a custom digit BG - but I'm not even sure if this is possible.

    The coolt hing about that solution is, that one would never have to worry if the BG I use, suddenly become askew, due to the differences in number width (i.e a 4 takes more space, than a 1).
    One could simply center each digit in it's own class, and put in a custom BG for each.
    Also, if the above could be created, the fill-out 0's could be cool to have, but not necessary, as the BG would take care of itself and display once there was a number to display as well (even if I like the zero's in front).

    As is - I'm using a single BG image, and I have noticed, that if the amount is not full of 8's and 0's the BG image won't fit.
    See new screenshot - and note the 2 and 9 in the end - it would be worse if there was a 1 in there somewhere.

    Do I make sense at all here? *lol*

    :slight_smile:

  • Cole

    Hey designlabCPH,

    Sorry for the delay in getting back to you.

    So I'm trying to get a grasp on everything here so I can make the right recommendation.

    Do you have a test server I can see a live example of? You can email it to cole@incsub.com and then post in here to let me know you sent it. I think we might be able to handle this with simple code and css styles but want to make sure first.

    Thanks for your patience look forward to hearing from you.

  • Cole

    Sorry Claire

    This got lost in ticket abyss when I was out for a few days. My apologies.

    I think my recommendation was going to be use php to wrap each number and comma in a "span" element and then add some css to each element to apply that digit background.

    That kind of setup would make it unnecessary to have the extra digits.

    And now that I think about it this might be better suited to javascript.

    I can help write the code to get you pointed in the right direction.

  • Claire Wielandt

    It's OK Cole, I know how it is... And they (my bonafide clients) have been delayed as well... But would like to get it done soon though, they need to raise money for their charity work :slight_smile:

    Would be awesome if you can help me out, although I have to warn you, that I'm more of a designer (with HTML/CSS skills) than developer (No jQuery/PHP skills to talk about yet), so you might have to be a bit patient with me.

    Please do help me out, as I'd love to be able to make the design with the BG in mind - and if no extra digits are needed, even better :slight_smile:
    jQuery or PHP/HTML - you'd know what is best - but as long as I end up with some "css-hooks" for the BG's in each of the digits or similar, I'll be very happy :slight_smile:

  • Cole

    Hey Claire,

    So I think I got you like 90% there. You will need to refine the css styles a little bit to line up everything perfectly but it seems like that should be fine for you since that seems to be more your leaning anyways.

    Use the following javascript and css in your theme.

    Javascript:

    <script type="text/javascript">
    	jQuery(document).ready( function($) {
    		function wrap(target) {
    
    			text = target.text();
    			newHtml = '';
    			for (var i=0; i < text.length; i++) {
    				text[i] = text[i].replace(/^\s+|\s+$/g,'');
    				text[i] = text[i].replace(/^[\r\n]+|[\r\n]+$/g,'')
    				text[i] = text[i].trim();
                    if (!$.isNumeric(text[i]) && text[i] != ',' && text[i] != '$') {
                    	newHtml += "";
                    } else {
                    	if (text[i] == ',') {
                    		newHtml += "<span class='comma'>" + text[i] + "</span>";
                    	} else if (text[i] == '$') {
                    		newHtml += "<span class='currency'>" + text[i] + "</span>";
                    	} else {
                    		newHtml += "<span>" + text[i] + "</span>";
                    	}
    
                    }
                }
    		    return newHtml;
    		}
    		var collection = $(".wdf_big_num");
    		$.each(collection, function(i,e) {
    			var _this = $(e);
    			_this.html( wrap( _this ));
    		});
    	});
    </script>

    CSS:

    .wdf_big_num {
    	width: 100%;
    	font-family: 'Oswald', sans-serif !important;
    	font-size: 6.5em;
    	letter-spacing: 0.254em;
    	font-weight: bold;
    	margin: 0 0 0 -3px;
    
    }
    .wdf_big_num span {
    	background: url(../images/moneybg.png) no-repeat;
    }
    .wdf_big_num span.comma {
    	background-position: -216px 0px;
    }
    .wdf_big_num span.currency {
    
    }

    Essentially we are wrapping each letter in a span element that we then style with that background. We apply the currency and comma class to the span if applicable which allows us to use background position to move it to the right position. Let me know if you have any trouble.

    Edit*: I forgot to remove my console.log() function in the javascript. Should be good now.

  • Claire Wielandt

    Hi Cole :slight_smile:

    I have added the script (exactly as you've written it - and added the class "numbers" to the single digit spans) inside the functions PHP... It does show the classes and all... But for some strange reason it does not want to show the BG images, no matter what I try. In firebug I can see that it registers the "background-image" but it does not show the image itself. Any ideas?
    I'm using Headway as framework but that shouldn't be different from a lot of others.
    Does the code need to be a little different when inside the functions.php?

    It looks like this (the first script was for the layout before your changes, so I commented it out, but added your script to the filter):

    /*REGISTER DESIGNLABCPH JQUERY*/
    
    function designlabcph(){
    		?>
    		<script type="text/javascript">
    		jQuery(document).ready(function() {
    			jQuery(function(){
    				//jQuery("div.wdf_total_backers .wdf_big_num").wrap("<p />");
    			});
    
    		});
    		</script>  
    
    		<script type="text/javascript">
    		jQuery(document).ready( function($) {
    			function wrap(target) {
    
    				text = target.text();
    				newHtml = '';
    				for (var i=0; i < text.length; i++) {
    					text[i] = text[i].replace(/^\s+|\s+$/g,'');
    					text[i] = text[i].replace(/^[\r\n]+|[\r\n]+$/g,'')
    					text[i] = text[i].trim();
    	                if (!$.isNumeric(text[i]) && text[i] != ',' && text[i] != '$') {
    	                	newHtml += "";
    	                } else {
    	                	if (text[i] == ',') {
    	                		newHtml += "<span class='comma'>" + text[i] + "</span>";
    	                	} else if (text[i] == '$') {
    	                		newHtml += "<span class='currency'>" + text[i] + "</span>";
    	                	} else {
    	                		newHtml += "<span class='number'>" + text[i] + "</span>";
    	                	}
    
    	                }
    	            }
    			    return newHtml;
    			}
    			var collection = $(".wdf_big_num");
    			$.each(collection, function(i,e) {
    				var _this = $(e);
    				_this.html( wrap( _this ));
    			});
    		});
    		</script>
    
            <?php
    	}
    	add_filter('wp_head', 'designlabcph');

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.