Category: jQuery

Ensure certain elements on a page display in matching heights throughout.

02/26/2014 Aaron Belchamber 1 Comment

There are some new CSS tricks coming out that will allow for this to be done natively, but until then, here’s a way to make sure that all elements in a page, say gallery thumbnails or excerpts from posts, all display their full texts and are all sized the same.  Without using this fix after page load, some elements may display taller than others, and if these elements are floating in the page, they may definitely not display in a nice even grid as intended.same-height-of-elements-in-pageWith a few lines of jQuery (make sure you load the newest version via CDN) you just simply assign the elements you want to have the same height with the same unique class, like “same-height-group-1” or something short you can remember.  Then, change out the “.class-to-resize” in the script below with the actual class you assigned the elements.  From now on, after a page loads, all the elements assigned that same class will all have the same height, and you will never have to worry about those “sticky” floating blocks that ruin the whole look of your page.


<script type="text/javascript">
// You might probably want to envelope the below in a $(document).ready() function

max_h=0;

$(".class-to-resize").each(function(){

this_h=$(this).height();
if (this_h>max_h) { max_h=this_h;}

});

// Now, cycle through again to resize all elements to the maximum height

if (max_h>0){
$(".class-to-resize").each(function(){

$(this).height(max_h);

});

}

</script>

A simple way to ensure all your advertising has “nofollow” tags on every page

02/25/2014 Aaron Belchamber No Comments

Sometimes, you may not have access to your ad delivery network on your website, but the fact they are embedding ads in your pages without the rel=”nofollow” tag is costing your site in SEO. One thing you can do is insert this handy JQuery code in your page footer. All it does is wait for your page to load then it scans all your links for a match unique to the ad network and adds the “rel=’nofollow’ attribute in those matching

 tags.

Simply replace “ad-deliverer/” below to whatever unique part of the path you can use to identify your ad network, such as “doubleclick”.


$(document).ready(){

$("a").each(function(){

href=$(this).attr("href");

if (href.indexOf("ad-deliverer/")>-1){
$(this).attr("rel","nofollow");
}

});

});