Short Tag – Web Development Blog

Border-radius not working on Opera

The border-radius CSS3 property is used to create round corners on elements. Basically you could use it on most elements.

border-radius:10px;

On Opera it will work only if the element you apply it to has display:block, it won’t work on any inline elements.
So, let’s have this link:

<a href="#" class="mylink">Link</a>

Css definitions:

.mylink
{
     background: red;
     color: white;
     border-radius:10px;
     padding: 10px;
}

In Opera border-radius won’t work.
If you add display: inline-block; it will work in Opera too:

.mylink
{
     background: red;
     color: white;
     border-radius:10px;
     padding: 10px;
     display: inline-block;
}

You can add simply display:block, depending on what you need.

Handling padding, margin, border position in CSS3 with boz-sizing

Firefox and other browsers (Opera, Safari, Chrome) will place the padding, margin and border outside of the box (div, table or other element) changing the width and height of the element. Internet Explorer will place them inside the box and the width/height of the element will remain the same. You can see how this will cause problems when trying to create cross-browser websites.

As of CCS3 you can use border-sizing property to specify how an element should handle paddings, margins and borders.

This property can have 3 values:
inherit – inherit from the parent element
content-box – as specified by the W3C standard, the padding, border and margin are added to the outside of the box, increasing it’s width and height (default Firefox behavior)
border-box – default Internet Explorer behavior, it will place these items inside the box, keeping the width/height the same

This property works in the newest versions of Opera, Safari, Chrome and Internet Explorer. There is a separate property for Firefox you can use: -moz-box-sizing.
So, the cross-browser code for border-sizing would look like this:

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

CSS3 cross-browser background gradient

Since CSS3’s gradient backgrounds are fairly new the functionality in all browsers is different.
Here is a sample of how you can achieve cross-browser functionality:

    background-color: #2B2B2B;
    background-image: mix(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), 50%);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr="rgba(255, 255, 255, 0.5)", EndColorStr="rgba(255, 255, 255, 0)")";
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

[Read the rest of this entry...]

Preload images with plain javascript

This is a continuation of my previous post, preloading images with jQuery.
More info about preloaders: here.

This articles is for those who wish to use preloaders but do not use jQuery.

function preload(images)
{
    for (var i = 0; i < images.length; i++)
    {
         var img_path = images[i];
         var img_obj = new Image();
         img_obj.src = img_path;
    }
}

Usage:

preload(["1.jpg", "2.jpg", "icons/icon.png"]);

This function will take as parameter an array with all the images and preload them. The paths of the images can be relative or absolute.

jQuery auto height/width

When changing the height of elements with jQuery you will probably have cases when you need to set the height to be on “auto”, so the browser will automatically calculate it’s height.

This is easy to do, see the example:

jQuery(".element").height("auto");

How does the height function work? If the parameter specified is a number the function will apply a height of that amount of pixels. If the parameter is string it will work pretty much as defining it in CSS.
Possible values:
100px
2em
50%
auto

As you can see it will work with any css measurement type and with the keyword auto. If the string is not auto and does not have any measurement type (like ‘400′) it will use pixels (400px).
The width() function works the same as described above.

jQuery UI Datepicker – change z-index

There are cases when the Datepicker component will not show up, it will be hidden after another element in the page.
In this case you will probably want to change the z-index of the datepicker element. No need to change the source css/javascript code of the component.

This is how the Datepicker works: it takes the z-index of the input it is applied to and increases it by 1. If your html input does not have a z-index then it will be considered to be 1 and it will be increased to 2.
If the element that blocks it will have a z-index higher then 2 the it is probable the datepicker cannot be seen.

To solve the problem you just have to put a z-index on the input higher then the element that blocks it from being seen.
For example:

<input type="text" style="z-index:101; position:relative;" />

Why did I use position:relative? Because otherwise z-index is not applied. Z-index is ignored in a regular static flow, it has to be relative, absolute or fixed.

