Changing a DIV Width With JQuery Using Partial Matching

Recently I had to modify a site that has literally tens of thousands of pages with embedded videos where the videos have  fixed width. The old site width supported  a fixed width of 700px. The new site width only support s a pixel width of 600px.

Add to the mix every single player has a different ID associated with the DIV and even more fun the div is populated with JavaScript. To solve the problem I used jQuery.

Right out of the gate lets look at an example of what the code on the site looked like before. Each Player loads dynamically with JavaScript into a DIV that looks like so;

<div id="bolt-710881740553305"><div id="bolt-710881740553305-container"...

Every single one of those ID numbers changes based on which video is loading. So to automatically change the width from 700px to 600px I used some basic jQuery to find any DIV that have an ID field that starts with bolt and in doing so assigned them all a new width.

I am waiting until the page is done loading before I fire my code to be sure that the JS has had a chance to load and any other rules have been applied.  The very simple code that does the work is as follows;

$(document).ready(function()
{
$("div[id^='bolt']").width('100%'); 
});

There you have a very simple method of finding a div using regular expression where you are only matching part of the title and changing part of its css rules, in this case the width.

Update WordPress Posts Without Page Refresh

I recently had to write-up some code to refresh the WordPress posts of a website without a page reload. So the idea is that a user clicks a button and all the posts below it reload automatically without a page refresh making the user experience much more polished and engaging.

There are a whole variety of Plugins for WordPress that will Ajaxify your WordPress site but that for me is like shooting a fly with a howitzer. I want the KISS method wherever possible and you should as much as possible avoid using plugins as they can slow down your WordPress site dramatically.

Frankly in this scenario there is no reason to use a plugin since implementation of refreshing WordPress posts can be done very easily with jQuery.

In this particular scenario what we are dealing with is tabbed content and each tab is representing a different set of content. So when ‘latest news’ is clicked it loads latest news, TV news loads television news,, Movie News and Hot Stories all need to do the same thing. ( illustration below )

Using a bit of jQuery we can achieve the reload effect efficiently and in only a few lines of code. Within the screen above I have a DIV placeholder identified with the id “loader”. All my jQuery is going to do is find that DIV placeholder and reload its contents with an external file called ‘news.php’.

The entire code snippet is as follows;


jQuery("#loader").load("/news.php");
jQuery("#loadtv").click(function()
{
     event.preventDefault();
     jQuery("#loader").load("/tvnews.php");
     setTimeout(addcss,1000);
});

Lets break down exactly what this code is doing. The first line is quite simple. As soon as the webpage is loaded I am finding the DIV on the webpage called ‘loader’ and I am loading into it the latest news from my external file called ‘news.php’ News.php is a file in the root folder of my site which contains a WordPress loop that would looks like so;

<!--?php
require('/wp-blog-header.php');
query_posts("showposts=16");
while (have_posts()) : the_post(); ?-->
<a href="<? the_permalink(); ?>"><!--? the_title(); ?--></a>
<!--?php <span class="hiddenSpellError" pre="php " data-mce-bogus="1"-->endwhile; ?>

As soon as a user clicks on that TV news tab my jQuery function captures the click and replaces the ‘loader’ div with new content, this time TV news content.

Within this code you will notice I have event.preventDefault(); this code is simply there to prevent the page from trying to reload since the user is clicking on am HREF link but I don’t want to load the page I only want to load my jQuery TV news function.

Also you should note that when you replace the contents of a DIV with new content you may break other jQuery functions associated with it.  In my case the image you see is also a left to right slider and by replacing the div content it broke the jQuery slider code associated with it. So I had to reapply some CSS settings to the new ‘reloaded’ DIV content as well as reinitialize the carousel query so my code looked like this;

event.preventDefault();
jQuery("#loader").load("/tvnews.php?");
setTimeout(addcss,1000);
initCarousel();
initNav();

jQuery may not be the solution to all problems but it can certainly solve alot of them. This post is not intended to be a step by step how to it is only intended to inspire you like it has me. My final iteration of the code above is much more complex including tracking event clicks with Google Analytics and a jQuery animation effect as it transitions between TV News, Movie News, etc.

What is TweetGanic? Referral Service or Content Theft?

Last night I wrote up a blog post on What is a Growth Hacker and this morning I woke up to a bunch of referral traffic from a site I had not heard of before called TweetGanic. Naturally whenever I see a new referral I have not noticed before I want to go and investigate and the results were quite fascinating. TweetGanic is an enigma of a service that appears to paint itself as a ‘referral service’ but is in fact taking content from bloggers, slapping an ad on it and causing some original content owners to go snaky.

To see what I mean click on this referral link and look at the address bar. It looks like one of my articles but it is not;

http://www.tweetganic.com/a/307204

