Workaround for Mobile Safari scrollTop() not updating during scroll I've recently discovered that on Mobile Safari the $(window).scrollTop() would not update during the scroll event animation. It appeared to only update after the scroll (the elastic scroll) had finished its animation. This was a rather annoying 'feature' for me because I needed to update my UI during the animation, so I went looking for a workaround and here's what I've come up with.
Using Google DFP with AdSense on responsive pages I've been using Google DFP instead of AdSense on a number of sites that I run because it relaxes some of the AdSense rules and more importantly gives you fuller control of your ad placement. For example you can easily place AdSense ads on infinite scroll pages using DFP, which can't be done with standard AdSense code. One place that DFP falls short however is the ability to use responsive ads. This example shows how with a bit of extra code it is possible to make DFP ads somewhat more responsive friendly.
Adding an email subscribe feature to your Blog with Blogtrottr I've been thinking of adding an email subscribe feature to my Blog for a while now. Originally I thought that I'd build this functionality myself but after a lot of deliberation and research I decided that there really wasn't any need to reinvent the wheel and looked for an alternative. That's when I came across Blogtrottr.
Why "Browser API keys cannot have referer restrictions when used with this API" error happens After Google started to force developers to use API keys I changed my code accordingly and for a while everything was working fine. It wasn't until I tested my application on a real server that I started to get the 'Browser API keys cannot have referer restrictions when used with this API.' error. It didn't take too long to figure out why this happens and how to fix it so read on to find out.
Introducing the jQuery UI Photoboxr Plugin After going away on a trip to the mountains and testing out my Travel µBlog software for the first time it was clear that some improvements were needed in terms of how photos are displayed. The main issue I noticed was that photos taken on a Galaxy S6 were 1080p and hence wide screen. This didn't play well with the 4:3 aspect ratio sized photo boxes used on the blog.
Caveats of inserting a new Image into the DOM with jQuery While I was working on a jQuery UI plugin I'm writing, in my haste to get it going I made a simple mistake, which was forgetting the fundamental principle of how jQuery works with it's selectors. My aim was to create a new Image instance, apply my jQuery UI plugin to it, which wraps that image in a DIV and then add the DIV to the DOM.
Amazingly simple to implement code highlighter for your blog I was looking for an easy to implement code highlighter for my Blog and after searching around and trying out various different ones I settled on highlight.js. My requirements were simple, it had to work with the BBcode used in Flatpress and ideally to not require much code change.
How to use Google AdSense on infinite scroll web pages If you want to use Google's AdSense on your page that has an infinite scroll set up (like I do on travelblog.ws) you could be out of luck both because AdSense T&Cs forbid more than 3 of the same ad unit being shown on the same page and secondly because the AdSense code is simply not set up for that. However this article is about getting AdSense working on infinite scroll pages so there is a way to do it, read on to find out how.
Getting jQuery and iOS playing nicely to programatically select input field contents Something as simple as the jQuery .select() should just work across all browsers and platforms but it doesn't. I know jQuery Mobile attempts to solve the deficiencies that the multi-platform/device ecosystem creates, however not everyone wants to use jQM and sometimes it's easier to create a small workaround. This is exactly what I did to get input field text selection working for my Travel Microblog project.
A good way of passing around latitude/longitude when using Google Places Autocomplete API Google Places Autocomplete is an excellent addition to a web application that needs to have its users enter a location. I've been using this API quite a bit on my travelblog.ws project and have written about ways of implementing it with jQuery. This article shows how I am passing around the latitude/longitude coordinates that Autocomplete returns so that I can make use of them in other parts of my code.
Get user's location with HTML 5 Geolocation and Google Maps Reverse Geocoding API Facebook does it, so you can do it too. I'm talking about getting the user's location when they are interacting with your website. Whereas previously you had to rely on IP address based solutions, now the modern web browsers that support HTML 5 allow you to get this information easily. Combine that with the Google Maps API and you can get some very detailed location data. Here's how.
Use Google Maps Places auto complete API without displaying a map Here's a bit of code that I'm using on a personal project of mine. This code uses the Google Maps Places API auto complete feature without having to display a map. This means you get a text input box where you can start typing in Google Maps locations and fit it into your standard HTML forms.
Scroll Bootstrap 3 Accordion with dynamically loaded content to top of page I've recently discovered a problem in a website I've built where clicking a Bootstrap 3 accordion panel to expand it and show the content would erroneously scroll that panel off screen. This was happening because the content was being loaded dynamically via the show.bs.collapse event. After a bit of playing around with the implementation I found a way to scroll the panel, including its heading correctly to the top of the screen.
What to do when the Google Plus Moments API is no longer supported I've noticed a couple of weeks ago that my Google+ auto-posting on my blog stopped working and was giving me a 500 server error. At first I ignored this thinking it's just a temporary outage, but when it persisted for days I decided to investigate it. Turns out Google stopped supporting the Moments API and all of a sudden it stopped working too!
Adding Google search to a FlatPress theme Although FlatPress includes a search feature, I found it to be quite limited, so I had a look at adding Google search to a theme in FlatPress and found that to be quite easy to do. There is some tinkering with the FlatPress code itself, however the end result is a fully working search for FlatPress that is backed by the power of Google.
Playing with Hexagons and CAAT I've been going through my options in picking a new graphics library to use for my HTML5 game that would be fast enough to draw at 60FPS and one that could provide robust functionality, not many of the existing APIs do this and I was almost ready to give up until I found CAAT. In a matter of hours I was able to get this demo up and running that draws a hexagonal grid, which is scrollable (by dragging it) and maps clicks on the canvas to grid cells.
Creating large high performing hexagonal grids for HTML5 apps using KineticJS When I first started looking into the HTML5 side of things for my game one of the key requirements for me was the ability to work with hexagonal grids and to be able to interact with the cells in this grid. KineticJS seemed to have the right features to do this, but I soon discovered that large grids simply did not perform, so after playing around a bit I found another solution.