Download a Stopwatch and Vana’diel Clock for Final Fantasy XI

Leave a reply

Hey everyone, here are some helpful downloads for those of you that play FFXI (Final Fantasy 11).

Stopwatch – I use this for camping NMs that are either timed or time-lottery spawns.
Note: PC only, use online-stopwatch.com for a Mac

Vana’navi – Clock that provides airship schedules, elemental day, moon phase and more.
Note: PC only, use mithrapride.org for a Mac

Crafting Compass – My fellow crafters know what this is for 😉

Player: Aldyn
Server: Ifrit
Linkshell: TwigsAndBerries

PS: All credits to their authors are found within the executable downloads 😀

PowWeb a little short on hosting power…

Leave a reply

I am working on a new client’s site. He happened to already have hosting/email set up with PowWeb. I had of course heard of them so I did not immediately suggest moving to a larger provider as I usually tend to do when it comes to mom/pop hosting companies.

While PowWeb’s control panel seems relatively intuitive and feature-rich, their network and/or servers are so slow I want to shoot myself. This client is using their “PowWeb OnePlan” which is probably one of the low-end packages, but nevertheless it should not be this slow. I acutally have to wait for a 1k file to upload using Dreamweaver, I mean come on… seriously?

— Insert Shameless Promotion Here —

Get fast, reliable web hosting to keep your developer’s happy. Have a lot of client’s you manage hosting for? Get yourself a domain/hosting reseller account instead and earn commissions on each sale/renewal!

Some people may think GoDaddy/WildWestDomains shouldn’t be in the hosting business, but they are actually quite easy to deal with and impose very few restrictions, most of which you can easily override 🙂

IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)

7 Replies

This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic 🙂

$(document).ready(function() {
 //preload images
 var preloadedImages = new Array();
 $('#container img').each(function(i) {
 preloadedImages[i] = new Image();
 var ext = $(this).attr('src').split('.').pop();
 preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
 });
 //rollover effect
 $('#container a').hover(function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
 }, function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
 });
});

The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images… Continue reading →

Use location.hash to pre-select a jQuery UI tab

Leave a reply

I have noticed quite a few people asking how to set a default tab during page load using the jQuery UI Tabs Widget. My method is as follows…

<script>
$(function(){
 $('#tabs').tabs({
  selected: (location.hash && parseInt(location.hash.substr(1)) != 'NaN') ? parseInt(location.hash.substr(1)) : 0
 });
});
</script>

I am checking the url for a hash value (eg: mypage.htm#3). If one is found and it can be parsed to an integer, it will use that number for the selected tab, otherwise it defaults to zero.

jQuery UI Tabs Widget documentation

…

If you are not familiar with the short-hand if/else syntax above, here is an example…

variable = (condition) ? true : false;

Written long-hand it would be…

if (condition) {
 variable = true;
} else {
 variable = false;
}

How to Add icons to Input (Submit and Reset) Buttons using jQuery UI

12 Replies

As you may have already noticed, most browsers do not support adding icons to <input type=”submit”> and <input type=”reset”> using jQuery UI. The code below will correct this issue by replacing matched <input> tags with appropriate <button> tags…

$(document).ready(function(){
 $('input:submit, input:reset').each(function(){
  $(this).replaceWith('<button type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
 });
});

We loop through each submit and reset button and replace it with a button tag using the original input’s value as the new button’s text. Since we are using the original input’s value attribute, it should not be considered optional. Otherwise, you’ll end up with a button that has no text unless you set it explicitly with the .button({label: ‘my button label’}) option unless you intend to show only the icon by calling .button({text: false}) option.

Now we can assign icons to the buttons without updating the html using the following code… Continue reading →

Safe email mailto links using jQuery

Leave a reply

Here is a quick and easy way to use jQuery for hiding email links from spam bots.

$(document).ready(function() {

 //safe mailto's
 $('a[href*="[at]"][href*="[dot]"]').each(function() {
  var email = $(this).attr('href').split('[at]').join('@').split('[dot]').join('.');
  $(this).attr('href', 'mailto:' + email.toLowerCase());
  if ($(this).text().length == 0) $(this).text(email);
 });
});

First things first… loop through all the anchor tags (aka: links) that have [at] and [dot] in the href attribute. Next replace those placeholders with the proper characters. Then we prepend mailto: and lastly update the inner text of the anchor tag with the email address.

To make this work, your email links would be written as follows… Continue reading →

Adding mouse events to table rows using jQuery

1 Reply

In my example I will only be modifying the row’s css classes. The behavior would be very similar to what you may already be familiar with in phpMyAdmin’s interface.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
 $('tr').hover(function() {
  $(this).toggleClass('highlight');
 });
 $('tr').click(function() {
  $(this).toggleClass('selected');
 });
 $('tr:even').addClass('odd');
 $('tr:odd').addClass('even');
});
</script>

