Short Tag – Web Development Blog

Entries for the ‘JQuery’ Category

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

jQuery treeview Expand all / Collapse all not working

In jQuery 1.3.2 there was a change in how :visible and :hidden selectors work.
Here is more info: http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled
This change affects directly the functionality of the treeview plugin of jQuery.
I am referring to this one: http://jquery.bassistance.de/treeview/demo/
The expand all functionality will be effected the most since it will be visible for the users that the tree is [...]

Fancybox – width and height not working

Let’s say you have this code:

$.fancybox({
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘width’ : ‘680′,
‘height’ : ‘495′
});

If you use Fancybox like this the width and height of the window will not be 680×495. Instead the window will have almost the size of the browser window. This is an often encountered problem.
The solution is to remove the quotes from the width and [...]

Make cPanel Api2 Requests with Jquery and Javascript

First, include jQuery in your page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Here is the API 2 of cPanel:
http://docs.cpanel.net/twiki/bin/view/ApiDocs/Api2/WebHome
Find the modules and function names you need, and use them when calling the function below.
Copy the following function to your webpage:

function cpanel_call(module, fct, domain, user, password, secure, port, json, callback, return_as, async)
{
var protocol = secure ? "https" : "http";
var data_type = json [...]

jQuery animate() is not working on element’s children in IE8

Today I encountered a problem I thought I should post about.
When you try to animate an element that has children (for example DIVs) positioned relative or absolute on Internet Explorer 8 these children will not animate, in fact they will not do anything the parent does. I tested this animating the opacity.

<div class="main">
<div class="first"></div>
<div class="second"></div>
<div [...]

JQuery and Innerfade (slideshow plugin)

Jquery is a library of Javascript functions and classes that can make Javascript programming a lot easier. Cross-browser Ajax means one line of code with JQuery. Animations, moving objects are easy to do with Jquery.
And it’s absolutely free!
Official website:
http://jquery.com/
Now… what is innerfade?
Innerfade is a plugin for JQuery. You can use innerfade for slideshows. Innerfade [...]