JavaScript
Blog posts for the tag #JavaScript
09-Sep-2019
Bypassing Safari's "Stop Media with Sound" feature for HTML5 Canvas WebAssembly
I've recently installed the 12.1.2 update for Safari and all of a sudden the Online Atari Lynx Emulator I've published stopped working when loading ROMs from the local file system. I've been making some updates to this emulator so figured maybe I screwed something up so tried running my development version, and that had the same problem. After spending hours going through code I couldn't find any issues...then I remembered about that Safari update the day earlier.
I've recently installed the 12.1.2 update for Safari and all of a sudden the Online Atari Lynx Emulator I've published stopped working when loading ROMs from the local file system. I've been making some updates to this emulator so figured maybe I screwed something up so tried running my development version, and that had the same problem. After spending hours going through code I couldn't find any issues...then I remembered about that Safari update the day earlier.
31-Mar-2019
How to fix PrestaShop BlockCMS module editor when it doesn't display pages
One of the websites I help maintain uses an older version of PrestaShop (1.4.6.2) and since enabling SSL I've noticed that the BlockCMS module editor hasn't been behaving very well. Specifically, it wasn't showing any of the CMS pages that were created so it wasn't possible to select what links were shown on the shop's sidebar.
One of the websites I help maintain uses an older version of PrestaShop (1.4.6.2) and since enabling SSL I've noticed that the BlockCMS module editor hasn't been behaving very well. Specifically, it wasn't showing any of the CMS pages that were created so it wasn't possible to select what links were shown on the shop's sidebar.
13-Jan-2019
GoDaddy is sneakily injecting JavaScript into your website and how to stop it
I recently started having issues with the admin interface of a website I run and decided to check the browser console to see if any errors were being displayed there. There were and among them was an error stating that a JavaScript map file being loaded (and failing) that I did not recognise. This meant that the actual JavaScript file itself was already loaded via my website. This set off all sorts of alarms for me and I started to dig in further.
I recently started having issues with the admin interface of a website I run and decided to check the browser console to see if any errors were being displayed there. There were and among them was an error stating that a JavaScript map file being loaded (and failing) that I did not recognise. This meant that the actual JavaScript file itself was already loaded via my website. This set off all sorts of alarms for me and I started to dig in further.
20-Sep-2018
Retrieving data from hijacked PNG images using HTML canvas and Javascript
Two weeks ago I wrote an article - Hijacking HTML canvas and PNG images to store arbitrary text data, this is the complimentary article that deals with extracting data back out of these images. As a summary, in the first article I described how arbitrary text data (or JSON in my specific case) could be stored as pixels in a PNG image. This required converting input data from JavaScript's Strings to a Uint8Array and then storing bytes using three channels (RGB) within an ImageData object before drawing this image to a Canvas and saving as a PNG file. So lets see what's involved in doing the reverse of this process and getting back the original data...
Two weeks ago I wrote an article - Hijacking HTML canvas and PNG images to store arbitrary text data, this is the complimentary article that deals with extracting data back out of these images. As a summary, in the first article I described how arbitrary text data (or JSON in my specific case) could be stored as pixels in a PNG image. This required converting input data from JavaScript's Strings to a Uint8Array and then storing bytes using three channels (RGB) within an ImageData object before drawing this image to a Canvas and saving as a PNG file. So lets see what's involved in doing the reverse of this process and getting back the original data...
06-Sep-2018
Hijacking HTML canvas and PNG images to store arbitrary text data
One of the web app projects I'm working on had an interesting requirement recently - it needed to provide a save/load feature without relying on cookies, local storage or server side storage (no accounts or logins). My first pass at the save feature implementation was to take my data, serialise it as JSON, dynamically create a new link element with a data URL and the download attribute set and trigger a click event on this link. That worked pretty well on desktop browsers. It failed miserably on mobile Safari.
One of the web app projects I'm working on had an interesting requirement recently - it needed to provide a save/load feature without relying on cookies, local storage or server side storage (no accounts or logins). My first pass at the save feature implementation was to take my data, serialise it as JSON, dynamically create a new link element with a data URL and the download attribute set and trigger a click event on this link. That worked pretty well on desktop browsers. It failed miserably on mobile Safari.
10-May-2018
Friendly failure messages with simpleUpload.js error handler XHR object
I've been using simpleUpload.js as my uploader script for some time now and it's been great, bar one feature - error message display on upload failures. Because of its focus on compatibility with older browsers, simpleUpload.js tries to parse server response only when a 200-series HTTP code is present. This means that if you use, say a 500 error code, (as you should!) on failed upload process requests, you will get a generic 'Upload failed' message in the error handler.
I've been using simpleUpload.js as my uploader script for some time now and it's been great, bar one feature - error message display on upload failures. Because of its focus on compatibility with older browsers, simpleUpload.js tries to parse server response only when a 200-series HTTP code is present. This means that if you use, say a 500 error code, (as you should!) on failed upload process requests, you will get a generic 'Upload failed' message in the error handler.
26-Apr-2018
How to add text tabbing to a HTML textarea with jQuery
Something that really annoys me with the standard HTML textarea element is when the Tab key is pressed, focus is shifted to the next UI widget following the textarea. In my case I was using a textarea as input for editing formatted content to display on a web page (a lite CMS app essentially). I wanted to be able to insert tabs into content I was editing but didn't want to use a WYSIWYG text editor component.
Something that really annoys me with the standard HTML textarea element is when the Tab key is pressed, focus is shifted to the next UI widget following the textarea. In my case I was using a textarea as input for editing formatted content to display on a web page (a lite CMS app essentially). I wanted to be able to insert tabs into content I was editing but didn't want to use a WYSIWYG text editor component.
08-Mar-2018
Why BackboneJS Model.destroy() invokes the error callback on successful DELETE
I use Silex in conjunction with Backbone.js for one of my personal projects (AtariGamer.com). Both of the frameworks are great and work very well together and are generally very well documented. However, they don't prevent silly mistakes from creeping into your code. This was one of them.
I use Silex in conjunction with Backbone.js for one of my personal projects (AtariGamer.com). Both of the frameworks are great and work very well together and are generally very well documented. However, they don't prevent silly mistakes from creeping into your code. This was one of them.
11-Jan-2018
Inserting Google DFP ads with Backbone, Underscore and jQuery
I've used Google DoubleClick for Publishers on a number of my sites and when it came to thinking about monetising my new project (AtariGamer) that was my goto choice once again. However, compared to my previous approaches, I wanted to do things differently over at AtariGamer. My goal was to try and use well established web app frameworks as much as possible and so I decided to use Backbone.js for all dynamic UI generation. This was to include all of the ads. I also used jQuery to make some things simpler.
I've used Google DoubleClick for Publishers on a number of my sites and when it came to thinking about monetising my new project (AtariGamer) that was my goto choice once again. However, compared to my previous approaches, I wanted to do things differently over at AtariGamer. My goal was to try and use well established web app frameworks as much as possible and so I decided to use Backbone.js for all dynamic UI generation. This was to include all of the ads. I also used jQuery to make some things simpler.
04-Jan-2018
Loading and displaying a collection from bootstrapped data in Backbone.js
A new project that I'm working on uses Backbone.js for all of the dynamic parts of the user interface. At first the application was written in a way that required a separate REST call to fetch data to populate a collection and then render it on a page. However, since the documentation for Collection.fetch specifically calls out that this behaviour should be avoided I decided to fix it.
A new project that I'm working on uses Backbone.js for all of the dynamic parts of the user interface. At first the application was written in a way that required a separate REST call to fetch data to populate a collection and then render it on a page. However, since the documentation for Collection.fetch specifically calls out that this behaviour should be avoided I decided to fix it.
04-Aug-2017
G Suite Gmail is broken on Safari due to new Google Content Security Policy settings
This issue started some time around the 2nd of August 2017. My GSuite Gmail started rendering like this...
This issue started some time around the 2nd of August 2017. My GSuite Gmail started rendering like this...
16-Jul-2017
How to stop Facebook using ad images as post sharing thumbnails
I've recently added Banggood banner links to my Blog and noticed that Facebook started to use images of those banners whenever I shared a post that didn't have its own image. This was of course an undesirable behaviour and I looked into various ways of removing it and finally settled on a simple JavaScript approach.
I've recently added Banggood banner links to my Blog and noticed that Facebook started to use images of those banners whenever I shared a post that didn't have its own image. This was of course an undesirable behaviour and I looked into various ways of removing it and finally settled on a simple JavaScript approach.
02-Jul-2017
Identifying when Google Maps successfully authenticates your API Key
A while back Google started forcing developers to use API keys to access the Maps API. This was a little annoying but easy to get past, all you had to do was get an API key and you were good to go. However, something that I have come across since was even if you provide an API key, it doesn't not guarantee that you can successfully use the Maps API. For example, your key could be invalid or not have access to the Maps API. This leads to errors like this when you try to use it...
A while back Google started forcing developers to use API keys to access the Maps API. This was a little annoying but easy to get past, all you had to do was get an API key and you were good to go. However, something that I have come across since was even if you provide an API key, it doesn't not guarantee that you can successfully use the Maps API. For example, your key could be invalid or not have access to the Maps API. This leads to errors like this when you try to use it...
12-Jun-2017
Automatically extract all Banggood Affiliate banner links from the Banner Referral page
I've purchased many an item from Banggood simply because they offer interesting things at low prices. I also am signed up as an affiliate so that I can have an additional funding source for this Blog. One of the annoying things that I've found with their affiliate program is the need to copy each of their advertising banners manually by hand every month. That in fact prevented me from putting their advertising on my Blog, until now.
I've purchased many an item from Banggood simply because they offer interesting things at low prices. I also am signed up as an affiliate so that I can have an additional funding source for this Blog. One of the annoying things that I've found with their affiliate program is the need to copy each of their advertising banners manually by hand every month. That in fact prevented me from putting their advertising on my Blog, until now.
24-May-2017
How to get Facybox gallery popup to work for images with dynamic URLs
If you're using Fancybox with dynamic image URLs, you may find that the gallery/full screen pop-up is not working. Instead of the pop-up, when clicked, the source image is being loaded in the window as if Fancybox wasn't initialised. This is because Fancybox hasn't been able to determine the image type so doesn't know what to do. It's easily rectified.
If you're using Fancybox with dynamic image URLs, you may find that the gallery/full screen pop-up is not working. Instead of the pop-up, when clicked, the source image is being loaded in the window as if Fancybox wasn't initialised. This is because Fancybox hasn't been able to determine the image type so doesn't know what to do. It's easily rectified.
23-May-2017
jQuery UI Photoboxr plugin updated to version 0.2
I've created the jQuery UI Photoboxr plugin while working on Travel µBlog so that I could easily display panoramic photos in 4:3 aspect ratio boxes. Over the weekend I've updated Photoboxr to version 0.2.
I've created the jQuery UI Photoboxr plugin while working on Travel µBlog so that I could easily display panoramic photos in 4:3 aspect ratio boxes. Over the weekend I've updated Photoboxr to version 0.2.
03-Apr-2017
Debugging Google DFP ad delivery via the publisher console
I've written a number of articles about Google DFP in the past, including how to use it on infinite scroll pages and responsive pages. Recently I noticed that DFP has been behaving strangely on some of my sites and used the DFP Publisher Console to try and diagnose the issue. Unfortunately the issue I came across was not something that I could fix (it was in Google's JavaScript), but using the publisher console helped me in making certain of where the problem lied.
I've written a number of articles about Google DFP in the past, including how to use it on infinite scroll pages and responsive pages. Recently I noticed that DFP has been behaving strangely on some of my sites and used the DFP Publisher Console to try and diagnose the issue. Unfortunately the issue I came across was not something that I could fix (it was in Google's JavaScript), but using the publisher console helped me in making certain of where the problem lied.
21-Mar-2017
Google DFP with AdSense fallback is causing infinite scroll pages to go haywire
I've written an article last year about using Google DFP with AdSense on infinite scroll pages which worked very well and was the basis for a number of my own sites and projects. In the past week however I noticed that GPT, which is the JavaScript library used to create DFP ad slots, started behaving erratically.
I've written an article last year about using Google DFP with AdSense on infinite scroll pages which worked very well and was the basis for a number of my own sites and projects. In the past week however I noticed that GPT, which is the JavaScript library used to create DFP ad slots, started behaving erratically.
20-Mar-2017
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.
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.
18-Feb-2017
Detecting print requests to print contents of a DIV with JavaScript
Printing a page with JavaScript is easy but if you want to print the contents of a specific DIV, it gets a little trickier. If you want to do something more complex like intercept the page print request and then print only certain contents of that page there's even more work involved. This article will show you how I did just that over at travelblog.ws.
Printing a page with JavaScript is easy but if you want to print the contents of a specific DIV, it gets a little trickier. If you want to do something more complex like intercept the page print request and then print only certain contents of that page there's even more work involved. This article will show you how I did just that over at travelblog.ws.
15-Feb-2017
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.
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.
16-Jan-2017
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.
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.
13-Oct-2016
Playing with JavaScript variable obfuscation to hide Google Analytics and AdSense IDs
Recently I've become interested in whether it wcould be possible to hide the Google Analytics or Google AdSense publisher IDs from online tools like SpyOnWeb.com and any lay people who may be looking at your site's code. This is when I came across this article that talked about de-obfuscating JavaScript encoded with JJencodep. After reading that article I had a few ideas and over a number of iterations came up with something that fit the bill.
Recently I've become interested in whether it wcould be possible to hide the Google Analytics or Google AdSense publisher IDs from online tools like SpyOnWeb.com and any lay people who may be looking at your site's code. This is when I came across this article that talked about de-obfuscating JavaScript encoded with JJencodep. After reading that article I had a few ideas and over a number of iterations came up with something that fit the bill.
10-Aug-2016
How to configure the Minify Maven Plugin
If you know anything about JavaScript and haven't been living under a rock, you will know about minification. There are tools like Google's Closure Compiler and Yahoo's YUI Compressor available to make minified versions of your JavaScript and CSS files. Using those tools is easy but what's even easier is having a Maven wrapper around them. This is where the Minify Maven Plugin comes in.
If you know anything about JavaScript and haven't been living under a rock, you will know about minification. There are tools like Google's Closure Compiler and Yahoo's YUI Compressor available to make minified versions of your JavaScript and CSS files. Using those tools is easy but what's even easier is having a Maven wrapper around them. This is where the Minify Maven Plugin comes in.
09-Aug-2016
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.
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.
07-Aug-2016
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.
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.
03-Aug-2016
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.
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.
01-Aug-2016
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.
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.
15-Jul-2016
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.
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.
04-Jul-2016
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.
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.
24-Jun-2016
Google Maps now forcing developers to use an API Key, returning MissingKeyMapError
I've noticed that whenever I was using the Google Maps API recently it was displaying an error in the JavaScript console and the API was not functional. This seems to be due to Google forcing developers to use an API Key whenever they access their Maps API now. This change is not huge and is easy to implement so read on.
I've noticed that whenever I was using the Google Maps API recently it was displaying an error in the JavaScript console and the API was not functional. This seems to be due to Google forcing developers to use an API Key whenever they access their Maps API now. This change is not huge and is easy to implement so read on.
22-Jun-2016
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.
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.
11-May-2016
Getting the selected text value in a drop-down list using JQuery
Sometimes a need arises to get the text of the selected option in a drop-down list. Using some jQuery selectors this is possible, but first lets see what doesn't work.
Sometimes a need arises to get the text of the selected option in a drop-down list. Using some jQuery selectors this is possible, but first lets see what doesn't work.
01-Apr-2016
A better way to initialise Google Maps Places AutoComplete API
Not long ago I've written about how to use Google's Map AutoComplete API. Now I've been going through my code and refactoring it. The new method is more flexible and easier to use.
Not long ago I've written about how to use Google's Map AutoComplete API. Now I've been going through my code and refactoring it. The new method is more flexible and easier to use.
16-Feb-2016
JQuery Timepicker Addon not rendering time zone correctly and how to fix it
The Timepicker jQuery addon is a great modification to the standard jQuery UI Datepicker, however the 1.6.1 release from its GitHub page has a glaring problem when rendering the time zone input select.
The Timepicker jQuery addon is a great modification to the standard jQuery UI Datepicker, however the 1.6.1 release from its GitHub page has a glaring problem when rendering the time zone input select.
14-Feb-2016
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.
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.
02-Feb-2016
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.
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.
18-Jan-2016
Use Bootstrap and FontAwesome to beautify the JQuery UI DatePicker icon trigger
I've been using the jQuery UI Date Picker for a project of mine and decided to combine it with a some Bootstrap form controls, specifically the input field that has a group add-on showing an icon from Font Awesome appended to the control.
I've been using the jQuery UI Date Picker for a project of mine and decided to combine it with a some Bootstrap form controls, specifically the input field that has a group add-on showing an icon from Font Awesome appended to the control.
03-Dec-2015
Show/hide HTML elements with this simple CSS trick without using JavaScript
Recently I had a need to add a very simple bit of functionality to my blog that would show/hide some bbcode examples. I didn't want to use Bootstrap/jQuery for such a simple task so I looked around and found this simple CSS trick that does exactly what I need by using a checkbox to trigger showing/hiding a pre element, effectively simulating a Bootstrap Accordion.
Recently I had a need to add a very simple bit of functionality to my blog that would show/hide some bbcode examples. I didn't want to use Bootstrap/jQuery for such a simple task so I looked around and found this simple CSS trick that does exactly what I need by using a checkbox to trigger showing/hiding a pre element, effectively simulating a Bootstrap Accordion.
29-Jul-2015
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.
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.
10-Jun-2015
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!
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!
19-Aug-2014
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.
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.
06-Oct-2013
Implementing Thingiverse OAuth2 with Google App Engine
I've been working on the next version of Extrudifier that will have integration to Thingiverse for direct uploads and Thing creations right from the Extrudifier app. This needed a bit of work to get the OAuth2 workflow set up, this is what I describe in this post. I chose to go with Google App Engine and Servlets because this was the easy and free and could be up and running quite quickly. All that's needed to implement this integration is a bit of JavaScript, a Java Servlet and some App Engine magic.
I've been working on the next version of Extrudifier that will have integration to Thingiverse for direct uploads and Thing creations right from the Extrudifier app. This needed a bit of work to get the OAuth2 workflow set up, this is what I describe in this post. I chose to go with Google App Engine and Servlets because this was the easy and free and could be up and running quite quickly. All that's needed to implement this integration is a bit of JavaScript, a Java Servlet and some App Engine magic.
14-Jun-2013
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.
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.
13-May-2013
Generate a nice looking star field with EaselJS and HTML5 canvas
I've been playing around with star field generation quite a bit lately for my game, so I've made a jsFiddle to test it out.
I've been playing around with star field generation quite a bit lately for my game, so I've made a jsFiddle to test it out.
30-Apr-2013
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.
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.
Hi! You can search my blog here ⤵
NOTE: (2022) This Blog is no longer maintained and I will not be answering any emails or comments.
I am now focusing on Atari Gamer.
I am now focusing on Atari Gamer.