Sometimes, things don’t make sense on the surface until you dig deeper.  Don’t worry, no one knows everything in their particular profession, and I am know exception.  A client of ours uses “OpenX” to manage their ads.  This ad delivery framework is pretty straightforward, but what happens if you are delivering ads into a CMS like WordPress from the OpenX framework API and all you want to do, depending on the type of page, post, or feed to dynamically move the ad banner to the ideal position within the content?

For instance, this client wanted all ads in posts to show up at the bottom of short posts or the third paragraph down of those longer than 3 paragraphs.  You don’t want your content writers to have to worry about placing ad snippets within their posts, that would be a lot of extra work riddled with many potential issues for workflow and be very counter productive.

I though my solution was simple, so I’ll explain what I first set out to do before I realized there was even a simpler solution.  My goal was to make sure all ads were delivered within a div tag that I could assign a specific class, say “openx-ad”, then, upon loading, I had a fancy jQuery script that could identify any openx-ad class then I would grab the html via

jQuery(".openx-ad").each(function(){  ad_html=jQuery(this).html();});

then after grabbing the html I would then remove the ad via:

jQuery(this).remove();

After cleaning the page and storing the ad into memory, I would then find the proper div to insert the html into by:

jQuery(".post-content p:nth-child(3)").after(ad_html);

Of course, the actual selector was a little more complicated than using “nth-child(3)” but you get where I’m going with this.  The problem came from the fact that moving elements  in your web page that were completely loaded in the DOM already can’t be cut and pasted somewhere into the DOM — the script will actual run again and the browser will execute it twice.  This caused all sorts of issues.  The solution came with “prependTo”, instead of doing all this cutting and pasting of html from one div into another, all you need is the source of what you want moved and a selector to tell it where to move it to.  In this case,

jQuery(".openx-ad").prepentTo(".post-content p:nth-child(3)");

was the only line needed to successfully move elements so any script tags within would not execute.  Yes, I could have removed the <script> </script> tags before moving, but often you will not want to remove behaviors.  “appendTo” would move the element to the point after the selector, in case any of you were wondering.

Here’s something I run into time and again.  The website looks great on different devices, you did a great job on that responsive layout.  But something silly happens and if you’re using a theme for your Drupal or WordPress site, they usually didn’t write code to accommodate this flaw in UI behavior.

When someone views your site on a smart phone like an Android or iPhone, when your nav bar and website header (logo and perhaps search box) takes up most of the top of the page.  So, when a user selects a new page, the new page loads, but the content is not seen at first — just all that top stuff at the top of your page.  Now, you can responsively perhaps save this precious display real estate by reworking in perhaps collapsible menus or be creative else where, or you can just make sure at a certain screen size you scroll the website to the top of the content you know the user is looking for.

This is a basic UI (user interface) principle — show the user what they are looking for with the least amount of user effort.  So, below is a simple behavior modification for your website in JQuery.  Just add this code in your footer, make sure you have the JQuery library loaded, rename the menu “li a” to your menu links, rename the “scrollTop” element from “.post-content:first” to the class where your posts start displaying content.  You may have to make other modifications to make it work in your CMS, but this should work with fairly few changes in WordPress, Drupal, Magento and/or Joomla:

// For responsive after button click to scroll to actual content instead of showing button menus up top
jQuery(window).load(function(){
var scrn_w=jQuery(window).width();

if (scrn_w<=800){

jQuery(‘html, body’).scrollTop(jQuery(“.post-content:first”).offset().top-25);

// Fix mobile devices not able to click main button
jQuery(‘li a’).click(function(){

jQuery(this).toggleClass(“menu_selected”);

jQuery(“.menu_selected”).unbind();

jQuery(‘.menu_selected’).click(function(){

go_url=jQuery(this).attr(“href”);
window.location=go_url;
});

});

}

});