Igor's Blog

28-Mar-2017
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.
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.
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.
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.
02-Sep-2016
Fix your site's microdata with the Google Structured Data Testing Tool
It's been about two years since I've added microdata to my blog and since then support for this feature has really improved. I happened to check it out recently again, just by chance, and saw that Google has enhanced their Structured Data Testing Tool significantly.
24-Aug-2016
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.
14-Aug-2016
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.
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.
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.
19-Jul-2016
Expand on hover button using only CSS
Here's a little bit of CSS to create a button that expands when you hover over it. I used this over at travelblog.ws to create a 'Home' button that expands to allow the user to jump directly to specific parts of the home page. All of this is using pure CSS, no JavaScript required.
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.
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.
31-May-2016
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.
20-May-2016
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.
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.
24-Apr-2016
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.
22-Feb-2016
Reuse the same form for both add and edit actions with some JQuery and CSS
Creating multiple forms when you want to add or edit data in a web app can be an annoying and an error prone task so why not reuse the same form with a couple of CSS style classes and a bit of jQuery code. Here's how I do it on my Travel Blog project.
18-Feb-2016
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!
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.
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.
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.
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.
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.
20-Sep-2015
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.
19-Aug-2015
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.
05-Aug-2015
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.
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.
16-Jun-2015
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.
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!
02-Jun-2015
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.
24-Apr-2015
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.
15-Apr-2015
RaspberryPi and a USB monitor combined to make a photo frame (part 4)
A while back I wrote an entry on how to get the Lenovo LT1421 USB DisplayLink monitor working on a RaspberryPi. Now I took that a bit further and created a photo frame using the Raspberry Pi model A, a USB monitor and a bunch of software and some custom scripts.
06-Feb-2015
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.
07-Oct-2014
'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.
16-Sep-2014
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.
09-Sep-2014
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.
03-Sep-2014
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.
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.
30-Apr-2014
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.
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.
06-Jun-2013
ADF 10g Aligning a form Submit Button to the input fields
For a very simple task of aligning a button to the input fields on the rest of the form, in ADF 10g it is quite a painful process. It took me a bit of experimentation to get it working correctly, but here is the result.
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.
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.
26-Apr-2013
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.
25-Apr-2013
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.
23-Apr-2013
Development with App Engine, Bootstrap, JSON and a bit of JavaScript
I've been using JSON-RPC quite a bit lately and I wanted to have a way of calling my service without writing any special proxy code or using additional libraries, so I've put together a GAE App that uses Twitter Bootstrap for the UI and the json2.js to parse the JSON that's received using the XMLHttpRequest object. It was so quick and easy and the results look quite good.
16-Apr-2013
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.
03-Mar-2013
Download Counter BBCode Plugin for FlatPress
This is a plugin for FlatPress that adds a BBCode 'download' tag with a link to the file to download and a counter for how many times the file has been downloaded.
27-Feb-2013
Adding microdata to FlatPress themes so Google can create rich snippets for a blog entry
Rich snippets provide a way for Google to display search results in a more structured way and give the user an idea of what is on the site with a quick glance of the search result. There is an overview on how to do this using microdata, which is non-intrusive to the web page and quite easy to get started with.
25-Feb-2013
Adding a permalink to each FlatPress blog entry
Most blogs provide a permalink option for every blog entry, this is something I've noticed was missing from the FlatPress themes I've tried.
20-Feb-2013
Adding Google AdSense ads to FlatPress without violating Google policy
When I started modifying the FlatPress theme I am using to include AdSense content, I wanted to be able to have the main blog page not displaying any ads within the entry, but when viewing a single entry, I wanted additional ads shown inline with the entry itself.

Previous Post

Next Post

Programming, DIY, Games, Hacks, Tech and more.
Follow me on...
Current and Past Projects
See my Resume

Subscribe


RSS Feed

My Other Web Sites

Igor and Elise's Travels
Riverside Expressway Cam
300 George St Blogumentary

My Online Tools

UUID to OID Converter
Guru JSON-RPC Tester
Extrudifier Object Designer

Recent Blog Posts

Handling visibility of mobile only pop-over DIVs on a responsive web site

WebLogic package-name element classpath generator script

Using Jersey 2.x as a shared library on WebLogic 12.1.2

Google DFP with AdSense fallback is causing infinite scroll pages to go haywire

Workaround for Mobile Safari scrollTop() not updating during scroll

Skipping execution of Maven plugins that do not have a native skip option

Unmarshalling an XML fragment representing a JAXB object without XmlRootElement

Injecting a ContainerRequestContext into a Jersey entity provider class

Obfuscating PHP source code with Maven and YAK Pro PO

Making use of corner shelves with easy to make slide out draws

Recent Galleries

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

DIY spare parts computer build with a RAIDMAX Anura case

Fake 'Lepin' brand Lego packaging

Hardwood garden bench with clear resin void filler

Fixing a 3D printer extruder that stopped heating up

Easily increase disk space in a Lenovo Ideapad 100S 14" laptop with an M.2 SSD

Making a multi-piece 3D printed solder spool holder stand

DIY indoor apartment grow light wiring

Good Friday Electronics fun Easter Bunny LED PCB Kit IBEABU-01.0

Top Categories

Blogs I follow

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth

Friends

RAWS Parts Online
Alpha Dimensions Hosting
Kristensen Photography
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity
Follow me on... 
     
...or subscribe for updates!

Don't show this again