DEVseo

Here's an interesting story about how it was discovered that 1.1% of people using UK government web services are missing out on the enhancements that JavaScript brings to everyday web browsing.

http://digital.cabinetoffice.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/

read post

Firefox has just been updated to version 22, 6 weeks after the previous release of 21. There are lots of changes in the new version, but one of the most interesting for me is the native support for Web Notifications. I'm not one for reading specs though and wanted to dive right in so here's how to use the API quickly and easily.

In it's most simplest form, the following code will produce a Notification in Firefox:

var myNotify = new Notification("Test Title", {
	'body': "This is the body of the notification",
});

That is literally all of the code you need! Lovely. However, there are some caveats. Obviously, the most important for security, and to prevent unwanted annoyances, you must first ask for permission to show a notification on a domain. But, it turns out this is a pretty darn easy thing to do too! See the following code:

read post

I've seen loads of "scrollTo" functions dotted around the internet and many are quite convoluted for what you actually want to do. I wrote this for the new design on DEVseo and it's very simple indeed. Any link that I give a class of "scroller" to will automatically call a function that checks whether an internal anchor point exists in the page. If it does, the page will scroll to that anchor point. If not, the link will be followed. For simplicity I used a data attribute so that the href can be set to an actually location and followed where JavaScript is disabled . If you didn't want this to happen simply set the href to the internal anchor too.

So, on with the code! The call looks like: $(".scroller").on("click", ScrollPage); and you'd want to put this in a document load function so that it runs when the page is ready (see complete script at the bottom). Then, use the following function for "ScrollPage":

function ScrollPage(e)
{
	// Get the data attribute for the element
	var objEl = $(this).data("el");
	// Get the element we're internally scrolling for
	var scrollEl = $(objEl);
	if(scrollEl.length > 0)
	{
		// Don't follow the link
		e.preventDefault();
		$('body, html').animate({
			scrollTop: scrollEl.position().top - 40
			// I subtract 40 so it's not hugging the top of the page
		}, 600);
		// Change this number to change the scroll speed
	}
}

And then in your HTML all you need is a link that looks something like: <a href="/somewhere" title="Link Title" class="scroller" data-el="#internal-nchor">A Link</a> and you're done! For the complete script, see below. For an example of what this does, click the arrow in the bottom right! And don't forget to actually put an element on the page that has an id attribute the same as the one the data attribute is pointing to.

read post

There are LOADS of really cool things happening with CSS3 at the moment. Have you seen the CSS3 solar system? Or really cool and detailed CSS3 Clouds? If not, I really suggest you check those out first. The solar system is quite a simple concept now with the use of border radius and simple rotation animations being quite standard among users and the latest browsers. The clouds are something a little more special using some JavaScript on top of CSS to get the major effects (check out the tutorial here).

However, as cool as these things are something came along today that I found very cool indeed! It's a bit of fun with what you can do these days, but has some practical possibilites for certain projects. Check out the link below before a quick explanation.

read post

Today I stumbled upon something magical. I've recently started really getting into responsive designs and media CSS rules and how much power they can bring to a website that is likely to run on a mobile device. Technologies have changed a lot and what's available to us, web developers, is nothing short of a miracle compared to a couple of years ago. However, a lot of the tools and funky plugins available out there for such libraries as jQuery are still falling behind in a lot of ways compared to what is available. And so, it is with great pleasure that I bring to your attention Royal Slider.

I encourage you to click that link. The slider has loads of options for different styles, types and animations as you would expect from the update to an already popular plugin. But the best part happens when you resize your browser window or view the page on a mobile. Go on. Do it.

The way everything scales so effortlessly is superb. The animations remain smooth on my testing including when changing the orient of my mobile device. I also really like the default animation shown on the home page of the plugin. It's smooth and looks great. Some of the gallery examples are really great too.

read post

Find The Distance Between Two Addresses

After having a lot of fun working on the "Find Your Nearest ATM" script I decided to have a go at something similar, but a little bit different.

Some Background

This is actually going to be part of a project I'm currently working on in my job at Worldview Limited. I have recently been writing a "Proposal Generator", which uses a lovely JavaScript "Web App" interface to add options and text to generate a PDF "proposal" for our corporate clients.

Part of the specification for the new system was to include the distance from a given location to one of our supplier locations. This needed to be dynamic based on the two addresses given so I decided to have a hunt around and see what I could find.

read post

Find Your Nearest ATM

I have been working on a few scripts recently a little different to the normal ones you might find on DeVSeO. Partly this is because I have now discovered how awesome jQuery can be, and how easy it is to learn and use. Because of this I have undertaken a few personal "mini-projects" with the help of jQuery and a little bit of HTML5 thrown in for good measure.

The first of these is my new "ATM Finder", which uses Google Maps to plot ATMs on a map for you based on one of a number of parameters. If you are using a smartphone or have an HTML5-capable browser you can use the GeoPosition functions to plot the map based on your current location. This doesn't work that well for desktop PCs because the GeoPosition is usually based on where you ISP is located. But for smartphones, from my testing at least, it should work really well!

If you have any issues with it please comment below and let me know. I am considering release it as an app for various smartphones, but it currently works pretty well as a web-based application.

read post