Short Tag – Web Development Blog

Entries for April, 2013

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;
[...]

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 [...]

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)")";
[...]

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++)
{
[...]

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 [...]

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 [...]

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. [...]

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 [...]