DLX Design

Explanation

Skype is a great program. The internet phone call software has changed the way a lot of businesses work and stay in contact with their employess. However, as good as Skype is, it’s not without it’s small problems. Especially if you’re a web developer.

When a user installs Skype, they will also install, possibly unwittingly, plugins for both Internet Explorer and Firefox. These plugins scan the web page currently being viewed and convers all numbers it finds that it thinks are phone numbers and converts them to links that automatically call the number when clicked. If you have Skype installed, the following number will most likely be turned into a clickable link…

+353870000000

It’s useful functionality, but it can play havoc with a webpage design, especially if the matched number is not actually a phone number. To deal with this problem, I created the killSkype jQuery plugin. This plugin takes the number you don’t want to be “Skyped” and renders it in such a way that Skype will ignore it when it’s doing its thing. i.e.

+353870000000

How to use

Simply download the plugin at the link below, include it in your page and then use the javascript code below to prevent Skype from hijacking your pages layout.

2

   $(selector).killSkype()

e.g.

2
3
4
5
6
7
8

<script type="text/javascript">
$(document).ready(function() {
    $('div.dont_skype').killSkype();
});
</script>
 
<div class="dont_skype">00441214124124</div>

Download plugin (includes readable and packed versions): http://dlx-design.com/plugins/killSkype.0.4.0.zip
jQuery Plugins project page: http://plugins.jquery.com/project/killSkype

Comments and critisms appreciated and encouraged.

A quick and simple guide to changing the background of a div when the mouse floats over it.

The quickest and easiest way of achieving this effect is to apply a :hover pseudo class to whatever div you want to change the background of in CSS.

e.g.

<div id="my-random-div">
    Place your mouse here :)
</div>

div#my-random-div {
    background-color: #fcf;
    border: 1px solid #c0c0c0;
}
div#my-random-div:hover {
    background-color: #ffc;
}

demonstration:

Place your mouse here

Of course, as is always the way, this technique doesn’t work in all browsers (I’m looking at you IE6!) (In IE6′s defence, the :hover psuedo class was never designed to work on anything other than the <a> anchor tag, but I digress.)

In order to achieve this effect in IE6 and other browser, we can employ some simple javascript/jQuery. To implement this we use onmouseover and onmouseout, two event handlers that trigger when the mouse is over the div and when the mouse leaves the div respectively. The markup of the div in the page now looks like this

<div id="my-other-random-div" onmouseover="$(this).addClass('moused-over');" onmouseout="$(this).removeClass('moused-over');">
    Place your mouse here this time and see what happens :)
</div>

The jQuery(this) is jQuery selecting the current element, then either adding or removing the class as necessary. Of course, we need the following CSS also.

div#my-other-random-div {
    background-color: #fcf;
    border: 1px solid #c0c0c0;
}
div#my-other-random-div.moused-over {
    background-color: #cff;
}

All this together gives us…

demonstration:

Place your mouse here this time and see what happens

This should work in IE6 and all jQuery supported browsers. I hope this helps someone.

- Stevie