The articles are in fact being loaded on TweetGanic’s website. So unlike services like ZERGNET for example that drive traffic to your site TweetGanic is in loading your content on their site.  Worse yet it it also loading a really obnoxious ad on top of the content which you can see in the screenshot below.

Fullscreen capture 6302014 90917 AM

 

Quite a few bloggers I can see are screaming mad over Tweetganic taking their original content. Nathan LeClaire goes so far as to call them vultures writing;

Finding people using your stuff, greedily, for their own personal gain with no thought towards the blood, sweat, and tears that went into generating it feels like a dagger to the heart.

Blogger Ken Leaver on the other hand takes a completely different look at what is happening writing;

The content owner (me) in this case benefits from more people reading their content (albeit many of them will not read it on my URL and so there will be less traffic and link juice to my blog).  But this is a relatively small sacrifice to make to getting more readership of my content overall.

I am honestly not sure what I think just yet. One thing is for sure they are not actually lifting any content. I have had small blogs, big blogs and even multi national companies take content that I have written and publish it on their sites without credit or compensation.

TweetGanic is not actually stealing the content in the traditional definition.

When I drilled down into their source to see what they were doing and why it was even tracking as a referral I could see that it was loading my content in an IFRAME on their server as exhibited by the screenshot below.

TweetGanic

I am not entirely sure what I think of what TweetGanic is doing. Clearly they are the big winner but I also did not make out to bad. I woke up to alot of new readers, a handful of new subscribers and it cost me no money and was no work on my part.

In exchange they are loading content of mine on an iframe on their site. Content theft? I am not so sure. Referral Service? I suppose.

What is Growth Hacking? Let Me Tell You

I just read a fascinating article by Gerado A. Dado a Product Marketer who attempts to defines what it means to be a growth hacker. As somebody who has been called a ‘growth hacker’ I wanted to not only share how Gerado defines a Growth Hacker but also dig into it deeper.

Gerado says a Growth Hacker has the following characteristics;

  • Typically found in early stage startups – with no formal marketing teams or budget
  • Where marketing is performed by engineers or non-career marketers
  • That uses smart, cheap and unconventional methods to grow the business
  • With a strong focus on analytics, metrics, virality and scalability

I find his four points fascinating and for the most part accurate. When I first got involved in online analytic’s over 20 years ago the very first step was learning the computer science and with the science came the ‘growth hacking’.

A Growth Hacker by my definition is somebody who does not work in traditional marketing. We work online and use years of experience to drive traffic using nontraditional. Looking at Gerado’s 4 points I want to deconstruct them and put them in what I would consider a more appropriate definition;

Point 1: Typically found in early stage startups – with no formal marketing teams or budget

I agree. Growth Hackers as they are coined are typically found in small businesses looking to innovate against larger competition. Typically these companies have very limited resources and do not have the revenue to support a marketing team to do large and sometimes expensive traditional marketing campaigns.

Point 2: Where marketing is performed by engineers or non-career marketers

I agree. I am the first one to say I have no formal training in traditional marketing but I am also not an engineer. My background is in analytics and programming and I use my knowledge of analytics, patterns and algorithms to drive growth.

Point 3: That uses smart, cheap and unconventional methods to grow the business

Nothing to add here I agree.

Point 4: With a strong focus on analytics, metrics, virality and scalability

Nothing to add here I agree.

A Growth hacker is somebody every marketing team needs and is a non-traditional marketing person with a strong background in analytics and a very deep knowledge of the ‘internet of marketing’. A Growth hacker knows how to drive inbound links to your sites. They know how to grow a facebook community from 35k fans to 185,500 fans in under 5months with no budget. A Growth Hacker also knows that evolution is a weekly event and unlike more traditional fields daily research and review is needed.

A growth hacker is an innovator, an outside thinker and most of all a nerd. They are most certainly NOT a marketing professional but if you were to pair them up the results are phenomenal. As companies like BuzzFeed have proven.

Handling Ads in Responsive Webpage Design

I recently had to rework a wordpress site to use a responsive layout specifically addressing responsive advertising. The original CSS designers were using @media tags to hide content as the window size changes which is quite standard and effective.

So for example in the following code as the screen drops down to a mobile size it hides the div content of the header which also happens to contain the 728×90 like so;

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.header
{
display:none !important;
}

This works great but the huge flaw in doing this is we are now hiding ads but still calling them which is a terms of service violation for the ad networks. You can not hide an advertisment from the screen you actually need to make sure the ad is not called at all.

I have seen a lot of ways that people have done it using Jquery or even wordpress plugins but candidly I found them all far to complex for my needs. Instead I am using a simple javascript snippet to detect the screen size and display the ads only if it is appropriate.

