Guimkie » Wordpress

Beam Me Up Scotty!

Max (from Guimkie) — Sun, 27 Jan 2008 18:14:28 +0000

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.

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:

Header
... Beam Me Up Scotty

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

Beam To Comments

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.
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.
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 section you will have to add this:

Do this for each of the three scripts. Make sure you use the names correctly.
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; } } });
});
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.:
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!

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!

Newly Dressed

Max (from Guimkie) — Sun, 06 Jan 2008 16:12:26 +0000

Now that I am starting to write this post – I am actually wondering if it makes sense to write this. Because … telling you that I have redesigned my site is obvious, isn’t it? So why write a post about it? Lol!

Well, even if you have realized that the site is newly dressed, I would like to “officially” state that I gave it a new dress. It is a Wordpress Theme named “Bubbly” that I plan to officially release when I’m finished with this one. Make sense? I just don’t want my design to be found twice around the world.

Enjoy the new look!

Curlz K2 Style Released

Max (from Guimkie) — Sat, 15 Dec 2007 19:03:52 +0000

There you go, I had this K2 Style for my other site and have now pimped it up to be officially released. I hope you enjoy it.

I had so many requests on this theme, not because of the colors or anything, but because of these swirls, twists or however you call them – curls! That’s why I had to give this K2 Style to the world.

What’s a K2 Style? These are stylesheets for the Wordpress Theme called “K2.” You will need K2 RC3 for Curlz to work.

Interested in the style?

Click here for more info about “Curlz.”

Download “Curlz” here.

Update 1: There was a problem with the footer image constantly shifting left or right depending on how wide your browser was. Stupid. I am trying to fix it right now.

Update 2: Issue above has been solved and new version has been uploaded to the servers.

Snow Theme Released

Max (from Guimkie) — Wed, 05 Dec 2007 17:03:43 +0000

I just mentioned in the last post that I was working on a Wordpress theme – well, here it is! Beautiful as ever and most of the bugs fixed.

Click here for more info about “Snow Theme.”

Download “Snow Theme” here.

BTW – Yes I know, the theme does not have AJAX commenting yet – but I will add them as soon as I know how to do it.

Update 1: Lol, I just changed my site to the theme and realised that some links make you really go weeeiiirdddo. The normal link colors are to bright, so I just switched the hover into the normal state, and the normal state into the hover. Looks better

Update 2: I just saw an article of how to integrate AJAX comments into a Wordpress theme. I am doing it right now and it already works. I just need to fix some CSS bugs.

Update 3: So, AJAX commenting is now in the theme. I also added Tag support. Other bugs have also been fixed. Go ahead and download a pretty stable release.

Snow Theme for Wordpress

Max (from Guimkie) — Mon, 03 Dec 2007 16:33:23 +0000

I went completely crazy over the weekend and I ended up making a complete Wordpress Theme. The theme is called “Snow” and it looks just absolutely gorgeous.

Don’t get shocked by the image below – it might not be looking good through there, but when you see it live and get to interact with it, you’ll be amazed!!!

You can take a look at it right here:

It’s not finished yet and has many, many bugs – but I will fix these last issues over the next week and the theme will then be available for free download.