So a thing I was trying to do for quite some time now but using php and rexep, which I hate and don’t understand at all, was trying to change the location (href) of all the external links on my page to something else so I could easily track the clicks. Or maybe display some kind of toolbar on top of the page, something like I guess digg does.

Today I remembered that MooTools is my friend and I could use it to accomplish this.. and after 2 minutes and 5 lines of code I did it!

I’m guessing you already have MooTools up and running. Let’s take a look at the code.

$$('a').each(function(link) {
    if(link.hostname != window.location.host) {
        var loc = link.get('href');
        link.set('href', './out.php?' + loc);
    }
});

So we create an array of all the links on our site and check if their hostname is the same as the hostname of our site. If it is different we read the value of href (the link) and change it to our php script that is going to track the click (or whatever) and add the previous link, so it knows where it should be redirected.

This is it! Easy peasy!

Oh and have a happy December!

So you have an array, let’s call it $array.

$array = array('one', 'two', 'three');

And you want to do a MySQL query that will check if one of the values in the array are present or similar or whatever. In PHP it would look like this:

if (in_array('one', $array))

and it would return true. Now to do this in MySQL we can use (along other things but I use this one) the IN statement.

mysql_query('select something from table where one IN ("' . implode('","', $array) . '")');

Why is this useful? Let’s say you’ve got an array of file extensions (pictures) and you have a database with some files in it, pictures, music, videos. You want to display only the pictures, because you want to display the last 15 uploaded pictures. Let’s say you have the filename and extension (filename = hack.jpg) stored in your database. Let’s see an example of what you could do…

mysql_query('select id, name, filename from uploads where substr(filename, -3) IN ("' . implode('","', $pics) . '") order by id desc limit 12');

And that’s it. Easy peasy!

Have swing!

Today I’m gonna show you a script that I did for a project of mine that fetches the tags from LastFM and updates the database inserting the top 5 tags from their database and leaves your tags as they are.

I believe it could be a lot less messy but I am too lazy to make it more understandable You update the tags using yoursite.com/?autotag=id (of the song from your database). You could as easily do a loop and update every song in the database. But why would you So let’s go with my messy code!

Ps: you must get your API key on their site.

.

$f = mysql_fetch_assoc(mysql_query('select name, tags from songs where id = "' . $_GET['autotag'] . '"'));
$e = explode('-', $f['name']);
$url = @simplexml_load_file('http://ws.audioscrobbler.com/2.0/?method=track.getinfo&api_key=YOUR API KEY&artist=' . $e[0] . '&track=' . trim($e[1]));
$t_cnt = count($url->track->toptags->tag);
$t = explode(',', $f['tags']);
$tags = array();
for ($i = 0; $i < count($t); $i++) {
    if ($t[$i] != '') $tags[] .= trim($t[$i]);
}
for($j = 0; $j < $t_cnt; $j++) {
    array_push($tags, (string)$url->track->toptags->tag[$j]->name);
}
$tags = array_unique($tags);
$ct = count($tags);
for ($k = 0; $k <= $ct; $k++) {
    if ($tags[$k] != '') $tagss .= ($k >= 1 ? ', ' : '') . $tags[$k];
}
//mysql_query('update songs set tags = "' . $tagss . '" where id = "' . $_GET['autotag'] . '"');
exit($tagss);

It reads the name of the song from the database. The name should be Artist – Title, as it then explodes this at the – and presumes the first piece is the artist and the second is the title of the song. This are the info that LastFM wants you to include in the URL if you want to get the song info.

Next, we read the xml file with the song information. We explode our preexistent tags from the database and we count the tags in the xml file.

We create a new array $tags, which will include our preexistent tags (should be separated by commas (,)). We push our tags into it and then we push the tags from LastFM into it.

We use the array_unique function to delete duplicate tags, if there are any. When we finish doing that, we echo the tags into a new variable, $tagss.

At the end, we could update the database entry (if you uncomment the commented line) or just exit the function and echo our new $tagss variable.

That’s it, hope you understood anything.

Have swing!

If you are wondering what a Belcher Button is, it’s that ugly button that you see on sale pages usually. The one on the thumbnail. Yes, that BUY IT NOW / ADD TO CART button, that people tend to click in order to purchase what you are selling.

If you still don’t know what it is about, you can take a look at Belcher’s video on facebook about it and see why it works.

And today I’m going to show you how to make one by yourself with simple HTML and CSS.

Live Preview

Let’s see the code now and I will then explain it to you:

HTML

