robinadr

Tagged JavaScript

I spent some time making my navigation responsive, after some plugins didn’t really work for me. It turns out it’s pretty straightforward to code your own responsive navigation using jQuery.

With most of the unrelated HTML and code for my grid system stripped out, this is what the code for the navigation itself looks like:

This is what it looks like, first on big screens and then on mobile screens:

Navigation on bigger screens

Navigation on mobile screens

I stole the idea for using <span>s for the navigation icon from Bootstrap. It’s pretty straightforward to style:

Then this is the JavaScript for all of this:

Not only does this code handle the toggling of the navigation for mobile browsers, it also watches the size of the window. If someone resizes their window down to the size needed to trigger the bar or back to full size, it will handle it gracefully.

Quick and easy.

I have been using SyntaxHighlighter Evolved to highlight code on here for a while, but it always had problems playing well with the Markdown plugin I use. I wanted to change to something that falls back gracefully, and doesn’t require any special markup outside of what Markdown can do.

I ended up using Google Code Prettify to highlight my code. It doesn’t use any weird markup (just adding a prettyprint class to the <code> block, and I can do all of it in Markdown. Here’s an example of a code block:

~~~ {.prettyprint .lang-php}
<?php
// Source code here
print( "some string" );
?>

The above Markdown ends up rendering like this:

~~~ {.prettyprint .lang-php}
<?php
// Source code here
print( "some string" );
?>

Because it doesn’t use any strange or custom tags (just a class on a <code> block), it will degrade gracefully into just a regular <pre> block without highlighting if the Prettify code disappears or isn’t working. To me, this is a much better solution than a [shortcode] like the ones that SyntaxHighlighter Evolved uses.

Here are the 2 lines of code that make it all work:

~~~ {.prettyprint .lang-html}


## Conflicts with WordPress

If your theme makes use of it, WordPress adds classes to the `<body>` tag through the [`body_class()`][4] template tag. Unfortunately, on some pages, these classes can sometimes conflict with the global styles used by the Prettify themes. For example, on my tag archive pages, the `<body>` tag had a class of `tag`, which is one of the classes Prettify uses to highlight code. The result was pink text everywhere on the page.

[4]: http://codex.wordpress.org/Function_Reference/body_class

To fix this conflict, I edited my Prettify styles to change the scope of the styles to those classes *within* `<pre>` and `<code>` blocks. For example, this is the original style rule:

~~~ {.prettyprint .lang-css}
  /* a markup tag name */
  .tag {
    color: #f2777a;
  }

I changed it to this:

~~~ {.prettyprint .lang-css} / a markup tag name /

content pre .tag {

color: #f2777a;

}

You should use the Use Google Libraries plugin instead.

Update: I’ve modified the plugin to use a generic URL (.../1/jquery...) which loads the latest 1.x version. That way I don’t have to change the plugin everytime jQuery is updated.

The ZIP file has been updated, just overwrite your old googlejs.php file and everything will be gravy.

In an effort to save bandwidth, I made a quick plugin to modify WordPress to use Google’s Libraries API, which offers a Google-hosted jQuery. Here’s the code in question:

function radr_google_js( &$scripts ) {
    $scripts->remove( 'jquery' );

    $scripts->add(
        'jquery', // shortname
        'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', // url
        false // dependancies (none)
    );
}

add_action( 'wp_default_scripts', 'radr_google_js' );

If you’re interested in using this on your own site, you’re welcome to download this quick plugin. Just follow standard procedure — unzip, copy to wp-content/plugins, and activate.

Despite the scary realization that websites can capture your browsing history, Mike Nolet has created a JavaScript that guesses your gender based upon what sites you have visited. I ran mine through, and low and behold it was incredibly accurate…

Likelihood of you being FEMALE is 3%

Likelihood of you being MALE is 97%

Via noscope.

A while back I posted about automatically scrolling between internal links with some jQuery magic (which in turn was based on a tutorial by Learning jQuery) but one problem with it was that there was no way for the user to link to the anchor.

The problem was that because the function has to return false in order to keep the browser from jumping straight through to the anchor and skipping the animation. So I added another line to the code, taking after AJAX pseudo-permalinks, that adds the hash link (e.g. #anchor) back onto the URL in the address bar after a timeout matching the animation.

Here’s the line in question:

[sourcecode language="javascript"]setTimeout('window.location = window.location + "' + this.hash + '";', 1000);[/sourcecode]

Here’s the full code:

[sourcecode language="javascript"]$(function() {
    $('a[href^=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length && target || $('[name=' + this.hash.slice(1) + ']');

            if (target.length) {
                var targetOffset = target.offset().top;
                $('html,body').animate({ scrollTop: targetOffset }, 1000);
                setTimeout('window.location = window.location + "' + this.hash + '";', 1000);
                return false;
            }
        }
    });
});[/sourcecode]