Everything should be pretty easy to understand except for the last 2 addClass commands. jQuery’s “:odd” and “:even” selectors behave differently than you may expect. You could assume the “odd” selector to start at the “first” row but that is not the case (an array’s first element zero-index unless otherwise defined). Unless I included a heading row, my “first” row is actually an even row since it is referenced as an array and has an index of zero. That’s why it looks like I am doing it backwards 😉

Open all external links in a new window using jQuery

1 Reply

In the following code we set the “target” attribute to “_blank” for every anchor that has an “href” attribute starting with “http(s)://”…

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
 $('a[href^="http://"],a[href^="https://"]').attr('target','_blank');
});
</script>

Most examples of this type only check for links starting with “http”, this of course would cause internal relative links such as “httpd_info_page.html” to open in a new window. This is why I check specifically for the full strings.

jQuery Preload and Swap Navigation Images

Leave a reply

UPDATED CODE: IMPROVED jQuery Image Preloader with Rollover Effect (extension independent)

I have been researching Javascript libraries quite a bit lately and have decided on jQuery. Don’t ask me to say why it is better or worse than the other libraries out there. After reading the documentation I just happen to prefer it.

Suprisingly enough, one of the most common things Javascript is used for is navigation rollovers. Swapping an image source using markup attributes such as onmousover and onmouseout is not difficult by any means. We have all done it the “old” way and most of us still do, but there is hope!

I normally use unordered lists for my menus, but for simplicity’s sake, and no need to reference CSS rules, here is an example of a very basic menu.

<div id="navWrapper">
 <a href="page1">
 <img src="../assets/images/page1.png" /></a>
 <a href="page2">
 <img src="../assets/images/page2.png" /></a>
 <a href="page3">
 <img src="../assets/images/page3.png" /></a>
</div>

Now what we would usually do is add “onmouseover” and “onmouseout” events to each anchor (link) and an “id” attribute to each anchor’s child image. Wouldn’t it be great if we didn’t have to clutter the (X)HTML with javascript? There must be a better way… this is the thought that started me on my introduction to jQuery 🙂

Using only the markup above and the Javascript referenced below, we can achive the same result of my previous Javascript image preloader/swapping function post. Continue reading →

CodeIgniter Form Validation Callback Functions with Multiple Arguments

9 Replies

If you’re reading this you most likely already know that you can only send one argument to callback functions using CodeIgniter’s Form Validation Class. If you are not yet familiar with this feature/limitation, here is an example of how the callback works.

Here is our controller with a normal callback (_foo) and our multiple-argument callback function (_valid_login)… Continue reading →

Set element’s CSS min-height using JavaScript minHeight

Leave a reply

Recently I have been doing a lot of work on new sites that incorporate fixed-position footers (similar to the Facebook chat bar). A few examples sites are: Power Core USA and Douglas Stevens, MD (both of which I coded, graphic design by Brand Chemist). I ran into an issue with Power Core layout where the main content borders were not reaching the footer on larger displays in pages with small amounts of content (eg: not enough to activate scrollbars). So I ended up writing a quick JavaScript function to set the minHeight property of the DIVs causing the issue. Continue reading →

Future proof PHP class constructer compatible with php4 and higher

Leave a reply

Since there was no real viable reference to either confirm or oppose my methods, I figured this may help someone else that is trying to make sure they don’t have to change their code based on the installed PHP version.

As most of us already know, initializing a new class object in PHP4 required the constructor to have the same name as the class.

class Myclass {
 function Myclass()
 {
  echo 'Myclass initialized';
 }
}

Then __construct() was introduced in PHP5.

class Myclass {
 function __construct()
 {
  echo 'Myclass initialized';
 }
}

Now you may be thinking “I’ll just use this from now on”. I however have to write for multiple versions of PHP4/5 and must keep backwards compatibility in mind (at least for now). Here is what I use to make sure it works on all versions of PHP that currently support object-oriented programming or OOP. Anything earlier than PHP4 and I simply tell the client to find a new host, lol. Continue reading →