<div class="buttonContainer">
    <h1 class="buttonHeader">"Name of Your Product"</h1>
    <div class="buttonBorder">
        Regular Price <del>$300</del> Today <ins>$99</ins>
        <a href="#" class="addToCart">Add To Cart</a>
        <a href="#">Add to Cart</a>
        <div class="buttonIcons">
            <img src="http://www.railroadforum.com/forum/icon_smile_visa.gif" width="30" />
            <img src="http://www.cruisedeals.co.uk/img/icon_mastercard.gif" width="30" />
        </div>
    </div>
</div>

CSS

.buttonContainer { width: 400px; margin: 0 auto; font-family: tahoma; }
.buttonHeader { text-align: center; color: #C70311; margin-bottom: 10px; }
.buttonBorder { border: dashed 3px #C70311; padding: 10px; text-align: center; font-size: 15px; }
.addToCart { display: block; width: 200px; padding: 5px 10px 2px; margin: 5px auto; font-size: 25px; background: #FCD629; border: solid 2px red; color: navy; text-decoration: none; }
.buttonIcons { margin-top: 5px; }

Now, as you can see I decided to use classes instead of ids for the elements. This is because usually sale pages MUST have more than one of these buttons and ids must not repeat. Marketers say, that it must include AT LEAST three (3) of them, because a lot of people decide to buy only after they see the call to action for the third time.

I must admit the button does not look exactly as his, because I decided to make it entirely in css without using a background image. You could easily reproduce his effect by making a background in photoshop and setting it in the css code.

And for this example I’m just hotlinking the credit card logos, you should download their original logos and use those.

Once again another easy tutorial for ya.

Have swing!

When developing your website, if you want to rank well in search engines it is crucial that you use different titles for every sub-page you’ve got online. This is because these search engines (Google, MSN etc) love your titles and categorize your site based on them. This is good for SEO.

This is a simple thing to accomplish using PHP but it really is very effective. I will put dumb text into them but you should use titles rich with keywords related to your niche.

$title = 'Welcome to our website!';
if (key($_REQUEST) == 'register') { $title = 'Register now'; }
if (key($_REQUEST) == '404') { $title = 'Error 404: The page is unavailable'; }
if (key($_REQUEST) == 'about') { $title = 'Who we are, what we do'; }
if (key($_REQUEST) == 'news') { $title = 'Recent news'; }

This would work if you are using urls like yoursite.com/?register, ?news etc. What it does is set a variable $title which will include the text your define according to the page we are watching. Now we need to display it in our browser.

<head>
    <title><?= $title; ?> - Your Company Name</title>
</head>

Pretty easy, isn’t it?

Oh and today I’ve found a FREE product that helps you make some money with google, all you have to pay is less then $3 for shipping and handling and they mail it to you. The offer is only valid for the US though. Click here if you are interested. It can do no harm if you’re serious about making some money online and $3 really isn’t something you could not afford!

Have swing!

It’s actually pretty easy once you find out how to do it. By having the artist and album name you can fetch the album artwork from Amazon in three different sizes.

With php5 it’s very easy since it has an integrated xml parser. All we have to do is this:

$url = simplexml_load_file('http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=12DR2PGAQT303YTEWP02&Operation=ItemSearch&SearchIndex=Music&Artist=ARTIST&ResponseGroup=Images&Keywords=ALBUMNAME');

Please note that in the url I’ve put ARTIST and ALBUMNAME, which you should replace with what you’re searching for. Doing so, we get an xml file from which we can display the image like this:

echo '<img src="' . $url->Items->Item[0]->LargeImage->URL . '" />';

If we want the large one, that is. If we would like the medium one we would use MediumImage and SmallImage for the small one.

That’s it, it’s very useful if you are organizing your mp3 files or maybe building an online community or something.

Hope it helps somebody! If you find it useful, digg it!

ps: I forgot to mention that if you are using php4 this wont work, you will have to use another xml parser to fetch the image location from the xml provided by Amazon.

Have swing!

This is what I’m going to show you how to do:

It’s a nice effect that can be used for many things, for a nice gallery or something. You could combine this with some JS, add a hover effect to the picture and have it display the caption.

edit: theodin posted a comment with a link to this kind of effect, check it out at buildinternet.com

This is a pretty simple trick that works in different browsers except for older IE versions I think (because IE seems to hate transparent png’s). Btw, RIP, IE6.

Let me show you the code and then explain how it works:

<div style="width: 300px; height: 224px; position: relative;">
    <div style="position: absolute; bottom: 0px; _bottom: 4px; width: 100%; background: transparent url('http://zurka.us/bg_overlay_black.png') repeat scroll 0 0; font-family: verdana; font-size: 11px;">
        <div style="color: #fff; margin: 10px; text-align: center; position: relative; z-index: 1;">This is Kakashi from the Naruto anime.</div>
    </div>
    <img src="http://www.quizilla.com/user_images/K/KA/KAK/kakashihatake1226/1158375681_resKAKASHI.jpg" width="300" />
</div>

So basically what we are doing is enclose our image in a relatively positioned DIV element. Inside this element we create another DIV element, absolutely positioned. We stick it on the bottom of it’s parents div, so it goes displayed on the bottom (we could position it on the top if wanted). The background of this div is a semi-transparent black PNG image, 1x1px (http://zurka.us/bg_overlay_black.png). This is our black box, the content holder.

Now what we need to do is add our text to the box. Inside the box we create another DIV, give it a 10px margin (this way it has some space around it), style the text and put it over the other layers with z-index.

And that’s it, we have it done. It’s a simple HTML + CSS effect that I tried to get using different methods (like css opacity and stuff) but didn’t manage to replicate.

Original image: Kakashi at Quizilla

So once again, easy peasy!
Have swing, thanks for reading!

I’m going to show you a very simple method for finding out if a number is even or odd in php. You could use this for many things but usually this is mostly used when you have a, let’s say, table and you want to color the background of every second row differently.

The php code looks like this:

if ($number % 2) {
    echo 'The number is even';
} else {
    echo 'The number is odd';
}

In real life we would use something like this:

$i = 0;
while ($something = mysql_fetch_assoc($query)) {
    echo '<div style="padding: 5px; background: #' . ($i % 2 ? 'eee' : 'ddd') . ';">Content</div>';
    $i++;
}

And of course, likewise you could check if a number is divisible by another number using this:

if ($number % 3 == 0) {
    echo 'The number is divisible by 3';
} else {
    echo 'The number is not divisible by 3';
}

Easy peasy, as always!
Have swing!

When posting on forums, we usually use BBcode for styling our texts. When developing webpages, if we want to let our users style their profiles but don’t want to give them permission to style directly with CSS or html (<strong> etc..), we could simply use this piece of code to let them use those BBcodes.

Please note that we could do this using REGEX but as I used the word ‘simple’ in the title of the post, I’m going to make it really simple

The first thing we do is create an array with the tags we are going to use. In my case, my array is $bbcode and I’m going to use codes in square brackets, just as forum platforms do. Take a look at the code, you will see it really is simple.

$bbcode = array(
    "[big]" => "<big>",
    "[/big]" => "</big>",
    "[b]" => "<strong>",
    "[/b]" => "</strong>",
    "[i]" => "<em>",
    "[/i]" => "</em>",
    "[u]" => "<u>",
    "[/u]" => "</u>",
    "[img]" => "<img src=\"",
    "[/img]" => "\" border=\"0\" />",
    "[sup]" => "<sup>",
    "[/sup]" => "</sup>",
    "[sub]" => "<sub>",
    "[/sub]" => "</sub>",
    "[quote]" => "<span class=\"quote\">",
    "[/quote]" => "</span>",
);

As you can see, for the quotes I use a SPAN element with class=”quote” but it could be a DIV as well, since I’m styling it as a block element in my CSS file.

Next, to change our text into the styled one, all we have to do is use the strtr function and use our array as the – guess what – array with replace pairs.

echo strtr('Hello. I am [b]bolded[/b], I am [u]underlined[/u] and I am [big]big[/big]!', $bbcode);

That’s it! As Duke Nukem would say.. piece of cake.

Have swing!

ps. I know it doesn’t include the useful codes as [url] but for that we should already use regex.

Did you ever want to do something like this? An ad showing from the bottom of the screen?

Well, today I’m going to show you how to do it, without the need to spend $47 Yay!

We are going to do reproduce this by using mootools and some styling. Again, it’s an easy thing to make.

Let’s start by including mootools in our document and writing a little script that will basically do all the job that need to be done. This goes into the <head> of our html file.

<script src="inc/mootools-1.2.1-core.js" type="text/javascript"></script>

<script>
    window.addEvent('domready', function() {
        slideUp = new Fx.Tween('footerad', { property: 'height', duration: 1000 });
        (function(){ slideUp.start(0, 90) }).delay('1000');
        $('closead').addEvent('click', function() {
            $('footerad').tween('height', 0);
        });
});
</script>

Let’s analyse the script:

1. When the DOM is ready, execute the following function:
2. slideUp is the variable in which we ‘store’ the motion of our sliding div. We give a tween effect to our element with ‘footerad’ as ID
3. Next, we make the function execute after 1 second (1000ms) and make it raise the height from 0px to 90px. This is going to be the height of our slider on the bottom
4. Now, we add a button that will close the ad if clicked. We could do something more complicated here by adding some code that would write a cookie so the ad doesn’t show up again if the user reloads the page but we don’t need it, we want to bug the user, right?

Now that’s it with the script. All we need to do now is create or DIV element (if you go check out the page at the top of this post you will see they use an IFRAME.. I’m not going to use it).

Now, I think that if you don’t understand how DIV’s work you won’t understand a shit here. Feel free to ask for further explanation in the comments. Oh and I will style the divs directly here, without a css file, so we see how it works.

<div id="footerad" style="display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 0;">
    <div style="position: relative; left: 0; bottom: 0;" id="positioned_relatively">
        <div style="background: #002949; border-top: solid 3px #3b8ccb; position: absolute; top: 15px; left: 0; width: 100%; height: 75px; color: white;" id="background_color">
            <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" id="RSS_icon" />
            <div style="margin: 10px 0 5px 105px;" id="text_div">
                <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
            </div>
        </div>
        <div style="position: absolute; right: 5px; top: 0; font-size: 11px;" id="close_button">
            <a href="#" id="closead">[close]</a>
        </div>
    </div>
</div>

1. We give the first DIV the ID ‘footerad’, since that’s the id we told the script to show when the dom is ready. We style it so it will cover 100% of the width, will be 0px high (the script is going to increase the height with a nice movement) and we make it stay fixed at the bottom of the page. The background of this element is not set, so it will be transparent.
2. The second DIV stays there only because we need a relatively positioned element so we can absolute position other elements inside it.
3. The third div we give a background color and a border on the top, we position absolutely, 0px from the left so it sticks left and 15px from the top so we have some transparent background on top of it (the RSS or whatever icon will look like it’s coming out of the slider)
4. Now it’s time to position our rss icon. We position it absolutely and move it 20px from the left and -15px from the top (this is why we positioned the third div 15px from the top).
5. We make a fifth div with the text and our form. We could position it absolutely but I decided to position it using margins. So we move it 10px from the top and 105px from the left of the screen (because there’s the icon)
6. We close this div and make a new one, positioned absolutely, 5px from the right and 0px from the top, this will be out close button. We make a link and give it the ID ‘closead’
7. We close every div tag. It’s done

Now, as I said, I maybe made a complete confusion writing this. If you don’t understand how this works ask and I will help you out. If you don’t care how this works just copy/paste the code and play a bit with the styling. It’s not hard to understand even if you don’t read my messy writing.

What’s different from this is, that they use a wider image on the left and everything seems more centered. You could do the same by positioning the icon further from the left and then giving your text div a bigger margin on the left.

Have a nice day and go drink some beer with the $47 you just saved!

Live example

As IE does NOT support the use of the CSS position: fixed; property, I found a workaround that works in all browsers but which I didn’t test with other content on the page. The demo is still using the old code, displaying well in all the browsers except IE. This code will work there as well.

<body style="margin: 0; padding: 0;">
    <div style="position: relative; width: 100%; height: 100%;">
        <div id="footerad" style="display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;">
            <div style="position: relative; left: 0; bottom: 0;">
                <div style="position: absolute; background: #002949; border-top: solid 3px #3b8ccb; top: 15px; left: 0; width: 100%; height: 75px; color: white;">
                    <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" />
                    <div style="margin: 10px 0 5px 105px;">
                        <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                        <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
                    </div>
                </div>
                <div style="position: absolute; right: 5px; top: 0; font-size: 11px;">
                    <a href="#" id="closead">[close]</a>
                </div>
            </div>
        </div>
    </div>
</body>

All that changes is that we create a dummy div with a 100% height and position the ad absolutely on it’s bottom. Should work well with all the content as well, but as I said, I didn’t test it.

However, I suggest you using this with caution and parse it only if the useragent shows up to be an IE. Create two different CSS files and use something like this:

<style type='text/css'>@import 'all.css';</style>
<!--[if IE]>
<link
 href='ie_win.css'
 type='text/css'
 media='screen'>
<![endif]-->

Have swing!