How To Capitalize The First Letter Of A String In JavaScript

Here is a quick code snippet for the JavaScript version of ucfirst. This code snippet will allow you to capitalize the first letter of a string using JavaScript.

function jsUcfirst(string) 
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

This code snippet will use the JavaScript function charAt to get the character at a certain index.

var firstLetter = string.charAt(0);

Next we use the uppercase function in JavaScript to set this string to be in capitals.

var uppercaseFirstLetter = string.charAt(0).toUpperCase();

Then we can add the rest of the string on to this capital letter by using the function slice() which will allow us to get the rest of the string and remove the first letter.

var stringWithoutFirstLetter = string.slice(1)

Putting this altogether we get the JavaScript ucfirst() alternative.

function jsUcfirst(string) 
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Since version 2.5 WordPress introduced a new way of developers to provide dynamic content for the content author of the website with the use of Shortcodes.

What Is A Shortcode?

A shortcode allows the user to run a PHP function at any point you want in the content. A default shortcode you get with WordPress is the gallery shortcode, to add a gallery to your website all you have to do is add [ gallery ] to the content area of your website.

The name inside the square brackets is the name of the shortcode that you want to run at this position of the content. WordPress will then search for shortcodes on the the_content filter and using the function do_shortcode() will run the functions at this point of the content, the return of these functions will then be output into the rest of the content area.

Shortcodes allows you to send extra parameters to the function by using attributes.

[shortcode_example attribute1="stuff" attribute2="things"/]

In the shortcode function the developer can now look up these attributes and use these values to change the output. You can also add content into the shortcode along with the attributes.

[shortcode_example attribute1="stuff" attribute2="things"]Shortcode Content Can Go Here[/shortcode_example]

This is great for the author as they now have full control of any functions that can help add dynamic controls to the site.

Styles And Scripts In Shortcodes

As shortcodes are used to add more dynamic content to the site it can be used to add Google maps or another third party to your application. If you want to add these third parties to your website then this would normally be done with Javascript.

When you use Javascript in your WordPress site you would normally have to use the action wp_enqueue_scripts.

add_action( 'wp_enqueue_scripts', 'add_javascript' );
function add_javascript()
{
    wp_enqueue_script(...);
}

Problem With Scripts And Shortcodes

The problem we get with shortcodes and queuing script files is that whenever we register the shortcode we need to register the Javascript at the same time. This means that WordPress will load the shortcode and the Javascript with the page even when the Shortcode isn't being used.

add_shortcode( 'google_map', 'add_google_map');
function add_google_map( $atts, $content )
{

}

add_action( 'wp_enqueue_scripts', 'add_javascript' );
function add_javascript()
{
    wp_enqueue_script(...);
}

Therefore if we have a Google Maps shortcode we will be including the Google Maps Javascript file on every page of our WordPress site even if the shortcode isn't being used. There is no need to include the Javascript on a page where the Google map isn't being displayed we are just adding more weight and slowing down the page.

So we need to find a way of only loading the Javascripts when the shortcode is being used, how can we solve this problem?

We could add the wp_enqueue_script() inside the shortcode function like this.

add_shortcode( 'google_map', 'add_google_map');
function add_google_map( $atts, $content )
{
    wp_enqueue_script(...);
}

But this won't work, it's too late, WordPress will not run be able to queue up the scripts.

The solution would be to add the Javascript in the footer of the application using wp_footer. Adding the script in the footer event allows us to set a global variable at the point of running the shortcode code, then in the wp_footer action we can do a check for this global variable and if it's set then we add the Javascript into the footer of the page.

add_shortcode( 'google_map', 'add_google_map');
function add_google_map( $atts, $content )
{

}

add_action( 'wp_footer', 'add_javascript' );
function add_javascript()
{
    wp_enqueue_script(...);
}

Shortcode OOP Class

The easiest way of doing this is by using a class to add the shortcode to the application. The following class will demo how you can make sure you only add Javascript when the shortcode is being used.

We start off by creating a class variable of $addScript and set this to false, this is the variable we are going to use to see if the shortcode is ran. Next we add a constructor to the class, the purpose of the constructor is to define the actions and register the shortcode.

The important thing to notice is in the shortcode function we start off by changing the value of the variable to true, so that in the footer action the shortcode function would of already ran, so we can check if this class variable is true. If the $addScript variable is still false, then we know the shortcode didn't run and we don't need to add the Javascript.

$shortcode = new Shortcode_Class();
class Shortcode_Class
{
    /**
     * If you should add the script or not
     *
     * @var bool
     */
    private $addScript = false;

    public function __construct()
    {
        add_shortcode('test_shortcode', array($this, 'shortcode_content'));

        // wp_enqueue_scripts
        // If you use the below the CSS and JS file will be added on everypage
        // add_action( 'wp_enqueue_scripts', array($this, 'add_shortcode_scripts'));

        // Add styles and scripts to the page
        add_action('wp_footer', array($this, 'add_shortcode_scripts'));
    }

    public function shortcode_content( $attr, $content )
    {
        $this->addScript = true;
        ?>
        <h1>Shortcode Content Being Displayed</h1>
        <?php
    }

    public function add_shortcode_scripts()
    {
        if(!$this->addScript)
        {
            return false;
        }

        wp_enqueue_script('shortcode-js', get_stylesheet_directory_uri() . '/js/shortcode.js', false);
    }
}

