Replace Function Workaround in XSLT 1.0

I came across a problem where I wanted to display HTML code on a page using XSLT, but I needed to replace all ‘<’ and ‘>’ characters with the HTML entity ‘&lt;’ and ‘&gt;’. With XSLT 2.0 this would have been super simple using the built-in replace() function. However, I was stuck with XSLT 1.0. My solution was to use jQuery to select the element I wanted to display and then replace all the mentioned characters within it. Here’s an example:

$(document).ready(function() {

var body = $("body").html();
body = body.replace(/</g, "&lt;");
body = body.replace(/>/g, "&gt;");
$("body").html(body);

});

Build a jQuery Twitter Feed

Copy and paste the code below into a post, page, widget, or your HTML code. Be sure to replace the screen_name on line 4.

<div class="twitter" id="jstweets"></div>
<script>
$.ajax({
  url: 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jolamar&count=5&callback=?',
  dataType: 'json',
  success: function(data){
    $.each(data, function(i,item){
      ct = item.text;
      // include time tweeted - thanks to will
      mytime = item.created_at;
      var strtime = mytime.replace(/(\+\S+) (.*)/, '$2 $1')
      var mydate = new Date(Date.parse(strtime)).toLocaleDateString();
      var mytime = new Date(Date.parse(strtime)).toLocaleTimeString();
      ct = ct.replace(/http:\/\/\S+/g,  '<a href="$&" target="_blank">$&</a>');
      twitterURL = "http://twitter.com/";
      ct = ct.replace(/\s(@)(\w+)/g,    ' @<a href="'+twitterURL+'$2">$2</a>');
      ct = ct.replace(/\s(#)(\w+)/g,    ' #<a href="'+twitterURL+'search?q=%23$2" target="_blank">$2</a>');
      $("#jstweets").append('<div>'+ct + ' <small><i>(' + mydate + ' @ ' + mytime + ')</i></small></div>');
    });
  }
});
</script>

NOTE: You will need jQuery for this to work. If this isn’t working, try including the following library at the beginning of this code.

<script src="http://code.jquery.com/jquery-latest.js"></script>

3D Facebook Button WordPress Plugin

I’ve developed a new plugin that allows you to use a shortcode to create a Facebook logo that falls open when you hover, revealing how many likes your site has. The plugin can be found at:

http://wordpress.org/extend/plugins/3d-facebook-button/

My future plans are to allow users to like the site when the button is clicked and make a better non-WebKit browser (Firefox, IE) version. Let me know what you think!

How to Build a Floating Navigation Bar

This guide will show you how to keep your navigation at the top as you scroll down the page. You can see a demonstration on this page by scrolling down. Notice how the navigation scrolls down with you. There is very little code involved, so here we go!

  1. Determine what your navigation #ID is. In this example, my navigation ID is #navi You should replace mine with your own. There is a good plugin for Firefox and Chrome called Web Developer, which allows you to “Display Element Information” when you click on an element, such as navigation. I recommend using this plugin to determine your navigation #ID.
  2. Add this jQuery code near the footer/bottom of your site.:
    /****************************************
     * Floating Navigation jQuery feature
     ****************************************/
    $(function() {
    		
    	// get initial top offset of navigation 
    	var floating_navigation_offset_top = $('#navi').offset().top;
    			
    	// define the floating navigation function
    	var floating_navigation = function(){
                    // current vertical position from the top
    		var scroll_top = $(window).scrollTop(); 
    		
    		// if scrolled more than the navigation, change its 
                    // position to fixed to float to top, otherwise change 
                    // it back to relative
    		if (scroll_top > floating_navigation_offset_top) { 
    			$('#navi').css({ 'position': 'fixed', 'top':0});
    		} else {
    			$('#navi').css({ 'position': 'relative' }); 
    		}   
    	};
    	
    	// run function on load
    	floating_navigation();
    	
    	// run function every time you scroll
    	$(window).scroll(function() {
    		 floating_navigation();
    	});
    
    });
  3. Replace #navi with your own navigation ID on the lines highlighted above.
  4. OPTIONAL: To ensure your navigation stays on top, add a high z-index. Open your CSS stylesheet and find your navigation CSS and add this property:
    z-index:99999;
    

That’s all! Feel free to leave your site URLs where you’ve used this feature. Also, if you have any recommendations for future how-to guides please contact me with your ideas.