Preload images with jQuery

I will present 2 ways of preloading images with jQuery.
The first one is pre-loading images from an array, the second one is preloading image paths stored in a special attribute.

Pre-loading images means we want to load the images when the page is loading, so we can have them loaded when we want to use them. They are used especially for hover effects: for example if I have an image and on hover I want to change it with the other image. If the second image is not preloaded there will be nothing displayed until it is loaded (the load time depends on internet connection and server speed).
[Read the rest of this entry...]

jQuery inArray function

Now, thanks to jQuery we have a javascript alternative for PHP’s in_array function.

Let’s have an array:

var my_array = ["I", "love", "short-tag.info", 99];

It will work with mixed arrays as you can see in the example above.
Now, let’s do a few searches:

var pos1 = jQuery.inArray("love", my_array);

It will return 1, since this is the index of the 2nd position.

var pos2 = jQuery.inArray("hawai", my_array);

This will return -1 because the ‘hawai’ string is not found.

var pos3 = jQuery.inArray(99, my_array);

This will return 3, the index of the 4th element.

The function returns the index of the found element, if the element is not found it will return -1.

AES_ENCRYPT and AES_DECRYPT in php

Php doesn’t have direct functions for AES encryption and decryption like MySql.
These functions will do exactly what the MySql functions do.

Encypt function:

function AES_ENCRYPT($value, $secret)
{
    return rtrim(
        base64_encode(
            mcrypt_encrypt(
                MCRYPT_RIJNDAEL_256,
                $secret, $value,
                MCRYPT_MODE_ECB,
                mcrypt_create_iv(
                    mcrypt_get_iv_size(
                        MCRYPT_RIJNDAEL_256,
                        MCRYPT_MODE_ECB
                    ),
                    MCRYPT_RAND)
                )
            ), "\0"
        );
}

Decrypt function:

function AES_DECRYPT($value, $secret)
{
    return rtrim(
        mcrypt_decrypt(
            MCRYPT_RIJNDAEL_256,
            $secret,
            base64_decode($value),
            MCRYPT_MODE_ECB,
            mcrypt_create_iv(
                mcrypt_get_iv_size(
                    MCRYPT_RIJNDAEL_256,
                    MCRYPT_MODE_ECB
                ),
                MCRYPT_RAND
            )
        ), "\0"
    );
}

These functions use base64_encode, so the hash can be stored in a regular VARCHAR or TEXT type field in MySql unlike the example in this article: Mysql AES_ENCRYPT not working properly.

Usage examples:

$password = "password_for_testing";
$secret = "a_very_difficult_key";
$crypted_hash = AES_ENCRYPT($password, $secret);
$regular_password = AES_DECRYPT($crypted_hash, $secret);
echo AES_DECRYPT(AES_ENCRYPT($password, $secret), $secret);

Mysql AES_ENCRYPT not working properly

AES_ENCRYPT() is a MySql function for encrypting sensitive data, like passwords.
Usage examples:

SELECT AES_ENCRYPT("string","secret_key");
UPDATE `users` SET `encr_password` = AES_ENCRYPT("string", "secret_key");

The encrypted string will be binary, so it cannot be stored in a regular text field or varchar in MySql.
So, in this case:

UPDATE `users` SET `encr_password` = AES_ENCRYPT("string", "secret_key");

If `encr_password` field’s type is varchar or text then it will contain only the representation of a few binary codes that match ascii characters and this cannot be decrypted successfully.
If `encr_password` field’s type is BLOB then the password will be stored successfully.

You can decrypt the password using the AES_DECRYPT function.
Usage example:

UPDATE `users` SET `regular_password` = AES_DECRYPT("password", "secret_key")

In this case the regular password can be stored in a varchar or text field.

The “secret_key” used in these examples is a key that is used in creating the crypt hash.
You should use the same key for encrypting as for decrypting otherwise it will fail.