Animated scrolling is a web trend that came from single page websites, when a visitor clicked on a link the site doesn't navigate to another page but a section within the current page.

You can do this by using internal anchor tags which will navigate to an ID on the page. Without animated scrolling the page will jump to this section, which doesn't look great so the animated scroll become a useful tool for single page sites.

To create an animated scroll all you need is a bit of jQuery.

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing');
	});
});

This above code will add a click event all link that start with a #, we will then prevent the links default behaviour so we can replace it to what we want to do. We then grab the text after the # in the link and use this as the ID to search for, when we find this ID we can then change the scroll to navigate to this certain point on the page and the time is takes to do this task.

All jQuery animations are performed with a duration, so if you wanted to scroll to multiple points the time the animation takes will be exactly the same. Depending on the distance the scroll has to travel this can affect the speed the scroll to travel at. If the scroll bar needs to travel 1000px down the page the animation will be much faster than if the page had to travel just 100px down the page.

For this reason a project was started on Github to provide jQuery plugin that will run the animation at a certain speed and not with a duration of time.

scroll-to-by-speed

To use this plugin all you have to do is make sure it's included on your page.

<script src="scrolltobyspeed.jquery.js"></script>

Then when you want the window to scroll to an element simply use the following code.

$('#element').scrollToBySpeed({
  speed: 1000
});

Scroll To By Speed

headroom-js

Headroom is a Javascript plugin that allows you to hide the header until the user really needs it.

Many people have websites with a fixed position header bar at the top of the page, this will stay at the top of the page all the time the user is on the site. This is a nice way to make sure that the header is easily accessible all the time the user is on the page.

The problem with this idea is that the header bar is going to be on the page the entire time which can be a problem as it can get in the way of the content.

Headroom.js works of the idea of hiding the header bar until the user actually needs it. As you scroll down the page the header will be hidden, but when the user tries to scroll back up the page it will display the header bar.

How It Works

Headroom works by adding and removing a CSS class on to the HTML element which in turn will allow you to show or hide the header bar.

To start off you will need to add a CSS class to the element you want to use on headroom.js.

<header class="headroom">

When the user scrolls down the page then headroom.js will add an additional CSS class of headroom--unpinned.

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

When the user scrolls up the headroom--unpinned class is removed and a new class of headroom--pinned is added.

<!-- scrolling up -->
<header class="headroom headroom--pinned">

Have a look at the headroom.js demo page to see if in action.

Headroom.js

In version 3.3 WordPress released a new feature called pointers. These are little pop-up notification boxes which you can use to point to new information on your WordPress admin area.

Pointer

This is a great idea if you are a plugin or theme developer, you can make it so that when a user installs your new plugin you can use the pointers to show exactly how they are suppose to use it.

For example if the plugin adds a new menu item to the WordPress admin area, you can use pointers to show the user that there is a new menu item and what it allows you to do with your wordpress site.

You can assign a pointer to be displayed on any HTML ID or class, it is just a jQuery widget which has a title bar, text area and close button. Read more...

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but this can be done at the developers choice. This is a great feature to use for things on slideshows, you can make the browser go into full screen on a click of an image.

The best thing about this feature is that it doesn't have to be the entire page, you can make any HTML element go full screen. This mean instead of always making the entire page go full screen, just assign the full screen API to an image and on the click of the image you can just focus on the image in full screen.

Full Screen API Support

Unfortunately not all browsers support this feature so you need to make sure that your visitors browser supports this feature before you try to use it.

If the browser they are using supports this then you can use it, if the browser doesn't support this feature then you can make sure you do something else instead of using full screen.

According to the website Can I Use the full screen API is currently supported on Firefox, Chrome/Safari and Opera.

Can I Use Full Screen

  • Chrome 15+
  • Firefox 10+
  • Safari 5.1+
  • Opera 12.50+

Read more...

Cookies are variables of temporary data which is stored on the visitors computers. They are normally used for things like remember my username on a login form. This can be a useful way to store information about your returned visitors without them having to log in to store information on a database.

It's worth noting that cookies should not be used to store secure information as they are just files stored on your visitors computer.

You can set a cookie on both the server side and the client side in this article we are going to look at the process you would set-up a cookie on the client side using Javascript.

Raw Javascript

Working with cookies in Javascript is not the best feature of Javascript, there is no easy way of dealing with setting and getting cookies.

All Values

To get all the cookies which are set for the current document you need to use the following.

var allCookies = document.cookie;

Read more...

With mobile devices becoming more and more popular there will be times when you need to do something different for users coming to your site from one of these mobile devices.

If you want to change the design depending on the mobile device you will use media queries. But if you want to change functionality such as Javascript then you can use the below snippet to do something different for mobile devices. Read more...

In today's tutorial we are going to see how we can create a "real" ebook by using the jQuery plugin turn.js. Using this jQuery plugin you can create a real looking turn of pages to create a magazine looking web page.

View the demo to see what you can create with Turn.js.

Demo

What Is Turn.js

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices. Read more...

CSSrefresh - automatically refresh CSS files

Here were looking at a small Javascript resource which will check when you have changed your CSS files and will automatically refresh your browser. Read more...