Archive for the ‘Javascript’ Category

jQuery Wordpress quick collapsable menus

Posted by Greg D'Angelo on October 19th, 2009

Just a quick code snippet for creating Collapsible menus for the WordPress Page and Category Sidebar widgets.  It uses jQuery, Google Ajax libraries and in its current state works only when you set your WordPress permalinks to /%category%/%postname%/.

Warning: By no means is this the best way to make your WordPress Page and Category Sidebar widgets expandable but it worked for me so I figure i’d share it.

google.load("jquery", "1");
google.setOnLoadCallback(function() {
jQuery("li.page_item a,li.cat-item a").each(function(){
	if(jQuery(this).next('ul').length){
		jQuery(this).after('&nbsp;&nbsp;&nbsp;&nbsp;<a class="toggle_list" href="#">+</a>');
	}
});
 
jQuery("li.page_item > ul,li.cat-item > ul").hide();
jQuery("a.toggle_list").click(function(){
	if(jQuery(this).next('ul:visible').length){
		jQuery(this).html('+').next('ul').hide('fast');
	}else{
		jQuery(this).html('–').next('ul').show('fast');
	}
});
var h = window.location.href;
jQuery('li.page_item a[href='+h+']').nextAll('ul').show();
h=h.substr(0,h.lastIndexOf('/'));
jQuery('li.page_item a[href='+h+']').nextAll('ul').show();
jQuery('li.page_item a[href='+h+']').next('a').html('–');
}

This will add a plus sign to the end of any parent pages and collapse them once the jQuery library is downloaded;  Your basic open and closing happens when you click the plus sign.  It should also open up the menu section if you are in the section or a child section.  Also this hasn’t been testing on a parent > child > child scheme.

Posted in Javascript Tags: , , No Comments »

Javascript Best Practices Take 1

Posted by Greg D'Angelo on October 14th, 2009

I like Javascript; I use it everyday in my work and read article after article on new and old ways to use it.

  • Load Javascript in the Footer

    First off is load times are affected; you can find out more about this by checking out Steve Souders site and more specifically Rule 6 of his book High Performance Web Sites.

  • JSLint

    As a PHP programmer I make use of the php syntax checker via the command line “php -l %filename” (at least on windows). JSLint does syntax checking and more so it is definitely something that should be used. I’d love to use a command line version like in PHP though I haven’t found it yet but then again maybe I’m just not observant enough.

  • Using a CDN

    This is especially true if your running multiple sites. Rather than having each site host it’s own JS use a CDN; I generally use Google AJAX libraries for jQuery but lately have been looking at Yahoo for their YUI. If you’re loading your JavaScript in the footer this works great since ,at least with Google, you call your “google.load()” function and then work from there with the Callback function.

  • Javascript should not be a replacement for CSS

    Use JavaScript appropriately; It’s amazing what can be done with just CSS. Find whatever resources you can, I recommend CSS-Tricks and Smashing Magazine as two of the best places to start.

Hopefully this is helpful to someone as short as it is.

Posted in Javascript Tags: , No Comments »

Removing widows

Posted by Greg D'Angelo on October 7th, 2009

After reading an article from CSS Tricks: Preventing Widows in Post Titles I decided it was about time to make my first jQuery plugin, the Widow Remover.

The Problem: A single word alone on it’s own line.

The Solution: add in a non-breaking space


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(function($) {
	$.fn.widow_remover = function(params) {
		params = $.extend( {words: 1}, params);
 
		this.each(function() {
			var string = $(this).text();
			var sp = string.lastIndexOf(' ');
			if(sp != -1){
				do{
					string = string.slice(0,sp)+' '+string.slice(sp+1);
					params.words -=1;
					sp = string.lastIndexOf(' ');
				}while(params.words&gt;0 &amp;&amp; sp != -1);
			}
			$(this).html(string);
		});
		return this;
	};
})(jQuery);

Usage:

1

jQuery('h1').widow_remover();

Result:

No more single words on a line

Still needs some improvements as looking back on it parts of the code I think I was in daze but the basic idea is there and hopefully it helps someone out

The Code is hosted at code.google.com and at plugins.jquery.com

Posted in Javascript Tags: , No Comments »

  • Welcome To Gregprogramming.com!

    You'll have to excuse the no so pretty look of this site as I'm using a free WordPress template @ the moment until I have time to finish mine off. In the meantime I hope you enjoy this site and find something useful. Oh and Updates are random at this point so stay tuned!

  • Active Den
    Fotolio

  • Ads

themes free
Free Sprint phones for sale | Thanks to CD Rates, Reverse Phone and Registry Software