On Development

Resize to a Specific Element’s Dimensions

· Comment

Here’s a snip­pet to resize a back­ground image to the dimen­sions of an ele­ment. In this case, #bkgIm­age.

var resizeBkg = function() { 
    var h = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
    var w = self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    var e = document.getElementById('bkgImage'); 
    if (w > h) { 
        e.width = w; 
        e.height = w; 
    } else { 
        e.height = h; 
        e.width = h; 
    } 
}

Detect Operating System with JavaScript

· Comment

Here’s a snip­pet of JS code that might come in handy if you, let’s say, would like to fil­ter out what type of con­tent to dis­play depend­ing on your web­site user’s OS. A real-life exam­ple would be hav­ing a down­load link show up to user’s who have a client that was only pub­lished on Win­dows.

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

Note: An alter­nate way can be found via PPK’s quirksmode.org

WordPresss Plugins Search

· Comment

Search­ing for Word­Press Plu­g­ins seems to not be very help­ful. The results that comes up on the page ain’t help­ing out. Although, there’s a “you may also try your search at Google” link below the results page—it should be eas­i­er to find the right ones.

Hmmm… will see if I have time to cre­ate maybe a boor­marklet. Unless there’s one already… any­one? For the time being, book­mark­ing or copy-and-past­ing the fol­low­ing would be best and make things effi­cient:

http://www.google.com/search?hl=en&q=site%3Awordpress.org%2Fextend%2Fplugins%2F+

Note: You should be able to add your search keyword(s) after the “+” plus-sign. For exam­ple:

http://www.google.com/search?hl=en&q=site%3Awordpress.org%2Fextend%2Fplugins%2F+test