Beam Me Up Scotty!

27 Jan '08 Filed under Tutorials, Wordpress, jQuery -

Recently I have discovered this effects library called jQuery. It allows you to call advanced functions from the jQuery scripts without much coding that you write yourself.

If you really want to see what these scripts can do, then check out the jQuery demos.

Since this is such a great library, I thought I’d do a collection of tutorials showing all sorts of nice things. Today we are going to look at how to create a jQuery script to dynamically scroll the window back to the top if a link is clicked. This can also be used for anchors of any kind. It just makes this “in-page” linking much more attractive.

Not sure what I’m talking about it? Click here.

Note: Apparently the link only works perfectly if you are on a page where there is not ability to post a comment. I haven’t fixed this issue yet - but I will soon do so!

I will focus on adding this to Wordpress but the method can also be applied for anything else.

We’ll start on the next page.

If you want to use some sample HTML files using this script, then you can download my sample project here.

  1. First thing is to create a standard link in the location you want. Define the href to go to an anchor. Just using # will go to the top in most cases - but defining the specific position is better. Do not forget to give the link a unique ID!
    You will also have to create your position to where the anchor link should lead. You can use anything you want, a table, a div or just a paragraph as long as you add the name tag to it.
    Now, let’s do some examples:

    This code will make your page scroll back to the top:

    <div>Header</div>
    ...
    <a href="#" id="beam-me-up">Beam Me Up Scotty</a>

    For a link going to any other position in your HTML code could look like this:

    <p name="comments>My Commments</p>
    ...
    <a href="#comments" id="beam-to-comments">Beam To Comments</a>

    Notice that the name tag represents the value in the href tag in the link! The only difference is the # in front! Do not delete it.
    This is just the standard linking for anchors.

  2. Now test the code that you have added. They should just be some plain anchors jumping from one spot to another.
    If it works, then you need to download the latest jQuery set. Download the minimized script, the packed script and the normal script. I am using 1.2.2 for this tutorial.
  3. Now upload the three scripts to your server and connect them with your files. For Wordpress, you open the header.php file of your Wordpress theme. In the <head> section you will have to add this:


    <script src="path/to/jquery-files.js" type="text/javascript"></script>

    Do this for each of the three scripts. Make sure you use the names correctly.

  4. Now you will have to create a Javascript file yourself. It sounds hard - but it is not! You will just use some finished codes. So as said, open any Text Editor and create a file named custom.js. Make sure you have the ending .js. Then, in the file, copy the following contents:


    $(document).ready(function() {

    // Beam Me Up Scotty
    // Created using the Guimkie (www.guimkie.com) Tutorial.
    // Thanks to the Learning jQuery (www.learningjquery.com) Tutorial.
    // Please do not delete this note!

    $('#LINK-ID').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}, 'SPEED-VALUE');
    return false;
    }
    }
    });

    });

  5. In the code above, you need to change two things. First, look for LINK-ID. Change it to the ID name you gave the link in step one!
    Now look for SPEED-VALUE and change it to either slow, fast or a time specified in seconds.
    Then save the file and upload it to the other jQuery files on your server. Make sure you also link it to your file! I.e.:

    <script src="path/to/custom.js" type="text/javascript"></script>

  6. This is it! Save your files and test it! Now let your visitors enjoy great effects while clicking boring links on your site!
    Again, if you need help or it did not work, download the sample files and see if you get it to work that way!

    7. I will be releasing more jQuery tutorials and I am already working on a plugin for Wordpress that will … (not telling).

    Thanks to Learning jQuery for teaching me how to do this!

This entry was posted on Sunday, January 27th, 2008 at 8:14 pm and is filed under Tutorials, Wordpress, jQuery and tagged in, , , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Comments

  1. Max Karreth posted:
    27 Jan 08 at 8:24 pm

    I am just testing if the comments still work…

  2. Mitchell brown posted:
    01 Feb 08 at 1:01 am

    From reading it seems it doesn’t work with iWeb and .mac?

    Thanks mitch.

  3. Max Karreth posted:
    01 Feb 08 at 9:08 am

    mitchell,

    actually it should work with iweb. you just need to create and upload the files yourself.

    max

Post a comment:

« Busy, Busy, Busy…

I Am Legend »