loader

Resize a div based on the size of another div with javascript June 4, 2016

Once again I find myself having to write a little utility function to solve a problem in the project I am working on. This time I needed to needed to make a container the same size as another container. The use case here was that I needed the outer <div> to be the same size as the inner <div>. The solution was to write a javascript function that grabs the height of the container size I want and apply it…

Show a WordPress Page Parent Title May 16, 2016

Once again I ended having do a little WordPress PHP. I needed to have a page display the top most parent page title if it was a child page. Otherwise it would just display the title of the current page. I decided to write a function to put in the functions.php file because I needed to put in all the page templates for the site we were working on. Without much ado, here’s the code. Let’s go over this little…

Responsive Tables using CSS and Javascript May 1, 2016

On one project that I worked on there was a lot of tables being used. Although some people cringe at the use of tables, I see no problem with them as long as they are used for what they were intended for. Which is for data not page layout. One of the problems with tables is that they are not very mobile friendly. Because of that we had to devise a solution to make them work across the different device…

jQuery Font Resizer March 24, 2015

On my last project I was required to make a font resizing function that enlarges or decreases the global font size. It’s pretty easy to change the font size in jQuery. You could use something like this. $(‘.selector’).on(‘click’, function() { $(‘html’).css(‘font-size’, ‘125%’); }); However binding the font resize to a click event only works for the current page and will be reset when the user goes to another page. To make it stay persistent I opted to use the HTML5…

Tab content with jQuery March 14, 2015

Around the end of December 2014 and the first week of January 2015 I created this for the project I was working on. The gist of what makes this work is matching the data-tab attribute of the tabs with the id attribute of the content. The color change for the tabs is controlled by adding and removing a class. If you want to see this in action just look at any hotel listed on the roomandservice.com

How to load your javascript after another file in WordPress August 24, 2014

Recently I needed to load up a custom javascript file in WordPress and wanted it to be the very last script loaded. One of the ways to do this is add a dependency to the wp_enqueue_script() function. This is how the wp_enqueue_script() is supposed to be used according to the WordPress codex: <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> The $deps is the dependency parameter. It is an array of the handles of all the registered scripts that…

jQuery Time plugin August 22, 2014

I made this jQuery plugin that can display the users time and the time in another timezone. The plugin displays the date like this Fri Aug 22 2014 02:23:50. There is no am/pm because it uses a 24 hour clock. I could put it in but in my use case it was deemed unnecessary as the majority of the site visitors would be from one location and the time in the other timezone would be Hawaii. Here’s the plugin via…

Thailand Flag made with CSS / SASS July 27, 2014

I felt the need to play with Sass (Syntactically Awesome Style Sheets) and wanted to make something so I ended up making the Thailand flag on codepen.io. It’s made from a single HTML div element using the ::before and ::after tags. Here’s the flag but as a mixin that only requires the length and height.

How to display an exchange rate in Shopify August 10, 2013

It was recently requested of me to add some code to a Shopify site that would show the dollar to yen currency exchange rate and automatically display the price in Yen. You can see an example of this on any of the product pages under the add to cart button (カートに入れる) on shopping.iine.com. To do this the first thing we need to do is create a snippet that will hold the javascript necessary for this to work. In the Shopify…

© 2014 James McGrath