So if you load the site on a mobile device NO ADS are loaded but if you load it on desktop or an IPad advertising is loaded. The bare bones concept of how I did this is I have a DIV on the page which is empty like so;

<div id="topad"></div>

Using Javascript I am now checking the width of the users device and injecting the ad so long as the screen is wide enough to support it and if not I am not hiding the advertisement it is simply not loaded.

$(document).ready(function ()
{

	   if ($(window).width() > 480)
	 {
		 if (document.getElementById("topad"))
		 {
         document.getElementById("topsdah").innerHTML = 'injected ad tag';
		 }

Worth noting this code is a basic example and I have built on the concept significantly but if you are looking for a basic concept on how to do responsive ads this works quite well from my experience without the need for JQUERY or anything else fancy.

JAGA, The Best Kept Secret in Radiators

JAGA rads are without question the most impressive radiator I have seen to date and this brand new product is ironically not new at all. JAGA was founded in Belgium in 1962 and has spent the last 52 years re-inventing the radiator industry while making rads cool again.

Unlike with some radiator companies JAGA seems focused on building rads that they compare to a ‘classic 50’s car’ that will last a long time and actually be something you are happy to have in your home. Lets be honest when is the last time somebody showed off their hot water radiators? With a JAGA rad I have actually had people say with pride ‘I have this in my house’ specifically referring to the heat wave product below;

heat wave jaga rad

The Heat Wave Radiator is an award-winning Rococo design by Joris Laarman and is just one demonstration of what I mean by JAGA making radiators as they claim ‘like a hand-made classic car’.

Not only is JAGA invested in building ‘cool radiators’ but they are building rads that are some of the most efficient on the market delivering the highest efficiencies and the highest BTU outputs while also having the lowest impact on the environment.

Not only that For every dollar I spend heating my home with a JAGA rad I am getting some the highest BTU outputs possible.

JAGA’s low mass rads hold 1/3rd the water of a panel radiator and are designed to warm up in under 2 minutes where as other radiator designs can take up to 40minutes to warm up. So in the coldest days or even those shoulder days where you just need a bit of extra heat you are getting it in under 2 minutes not 40 minutes and more importantly you’re not sweating to death for the up to 40 minutes after that it takes the rad to stop heating the room. Not only will it deliver improved comfort but JAGA notes that it will also save an additional 10-15% on my heating bill.

The easy explanation on rads and how some of them take a long time to respond is to compare them to listening to your stereo. If you had to wait 40 minutes after your stereo was turned on to actually get music would you be happy? Even better when you are done listening to music and want to go to bed or watch a TV show would you be happy having it play for 40 minutes after the radio turned off? Of course not. So why should your radiators work the same way?

If its cold in my house I want heat immediately. Alternatively if the room is at temperature I don’t want to waste energy heating it for 40 minutes after. I want to heat my home efficiently and remain comfortable which JAGA seems to have figured out.

As a bit of background the reason I have JAGA on the brain is I recently installed RAUPANEL in my house to address an issue with comfort in my living room. The room was a freezer in the winter and the carpet was destroyed so I fixed both at the same time. Adding the RAUPAnel added an extra 28 BTU’s per square foot at 110 degree water making the room the most efficiently heated in my home and also the most comrtable.

Unfortunately RAUPanel is not viable for my master bedroom another serious problem area thanks to shoddy ductwork because I am not about to rip out the floor which is what is leading me to my Plan B, the JAGA low temperature radiators.

Installing a JAGA rad is simple because all I need to run is two PEX lines off my REHAU Probalance manifold and into my bedroom and from there I can deliver easily 3500 BTU’s of extra heat using a JAGA ‘PLAY’ radiator (seen below).

jaga play radiator

Will this JAGA rad be the least expensive radiator on the market? Of course not. Will it be;

  • Able to heat up in 1/6th the time of more traditional radiators? Yes
  • Have the lowest volume of water for fast heat up  / cool down? Yes
  • Use the least amount of fuel to heat my home? Yes
  • The most efficient? Yes!
  • The most environmentally friendly ? Yes
  • Will my wife love it? Yes

I like most am all about saving a dollar but I am not going to overlook the long term costs of heating my home every month. I am willing to pay more up front for a JAGA radiator as I did with RAUPanel to save myself money every month on my heating bill rather then saving a few dollars up front.

 

Get Mouse Position in Your Browser

I am building some new scroll event code and part of that code is making sure that new dynamic content loads based off the users position on the page.

I use chrome for just about all of my dev and a little bit of javascript in the console does wonders. Paste the following into your dev console and take the guesswork out of where your mouse position is

document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};

This code checks the x and y position in your browser every time you move your mouse and shows it on the screen. This was incredibly helpful for me when I was working on a dynamic and infinite loading scrollbar to be sure content was loading at the correct spot.