CSS vs jQuery: Screen Widths and Scrollbars
CSS media queries and jQuery window width calculations each handle scrollbars differently. This can cause unexpected (and ugly) results when they are used together. I was recently building a responsive menu system that relied on CSS media queries to create a vertical menu for small screens, such as mobile devices. I then used a jQuery width measurement to determine whether or not to create a button for toggling the visibility of the vertical menus. However, I was in for a nasty surprise. Unfortunately, when a CSS media query measures the width of the window it includes the width of the scrollbar. On the other hand, when jQuery measures the width of the window it does not include the width of the scrollbar. When there was no vertical scrollbar, both my CSS media query and jQuery function would fire at the same window size. However, when the page content was long enough to require a scrollbar, the jQuery function would fire first. Eventually, I realized that I could disable scrolling momentarily while I placed the window width into a variable for use later in the script. Here is what it looks like:
jQuery('body').css('overflow', 'hidden');
var window_width = jQuery(window).width();
jQuery('body').css('overflow', 'auto');
I hope you find it as useful as I did!
- PublishedJanuary 21, 2012
- Posted InJavascript, Responsive
Change Default Media Settings on Theme Activation
Let’s face it, if you’re a developer you want to make things as simple as possible for your clients. One way to do this is to set the default media sizes when your theme is activated. Your users should never need to try to figure out the width of the content area. They shouldn’t have find where the default settings are located. They shouldn’t have to worry about any of that. When they upload an image or use an embed code, the correct sizes should already be set. Here’s how you can do that for them.
- PublishedNovember 3, 2011
- Posted InWordpress
- DifficultyIntermediate
WordPress Taxonomy Tabs
Jason Schuller of Press75.com mentioned on Twitter yesterday that the taxonomy UI in the WordPress admin could use some improvement.
In regards to custom taxonomies, it would be nice to have just one tabbed box within the editor instead a separate box for each taxonomy.
@jschuller
Jason Schuller
I thought that sounded like a good idea, so I went about figuring out how such a change could be made. (more…)
- PublishedNovember 1, 2011
- Posted InWordpress
- DifficultyIntermediate
Simple CSS Drop Down Menus
I was building a drop down menu while working on a personal project and I decided to see how lightweight I could make it. This is a pure CSS drop down menu, no Javascript is used. Only 50 lines of generously spaced CSS were needed to create a cross-browser drop down menu and the entire demo file weighs in at just over 1kb. It uses the same HTML structure as the default WordPress menu system, so it can easily be used in WordPress themes as well. (more…)
- PublishedOctober 29, 2011
- Posted InCSS
- DifficultyIntermediate
Setting the Default Editor for a Custom Post Type
Recently I was working on a project where I was writing some PHP and HTML source code documentation and publishing it via WordPress. As you may know, the WordPress visual editor isn’t ideal when it comes to handling such code. Consequently, I went looking for a way to set the default editor to HTML rather than Visual. However, I didn’t want to cause the HTML editor to be the default across the entire site, so I created a custom post type for my code documentation. Then I changed the default editor for only that post type with the following piece of code:
add_filter('wp_default_editor', 'set_default_editor');
function set_default_editor( $type ) {
global $post_type;
if('code-doc' == $post_type)
return 'html';
return $type;
}
All you need to do to use this piece of code is change “code-doc” to reflect the name of your custom post type.
- PublishedOctober 7, 2011
- Posted InWordpress
- DifficultyIntermediate
- Tested With3.2.1
WordPress Plugin Template
I’ve started developing WordPress plugins from scratch too many times. I don’t enjoy repeating the setup process for every plugin I develop, so I’ve created a default plugin template that has all the basics included. Enjoy!
- PublishedJune 15, 2011
- Posted InPlugins
- DifficultyAdvanced
- Tested With3.0 +
The WordPress “More” Tag
Those of you who know WordPress like the back of your hand, please feel free to skip this post. It is simply an explanation of the “More” tag used by WordPress post editor. The “More” tag is used to let WordPress know just how much of each post should be displayed on multiple post pages (for example: the home page, category pages, tag pages, search pages, etc. where you might not want to display the entire post). WordPress will start at the beginning of a post and display everything until it runs into the “More” tag. When it reaches the “More” tag, it will insert a “Continue Reading…” link and move on to the next post. Just below this paragraph there is a screen shot of the “More” tag in action. The upper circle is surrounding the “More” button, while the lower circle is demonstrating the visible result of the “More” button from within the post editor. To use the more tag, simply place your cursor at the desired location and click the “More” button. Easy as that!
Year Two
Today marks exactly two years since I started this website. Once again, I didn’t post nearly as often as I had hoped. Life away from the keyboard keeps interrupting, but I wouldn’t have it any other way.
Statistics
Here’s a quick rundown of the blog this year:
- Blog posts: 8
- Visits: 8,649
- Visitors: 7,537
- Pageviews: 11,670
- Avg. time on the site: 0:48
- Backlinks (as measured by Yahoo): 210
- Google Pagerank: 3
I didn’t even post once a month, but visits, vistors, and pageviews more than doubled since last year. Average time on site decreased by about 5 seconds though. Over 75% of my visitors are finding my site through a search engine, while only 10% are coming from referring sites. It’s nice to know people are searching for topics I’ve written about, but I’d like to bring up the percentage of people who find me through other sites who have linked to me because of content that they found helpful or worthwhile. My backlink count grew by just 35 this year and my Google pagerank actually dropped from 4 to 3. I won’t be in school this year, so I might finally get back to blogging a little more often.
Goals
I set a few goals in my one year review post, and now that year two is behind me, it’s time to review them.
- Re-brand Sackcloth Studios (my web design and development business). Mission accomplished! The new site is live and I documented the whole process.
- Build the Trusty Press brand. This didn’t happen at all. In fact, I just began the process of closing down the web hosting arm of Trusty Press (and that was its only arm). However, I do have an idea or two regarding where I’d like to take it in the future.
- Complete another WordPress plugin. Done and done! I actually wrote two more plugins this year and they can both be found in the WordPress.org plugin repository.
- Easy Embed – A simple plugin allowing anything to be embedded in the editor via a shortcode in order to keep WordPress from messing with it.
- Simple Slide Show – Upload a batch of images via FTP. Place them all in a slide show with the ease of a simple shortcode.
Two out of three isn’t bad. Now on to a few of the things I’d like to accomplish this year:
- Release a commercial WordPress theme.
- Get Trusty Press running again, this time in a new direction.
- Make Theme Signal a valuable resource for locating the perfect WordPress theme.
Well, it looks like that’s all for now. See you in a year :]
- 8,649
- PublishedJune 2, 2011
- Posted InProgress
Delicious Bookmarks and Firefox 4
For those of you who are really missing your Delicious bookmarks after upgrading to Firefox 4 (or who haven’t upgraded because there is no Delicious add-on yet), there is a solution! First, go to the Delicious add-on page, click the “Continue to Download” button. Then, instead of simply clicking the “Accept and Install” button, right click it and save the resulting XPI file. For all practical purposes, an XPI file is simple a ZIP folder for Firefox add-ons. You’ll need to open that folder and make a few changes. First, open the install.rdf file with a text editor and find this line:
em:maxVersion="4.0b3pre" />
This is what is keeping the add-on from installing properly. To allow the add-on to be installed on any version of Firefox 4.0, you’ll need to use this line instead:
em:maxVersion="4.0.*" />
Make sure you save the the changes you’ve made. Next, delete the entire “META-INF” folder from within the XPI folder. It holds the checksums of the original add-on. Now that we’ve modified the install.rdf file, the checksums are wrong. Removing the “META-INF” folder will take care of that. Now open Firefox and go to “File > Open File… ” Then find your newly modified Delicious XPI file and open it. This should bring up the dialog box for installing Firefox add-ons. After restarting your browser, you should be greeted by a fully functioning Delicious add-on running on Firefox 4!
Update: It has come to my attention that there is also a beta version of the plugin with Firefox 4 support: https://addons.mozilla.org/en-US/firefox/addon/delicious-extension/
- PublishedMay 25, 2011
- Posted InHacks
- DifficultyBegginer
Permalink Settings
Update: This issue will no longer exist once WordPress 3.3 is released: http://core.trac.wordpress.org/changeset/18541/
I just learned today that certain permalink structures in WordPress are better than others from a performance stand point. As it turns out, starting the permalink structure with %postname%, %category%, %tag%, or %author% can cause a performance hit on blogs with lots of posts and/or pages. Now whether the performance is more important than SEO, less important than SEO, or moderately irrelevant to SEO is still up for debate. There appears to be a bit of an argument between SEO “experts” and WordPress developers/enthusiasts over what the best structure actually is. After reading Otto’s explanation of the performance issues involved, I’ve decided to change my permalink structure from:
/%category%/%postname%
to:
/%year%/%postname%
Thankfully, WordPress recognizes this change and automatically redirects the old URLs to the new ones so no links are broken and no plugins are required.
(Update: Since my blog is quite small still, I’ve decided to switch my permalinks back to the category./postname method)
- PublishedMarch 17, 2011
- UpdatedAugust 19, 2011
- Posted InPerformance
- DifficultyBegginer
- Tested With3.1