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!

Merry Christmas!

Max (from Guimkie) — Sun, 23 Dec 2007 20:14:23 +0000

It’s the 23rd today and I am all out happy knowing that tomorrow is Christmas. Yes, I know, most of you are wondering why on the 24th! Well, Europeans celebrate it at night on the 24th and Americans on the 25th. In any case, Merry Christmas!

Yep I know, I am not that kind to just make a post for fun. There is always some info to it. Today I am going to growl on about some boring future of my apps and the site itself.

What I am to do first is to finish iCordion. It has been much anticipated by many of you – but I simply did not have enough time until now to do all of this! Keep in mind that I am only doing this site has a hobby, not full business. Yet, I promise that it will come and it will come like hell. It already has some 40 complete new functions that could make iCordion end up as a whole web-design application rather than just a simple app that makes jQuery Accordions!

iMap! iMap has been quite a mess in trying to make it perfect because the sitemaps not always validated with each site and thus gave errors with Google. In any case, I haven’t got a mail for the past few weeks about this issue and so iMap 2.2 is quite stable with it.
Are there still things to be improved? Yes I’ve got several things that I want to add and change. One of them is a updating system as well as saving values for multiple sites which can then be selected via a sidebar. That’s 08 stuff, nothing for 2007!

iWebExpander is my little app that hasn’t been getting much attention. It is going to be updated as well. The updating system will go in there as well. I will also add a basic search-replace function that will allow you to add much, much more to your sites without having to manually edit the HTML code.

With this post I would also say that iWebExpander has been downloaded over 10 000 times! This is just amazing. Incredible – at least from my point of view.

The tutorials are changing as well! The videos will be updated to Leopard and they will be arranged differently in this blog. I had them as separate pages, which makes them difficult to find in searches and so I will move them all into the Tutorials category.

The iWeb Templates – god – totally forgot about them. They will return – but at the moment I have no clue when that will be.

Lastly we have my recent entry into the Wordpress world. The themes are being download like crazy and so I am planning to make a new one as well.

So, that’s all the things that I have planned for the future, that at least you are allowed to know about – other things that are secret are also coming!

Oh – totally forgot about Macvotes.com. It hasn’t been getting much attention either – but I will give it a fancy design and then make it public and then, it will be a great site!

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.