Lil Josh

A tech blog about web development with PHP, MySQL, jQuery, CSS3 and various other programming languages.

Replace Function Workaround in XSLT 1.0

December 20, 2012

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 ‘<‘ and ‘>’. 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);
});
1.0 2.0 jquery replace XSLT

Build a jQuery Twitter Feed

November 11, 2012

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.

[code lang="js" highlight="4"]

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>
api feed jquery json tutorial twitter

3D Facebook Button WordPress Plugin

July 27, 2012

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!

3D Facebook Button like button wordpress plugin

How to Build a Floating Navigation Bar

July 21, 2012

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.:
    [code lang="js" highlight="7,18,20"]
    /****************************************
    * 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:
    [code lang="css"]
    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.

fixed navigation floating navigation scrolling navigation sticky navigation