HTML

<div class="adsense">
	<!-- AdSense code goes here! -->
</div>

jQuery

$(document).ready(function(){
        setTimeout("checkAds();", 1000);
});

function checkAds() {
        if ($(".adsense").height() == "0") {
                $(".adsense").after("<div class='alt'><h3>Don't like ads?</h3><p>Me neither.</p><p>But you should know that the ads on this site help pay for hosting, domain renewal, and keeping me motivated to make other oddball apps and websites.</p><p>Please consider disabling your adblock software for this domain. In return, I'll give you an appreciative high-five if we ever meet in real life.</p><p>-Tommy</p></div>");
        }
}

How It Works / Demo

Pretty straightforward, really. This waits a second after the doc loads and sees if the .adsense block has any height. If not, it puts a message after it.

The old code used math and tried to count the number of children, but it was sort of clunky even when it did work.

Like before, don’t expect this method to be fullproof. I’m open to other ways.

To see it in action, visit my BigImg.it app with and without AdBlock enabled.

<?php if (!isset($_GET["maint"])) { exit("Working... come back later!"); } ?>

You can view it by appending ?maint to all the URLs, which normal visitors won’t know. Of course, you can use other attribute names or text.

Is this the most secure way to do it? Definitely not. But for most purposes, it’s totally fine.

(These demos and pictures use my Movie Monster gig, because the aforementioned project isn’t ready to be talked about.)

Keeping It Simple with CSS

Demo!

<div id="mockupoverlay_original">original</div>

<style type="text/css">
#mockupoverlay_original {
	background-color: rgba(0,0,0,.5);
	font-size: 12px;
	color: white;
	position: absolute;
	top: 5px;
	right: 5px;
	height: auto;
	font-weight: bold;
	padding: 5px 10px;
	cursor: pointer;
	z-index: 1000 !important;
}
#mockupoverlay_original:active {
	background: url("mockupoverlay_original.jpg") top center no-repeat;
	padding: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -5000px;
}
</style>

This affixes an “Original” button to the top right of the page that, when clicked, overlays the original mockup on top of everything, centered and at the top. Sweet and simple, it’s just a line of HTML and some CSS. Wowza!

Tip: If you realtime edit your CSS with Web Developer Extension like I do, you can change that :active pseudo-class to :hover and add something like opacity: .5; to it. That’s called onion skinning, an animation technique.

Making It Hot with jQuery UI

Demo!

<div id="mockupoverlay_slider"></div>
<div id="mockupoverlay_original"></div>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">
#mockupoverlay_slider {
	z-index: 999;
	font-size: .75em;
	position: fixed;
	width: 50px;
	top: 15px;
	right: 15px;
	opacity: .33;
}
#mockupoverlay_slider:hover { opacity: .66; }
#mockupoverlay_original {
	z-index: 900;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("mockupoverlay_original.jpg") top center no-repeat;
	opacity: 1;
	display: none;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1");  google.load("jqueryui", "1");</script>
<script type="text/javascript">
$(function() {
	$("#mockupoverlay_slider").slider({ step: 10, change: function(event, ui) {
		$("#mockupoverlay_original").css("height", $(document).height());
		mockup_opacity = $('#mockupoverlay_slider').slider('value')/100;
		if (mockup_opacity == 0) {
			$("#mockupoverlay_original").hide();
		} else {
			$("#mockupoverlay_original").show().css("opacity", mockup_opacity);
		}
	} });
});
</script>

Here, instead of an “Original” button, there’s a slider, courtesy of jQuery UI, that controls the opacity of the overlay. All the way to the left, it’s hidden and you can interact with the page normally. All the way to the right, it’s fully opaque. Anywhere in the middle, it’s some fractional semi-transparency. The overlay also stretches to the entire height of the document, not just the first 100%, so you can scroll vertically.

You’ll notice that everything that can be is pulled in from Google’s CDN: jQuery, jQuery UI, and the base jQuery UI theme. Because why not?

Use It or Lose It

To use either of these approaches, copy its code and place it at the bottom of your HTML just before the closing </html> tag. Then either name your mockup image “mockupoverlay_original.jpg” and keep it in the same folder or modify the CSS to point to wherever/whatever it may be.

Make sense? Let me know if you find good use for it.

These are often built into the CMS or template itself rather than the content, so it’s entirely possible for them to appear on pages too short to be useful.

Here’s a jQuery function I wrote to remove the “Back to top” link if the page’s content isn’t longer than the window.

jQuery.fn.autohidebacktotop = function() {
	if ($("html, body").height() <= $(window).height()) {
		$("#autohidebacktotop").remove();
	}
	this.bind("click", function() {
		$("html, body").animate({scrollTop:0});
		return false;
	});
}; 

The accompanying HTML:

<p id="autohidebacktotop"><a href="#">Back to top</a></p>

And then you can call it like so:

$(document).ready(function(){
	$("#autohidebacktotop").autohidebacktotop();
});

How is this better?

• Gracefully degrading, still works if JavaScript isn’t enabled
• #autohidebacktotop can be styled with CSS as normal
• Nifty scrolling animation

On.. Off... On..

AdBlock is pretty much the best thing to ever happen to the internets. That being said, sometimes it’s important to make money. You know, like, when you’re a poor dude. With bills. And a stomach that wants food. And web hosting to pay for.

