Handling visibility of mobile only pop-over DIVs on a responsive web site My travelblog.ws project is built as a responsive site so that I do not have to have a desktop and a mobile version of the site. Unfortunately some features are hard to implement generically and need a specific mobile version. One of these is the 'trip timeline'. On the desktop version it appears as a sidebar, on the mobile version it is a pop-over DIV that covers the whole page. The pop-over is triggered by pressing the 3-bar stack icon at the top of the page.
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.
Pinterest style columns example with CSS I've finally finished working on the Projects section of my blog and wanted to share the CSS and HTML I used to make it happen. I wanted to achieve the look that Pinterest uses for it's pins pages, where the pins flow down the page. I wanted to allow each pin to be of a different height and not to force other pins to align to it's top/bottom i.e. the gaps between pins should be constant and one pin could span the height of multiple other pins without interference of their layout.
How and when to inline Data URL images into CSS files CSS offers a lot of flexibility to web developers and can be used and abused in many different ways. The background-image property can be especially useful when dealing with images that should be displayed as overlays (via a DIV). I make use of this over at my jQuery PhotoBoxr plugin, however instead of using images I specify image data directly in my CSS file as a Data URL.
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.
A better way to handle fixed position DIV elements with form input fields Not long ago I wrote about Mobile Safari scrolling problem with an input field inside a fixed DIV and provided a solution that used a small amount of CSS to make the scrolling issue go away. This worked really well until I discovered that by setting overflow to auto caused the 'scroll' event to never fire. I rely on the scroll event firing so that I can dynamically load more data into a page, so this forced me into finding a better solution and here it is.
Mobile Safari scrolling problem with an input field inside a fixed DIV I've come across an issue in Mobile Safari while working on my travelblog.ws where 'fixed DIV' popup forms would cause the page behind the popup to scroll up as soon as the form was displayed. I narrowed this down to the jQuery .focus() method, but that wasn't the cause of the problem. Once I disabled auto-focusing of the first input field in my forms and manually selected an input field, the same behaviour manifested. I did manage to fix the issue eventually though.
Creating a resizable constant ratio DIV with CSS As I work away on my travelblog.ws project I encounter some interesting problems and creating a constant ratio DIV has been one of them. What I wanted to do was have photos that I uploaded, no matter whether they are landscape or portrait oriented to be displayed in a uniform manner, all with the same sizes, exactly how Facebook does it. This is my solution to that.
Use FontAwesome icons in place of Bootstrap Glyphs for form input validation Bootstrap has a fair amount of form customisation and it's form control validation classes are amazing, you can even use them with the glyphicons bundled with Bootstrap to display a visual indicator inside the form control itself. Did you know however, that you can also use any Font Awesome icon in the place of these glyphs? I've been doing just that recently and it looks great!
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.
Dealing with iOS9 ad blockers on your ad sponsored blog A new release of iOS always brings in new features and its share of troubles and this time it hasn't been any different. Since the iOS 9 release date on the 16th of September, Apple made available its content blocker API to developers. This brought out a deluge of ad blocker apps on the App Store, with some topping the charts within moments of release. This may be a welcome addition to many people, but something that many miss is how this hurts those sites and blogs that rely on advertising revenue to pay for their hosting fees.
How to change AfterLogic WebMail Lite PHP login logo to a custom image I've used the AfterLogic WebMail Lite PHP script on a number of sites now and find it quite easy to install and use. It has some limitations but if you are after just basic webmail capability it does a great job. One of the things I wish was easier to change is the logo you see on the login screen. After a bit of work I managed to change it, here's how.
Building a trip map with markers and paths using Google Maps Static API I've started thinking about how I will go about making a travel diary blog type web application that will be used on an upcoming round-the-world-trip and decided that I will definitely need maps on it. I wanted to do things like display the trip itinerary as a path with markers at each stop, I also wanted to show a zoomed in map of the current travel location. So I needed a way to generate these maps, the most obvious answer was Google Maps, and after a quick search I found exactly what I needed, the Google Maps Static Maps API. This makes static images of the map data, so it won't let you scroll around, etc, but with regard to my project, this is a perfect fit.
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.
Create an e-Commerce web site in one day with Bootstrap, PayPal and PHP I had an idea for a website a couple of weeks ago. It was a very simple concept - you write a text note up to 140 characters in length, pay for it and it gets sent anonymously on an A6 sized postcard anywhere around the world. The product was simple, the implementation of the site even simpler. Using modern technologies, implementing an e-Commerce web site is almost trivial. This article will show how I managed to take my idea from a concept to a fully functional e-Commerce web site in one day.
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!
Make FlatPress generate meta tags without the use of the SEO Metatag Info plugin Meta tags are still very important for SEO (Search Engine Optimisation) and posting to social media. For example if you don't have the description meta tag for your blog post, Facebook doesn't show the page description. This makes these tags crucial for any blog. If you use FlatPress, there is the SEO Metatag Info available to generate these tags for you automatically, however, recently I've noticed that there is a security issue with this plugin which allows anyone to write arbitrary files to your server and I quickly disabled the plugin and came up with an alternative to generating the meta tags I needed.
Blog activity graph for FlatPress Here's a small addition to FlatPress. It's a blog activity graph that displays the number of blog posts per month over the past number of months. I got this idea when looking at the Cobertura home page and seeing their commit activity graph.
Add a URL shortener plugin to FlatPress Ever since I've started sharing my blog posts on Twitter, I've wanted to have my own URL shortener. There was no such feature with FlatPress out-of-the-box, so I went ahead and made my own plugin. This post shows how to write a shortener plugin for FlatPress and then how to configure it to redirect from the short to real URLs.
'More on this blog' plugin for FlatPress This plugin creates a box with a number of links to other posts on the same blog. The look and feel is configurable via CSS. By default it displays 4 random posts, but that can be changed via code. I created this plugin to expose readers to more content and also to create more internal linking.
Use URL parameters to dynamically set the FlatPress theme for testing I've been trying to make some major changes to the theme on my blog recently and doing this on the live website is not a great idea, so I started looking into the FlatPress code to see how I could dynamically change the theme that it loads by specifying a URL parameter. The changes are straight forward, but do require modification of the core files.
Add metadata to Flatpress blog home and static pages using SEO Metatag Info Plugin The SEO Metatag Info plugin for FlatPress makes it easy to add metadata to blog posts (entries) using the HTML meta tag, however the static and blog pages do not seem to have the same functionality out of the box. Looking at the code reveals that these pages can also have metadata stored and added to when they are displayed. Adding this is a more manual task compared to blog posts, but it is possible.
Making ADF af:table emptyText appear with padding using some CSS I've been doing a fair amount of ADF work recently and especially dealing with tables. What I found was that when a table contained no data, the emptyText string rendering is very ugly by default, so I got exploring. It turns out you can put HTML into this string and customise how it is rendered with some CSS.
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.
Page view statistics generator for FlatPress The PostViews plugin for FlatPress is useful and captures how many times a blog post has been viewed, what I felt it was missing was a way to show this information across all of the pages. To fill that gap, I wrote a small script that uses data that PostViews generates to visualise a histogram of all of the blog's pages and posts and views per post.
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.
Adding GitLab Commits to a DokuWiki page (a very rough plugin) I was surprised to find that there hasn't been a plugin created to show all of the commits from the GitLab Git commit page in DokuWiki, so I went about creating my own. The plugin is very rough and hardcodes a lot of things, but it gets the job done.
Flatpress is not Twitter Bootstrap friendly I've been using Twitter Bootstrap quite a bit lately and am quite amazed how easy it makes to create good looking web pages, so I thought that I would update the theme on my blog to match it. I found out the hard way that Flatpress is not Bootstrap friendly at all and requires many hacks and edits to make it look right.
Generating dynamic images using HTML5 canvas with Google App Engine Not so long ago I wrote a small JSP page for my GAE based game that displayed all of the players and their basic stats plus an image representing their game map. This worked great on the development server, but on the production server no maps were being generated. Why? Because Google does not permit ImageIO classes to run on their servers. I started looking for other libraries to implement the same functionality and sadly didn't find much. So my solution was to do it in HTML5 instead.