AngularJS, Constant & Currency Symbols

I have been creating an AngularJS set of pages that handle stock; this started out as a conversion from straight PHP/MySQL/HTML to now using AngularJS with a much cleaner PHP/MySQL backend. One problem that I was running into though, was how to display currency symbols – just putting £ in wasn’t doing it. Then I tried various other incarnations of this, until finally I found out how to do it, like so:

app.constant(‘CONFIG’, { ‘CURRENCY_SYMBOL':’\u00A3′ });

So there you go – it shows the pound symbol properly when you use the constant in your AngularJS code. This is for the £ of course, but there are, obviously a variety of other currency symbols, which I will be putting into the package in comments, like so:

US Dollar:  app.constant(‘CONFIG’, { ‘CURRENCY SYMBOL':’\u0024′ });
Euro:  app.constant(‘CONFIG’, { ‘CURRENCY_SYMBOL':’\u20AC’ });
Yen:  app.constant(‘CONFIG’, { ‘CURRENCY_SYMBOL':’\u00A5′ });

Tip for Showing Pounds in HTML/JS

Frustrating this may be, but you might have come across such annoyance in your creative journey.

Today I was rewriting some PHP/MySQL code into AngularJS and came across a part where I had a default currency set. So I learned a bit more about setting constants in AngularJS (no day is lost if you learn something!), then got to a point where I had to display said constants.

One of those in question was the pound symbol. It could be £ or £ or as I found out today from this Special Characters page, there is one other way. The pound can be written like so: \u00A3;

The same thing will apply for other currency symbols, or in fact for any of the other hundreds of symbols on that page that I’ve never seen before!

Site Moved to New Host

After humming and hawing for several months I’ve (finally) decided to move the site over to a new host. Luckily I also do work for the new host, and I know he’s -very- reliable. In fact, one of the best I’ve ever seen. If I have a problem, it gets fixed, no ifs or buts about it.

So for now, the Dreamhost will be used for non-UK sites I host, or for testing purposes. The new host, NinjaHosts, will be my main host from now on.

Thank you for your patience as I move over. You might have also noticed I’m ditching the old theme, it will be changed over the next few days as I get moved in (sounds like a house move?!). Yes, I will be making my own as usual. And yes, the wordpress themes I have created will get a spruce up and fixes to be more current.

Site Work, GRS Signs

After several iterations over the years, GRS Sign Company has had its site updated once more.

This time there is a lot more jQuery in than previous versions, and the general theme, colours and layout is a lot more compact and clearer, not to mention cleaner, than earlier versions of the site.

A lot of SEO has been built into the site (“on”, white hat), which has already started showing proof (aluminium signs: #5, modular signs: #5, engraved signs: #3, as examples). Not to focus on just that but GRS is now embracing social media a lot more with a twitter and facebook accounts linked into the site.

Taking Images, Creating Unordered List

One of the problems with the average user of WordPress is that they might not know how to (or when to) create lists, or when or where to put images in a post. Some themes might require a list to convert into something else via code, for example.

This is the case with Advanced Angling Solutions; the product pages were built ‘on the fly’ and added or removed when needed.

I used the Basic jQuery Slider as the slider creator once the list was created. It’s just a simple <script> tag in the header.

Rather than have a strict regime of how to order a post or page, I used this code to order images in the post:

$(".single a[href$='jpg']").removeAttr("href"); // Don't want the images clickable!
$(".single img.size-full").each(function() {
  $(this).wrapAll("<li class='img'><a href='"+ $(this).attr('src') + "' rel='lightbox'></a></li>");
});
$(".single li.img").wrapAll("<ul class='bjqs'></ul>");

If you want to see this in action, try one of the product pages on Advanced Angling Solutions, the image slider you see is this in action.

Thanks!

Site Work, Advanced Angling Solutions

This has been a site that has had a lot of work over the past few months, tweaking every so often to get pieces to work just right.

Based on the great WordPress CMS, this custom theme is built just for Advanced Angling Solutions, and wholly just for them. Lots of CSS3, HTML5, and jQuery as you might expect. This is a great company too btw, if you’re a carp fisherman. The owner is a fisherman himself, one of the top ones in the country, and he has designed all his own equipment that he sells.

The eCommerce side of the site uses the WP Simple Paypal Shopping Cart plugin, which has been slightly altered to fit the site and work with the design layout. I will also add some more posts on this subject as it works with some jQuery to convert unordered lists into an image slideshow.

NB: The video still appears wonky on some browsers, can anyone verify?