I threw together some jQuery the other day to display a little message to visitors with AdBlock running and blocking, in my case, Google AdSense ads. It doesn’t block them from content or do anything cruel, but it does lightly suggest they disable the software while here.

Note: This hasn’t been tested with all browsers, platforms, and advertising systems. You may have to tweak it to get it work in your situation. It may also not be future-proof, as AdBlock undoubtedly changes its formula as the internet evolves.

The HTML

<div class="adsense">
	<!-- AdSense code goes here! -->
</div>
<div id="search">
	<!-- something else goes here maybe! -->
</div>

Wrap all your ads in a div with a class of “adsense”. This HTML only has one, but you can have as many ads as you need. The “search” div doesn’t necessarily have to be search, just was in my case. Simply pick an element with a unique ID or class to have your message appear by (or in place of).

The jQuery

$(document).ready(function(){
	if (($(".adsense *").size() == $(".adsense").size()*2) || ($(".adsense *").size() == 0)){
		$("#search").prepend("<div class='adblock'><p><strong>Oh No!</strong></p><p>This is where you make an emotional appeal to your visitors, urging them to turn off AdBlock when visiting your site. I'll leave that up to you.</p><p>Thanks!</p></div>");
	};
});

AdBlock doesn’t remove those “adsense” divs, just their contents. This bit of JavaScript checks to see if the number of those div containers is equal to itself times two or if they’re all empty. (Curiously, if you check for one, AdBlock interprets that as a shifty workaround and removes the other. Don’t ask. Just copy.) If the logic returns true, an appreciative and humble message is prepended to the “search” div.

If you’d rather the message appear after the “search” div, use “append” instead of “prepend” in line 3. If you’d rather it replace the contents of the div instead of affixing it, use “html“.

The div wrapper around our message is for CSS and serves no functional purpose. Modify to your liking, just make sure the whole shebang is treated as a variable, contained (and not broken) by quotes.

The CSS

.adblock {
	border: 1px solid #828282;
	padding: 10px;
	background-color: #ece5dc;
}
.adblock strong { font-size: 16px; }

Optional. Pretty self-explanatory.

The Verdict

To see it in action, disable and enable AdBlock and refresh any page on this site. Did it work?

Excluding certain categories from the front page is a pretty easy task, just use the query_posts() function to remove those categories before going into the loop, like so:

<?php if ( is_home() ) {
    query_posts("cat=-3");
}
while (have_posts()) : the_post(); ?>

But if the visitor tries to see the next set of posts through “Older Entries,” the same results are queried. Instead, use this:

<?php if ( is_home() ) {
    query_posts("paged=$paged&cat=-3");
}
while (have_posts()) : the_post(); ?>

We can tell query_posts() which set of posts to display with the paged parameter and the $paged variable, a WordPress variable which returns the current page number (1 for the first, 2 for the second, and so on).

Let’s say, for example, we’ve got a Music category with music genres as subcategories and posts specific to those genres organized respectively:

• Music
  • Rock
    • “The History of AC/DC”
  • Hip Hop
    • “What Ever Happened to Bell Biv Devoe?”
  • Pop
    • etc
  • Jazz
  • etc

When viewing the Music category archive, these subcategory posts will be displayed all mixed in together and in reverse chronological. What we’d rather have is each subcategory given its own individual listing of its posts, prefaced by an H2 title and subcategory/genre description. We’ll order the subcats alphabetically; their posts chronologically.

To do this, we’ll modify/create a category template for our Music category, in my case, category-17.php.

We’ll use the get_categories() WordPress function to create an array of the current category’s subcategories.

<?php $categories = get_categories("child_of=17"); 

The child_of parameter tells the function to grab all the child categories of 17, the ID for our Music category. You’ll substitute whatever ID your category is. The function will automatically order the subcats alphabetically, but you can also set it to order by ID.

Next, we’ll use PHP’s foreach construct to iterate through each array asset, find its subcat ID, and query_posts() to grab that subcat’s posts.

foreach ($categories as $cat) {
	query_posts("cat=$cat->cat_ID&showposts=-1&order=ASC&orderby=name");

The showposts=-1 parameter tells query_posts to grab all the posts without stopping at the default number for your installation, and order=ASC orders them in normal chronological order (default is DESC, descending).

Then we use a simple WordPress loop to display that post’s goodies, close the foreach(), and let it go on to the next subcat.

Finished code:

<?php $categories = get_categories("child_of=17"); foreach ($categories as $cat) { ?>
	<div class="genre_subcat">
		<?php query_posts("cat=$cat->cat_ID&showposts=-1&order=ASC&orderby=name"); ?>
		<h2><?php single_cat_title(); ?></h2>
		<small><?php echo category_description($cat->cat_ID); ?></small>
		<?php while (have_posts()) : the_post(); ?>
			<div class="post">
				<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
				<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
				<p class="postdate"><?php the_time('F jS, Y') ?></p>
				<?php the_content(); ?>
				<p class="postmetadata">Posted in <?php the_category(', ') ?> |
				<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
			</div>
		<?php endwhile; ?>
	</div>
<?php }?>

Explanation:

We grab an array of the category’s children, iterate through each one, make a new “genre_subcat” DIV, query the subcat, display a subcat header and description, loop through the posts with a while (have_posts()) construct, and finally display each post in a DIV with an H3 and some metadata, all before closing the while and querying the next subcategory in the array.

Of course, this is sort of a skeleton of what you could do, but you get the idea. Yay! Sorting a category’s posts by subcategory! Yayy!!