KADIMI » Webdesign

Fix “xyz.widget is not a function” when jQuerying in Drupal

Nabil — Mon, 31 Oct 2011 18:13:50 +0000

The error looks like:

c.widget is not a function

Or:

d.widget is not a function

I get this error when I do theming or module development for Drupal. Basically this tells you that the file jquery.ui.widget.js is missing. check the code you were writting and add that file to Drupal like this:

1	drupal_add_js('misc/ui/jquery.ui.widget.min.js');

Opera: CSS rotation and other transformations

Nabil — Fri, 01 Jan 2010 17:49:54 +0000

After the release of Opera 10.5 Alpha, it’s now be possible to rotate elements, this new release includes support for CSS3 rotation and other transitions and transforms, we may not longer need JavaScript for some basic transformations, have a taste:

Download Opera 10.5 Alpha
See the demonstration

The demonstration doesn’t show rotation, so the CSS for rotation under Opera is:

-o-transform:rotate(90deg);

FYI

When you install Opera 10.5 Alpha, your previous installation of Opera (Stable) is not removed, giving you the chance to test and compare…

Read

Find more about Crossbrowser CSS rotation at hakoniemi’s blog.

JavaScript Tween function

Nabil — Thu, 17 Dec 2009 23:59:34 +0000

This is a small library I wrote for creating simple and complicated easing effects without using JQuery, MooTools or other JS libraries.

The library is small 13.4 KB or 5.6 KB compressed,

The function can be called as follows:

1	tween(element, property, from, to, duration, code><code>[optional] code><code>function)

Parameters

element: The id of the HTML element you want to animate like “my_div”, “left_sidebar”, DOM objects are also accepted

property: The CSS property that you want to animate like “color”, background-color”, “left”, “margin-top”…

from: The initial value, like 0px, top, none, 0.5…

to: The final value

duration: the animation duration in ms

function (optional): the easing function to use, by default the tween function uses the linear tween, there are nine other functions included (easeInBack, easeOutBack, easeInOutBack, easeInCirc, easeOutCirc, easeInOutCirc, easeInBounce, easeOutBounce & easeInOutBounce)

Examples

Demos available here

Minified version

Function available here

Full version

var fps = 40;
var debugging = 0;
var tw = [];
var rand_str = generatePassword();
var float_pcre = new RegExp("(\\+|-)?(\\d*\\.)?\\d+", 'g');
var color_at_end = new RegExp("[Cc]olor$");
 
function tween(element, property, from, to, duration) {
 
    if (arguments.length < 5) return false;
 
    // Let's first remove old tweens from the tw table to gain performance
    if (Math.random() >= 0.75) {
        for (var i = 0; i < tw.length; ++i) {
            if (tw[i]["status"] === "playing") break;
            if (i == tw.length - 1) {
                tw = [];
            }
        }
    }
 
    var tw_id = tw.length;
    tw[tw_id] = [];
    tw[tw_id]["f"] = (Boolean(arguments[5])) ? arguments[5] : "linear";
    tw[tw_id]["ez"] = 0; // defined here to avoid collisions on simultaneous tw
    tw[tw_id]["status"] = "playing"; // playing, aborted, complete
    tw[tw_id]["element"] = resolve_element(element);
    tw[tw_id]["property"] = resolve_property(property);
    if (Boolean(tw[tw_id]["property"].match(color_at_end))) tw[tw_id]["is_color_tween"] = true;
    tw[tw_id]["duration"] = duration; //ms
    tw[tw_id]["step"] = 0;
    tw[tw_id]["interval"] = 1000 / fps; //ms
    tw[tw_id]["steps"] = Math.ceil(duration / tw[tw_id]["interval"]);
    tw[tw_id]["from_orig"] = from; //  '', 'current', '1', '30%' ...
    tw[tw_id]["to_orig"] = to;
    tw[tw_id]["timer"] = false;
 
    // Stop simultaneous
    for (var kounter = 0; kounter < tw_id; ++kounter) {
        if (tw[kounter]["status"] !== "playing") continue;
        if (tw[kounter]["element"] !== tw[tw_id]["element"]) continue;
        if (tw[kounter]["property"] !== tw[tw_id]["property"]) continue;
        // We arrived here! that means 2 tw on the same element with the same property, keep the newest tween..
        tw[kounter]["status"] = "aborted";
        clearInterval(tw[kounter]["timer"]);
    }
 
 
    if (tw[tw_id]["from_orig"] === 'current') {
        tw[tw_id]["from"] = getStyle(tw[tw_id]["element"], tw[tw_id]["property"]);
        if (tw[tw_id]["from"] === '' || tw[tw_id]["from"] === 'NaN' || typeof (tw[tw_id]["from"]) === "undefined") tw[tw_id]["from"] = tw[tw_id]["element"].style[tw[tw_id]["property"]];
        if (tw[tw_id]["from"] === '' || tw[tw_id]["from"] === 'NaN' || typeof (tw[tw_id]["from"]) === "undefined") {
            if (tw[tw_id]["is_color_tween"]) tw[tw_id]["from"] = "#7F7F7F";
            else tw[tw_id]["from"] = '0';
        }
        // Format the color array
        if (tw[tw_id]["is_color_tween"]) tw[tw_id]["from"] = resolve_color(tw[tw_id]["from"]);
    }
 
 
    if (tw[tw_id]["is_color_tween"]) {
        if (tw[tw_id]["from_orig"] === 'current'); // tw[tw_id]["from"]	= tw[tw_id]["from"];
        else tw[tw_id]["from"] = resolve_color(tw[tw_id]["from_orig"]);
        tw[tw_id]["to"] = resolve_color(tw[tw_id]["to_orig"]);
        tw[tw_id]["change"] = [];
        tw[tw_id]["change"]["red"] = tw[tw_id]["to"]["red"] - tw[tw_id]["from"]["red"];
        tw[tw_id]["change"]["green"] = tw[tw_id]["to"]["green"] - tw[tw_id]["from"]["green"];
        tw[tw_id]["change"]["blue"] = tw[tw_id]["to"]["blue"] - tw[tw_id]["from"]["blue"];
    } else {
        if (tw[tw_id]["from_orig"] !== '') {
            // tmp is a temporary variable that I use for retrieving prefix and suffix
            if (tw[tw_id]["from_orig"] === 'current') {
                try {
                    tw[tw_id]["from"] = tw[tw_id]["from"].match(float_pcre)
                } catch (e) {
                    tw[tw_id]["from"] = 0;
                }
            } else tw[tw_id]["from"] = tw[tw_id]["from_orig"].match(float_pcre);
 
            tw[tw_id]["from"] = parseFloat(tw[tw_id]["from"]);
            tw[tw_id]["to"] = parseFloat(tw[tw_id]["to_orig"].match(float_pcre));
            tw[tw_id]["change"] = tw[tw_id]["to"] - tw[tw_id]["from"];
 
            var tmp;
            if (tw[tw_id]["from_orig"] === 'current') tmp = tw[tw_id]["to_orig"];
            else tmp = tw[tw_id]["from_orig"];
            tmp = tmp.replace(float_pcre, rand_str);
            tw[tw_id]["prefix"] = tmp.slice(0, tmp.indexOf(rand_str));
            tw[tw_id]["suffix"] = str_replace(tw[tw_id]["prefix"] + rand_str, '', tmp);
        }
    }
 
    // debuggg...
    if (debugging) {
        var tw_info = new String();
        var elm_props = ['id', 'tagName', 'className'];
        for (var i in tw[tw_id]) {
            tw_info += i + ": ";
            if (i !== "element" && typeof (tw[tw_id][i]) === typeof (Object())) {
                for (var j in tw[tw_id][i])
                tw_info += "\n\t" + j + ": " + tw[tw_id][i][j];
            } else if (i === "element") {
                for (var j = 0; j < elm_props.length; j++)
                tw_info += "\n\t" + elm_props[j] + ": " + tw[tw_id][i][elm_props[j]];
            } else tw_info += tw[tw_id][i];
            tw_info += "\n\n";
        }
        alert(tw_info);
    }
 
    if (tw[tw_id]["from_orig"] === "") {
        tw[tw_id]["status"] = "playing";
        tw[tw_id]["timer"] = setTimeout("tw[" + tw_id + "][\"element\"].style[tw[" + tw_id + "][\"property\"]] = tw[" + tw_id + "][\"to_orig\"];tw[" + tw_id + "][\"status\"] = \"complete\"", tw[tw_id]["duration"]);
    } else ease(tw_id);
 
    return tw_id;
}
 
function ease(tw_id) {
 
    if (tw[tw_id]["step"] === 0) {
        tw[tw_id]["status"] = "playing";
        if (tw[tw_id]["is_color_tween"]) tw[tw_id]["element"].style[tw[tw_id]["property"]] = "rgb(" + tw[tw_id]["from"]["red"] + "," + tw[tw_id]["from"]["green"] + "," + tw[tw_id]["from"]["blue"] + ")";
        else tw[tw_id]["element"].style[tw[tw_id]["property"]] = tw[tw_id]["prefix"] + tw[tw_id]["from"] + tw[tw_id]["suffix"];
    }
 
    tw[tw_id]["step"]++;
 
    if (tw[tw_id]["step"] <= tw[tw_id]["steps"] && tw[tw_id]["step"] !== 0 && tw[tw_id]["status"] === 'playing') {
        if (tw[tw_id]["is_color_tween"]) {
            var red = parseInt(eval(tw[tw_id]["f"])(tw[tw_id]["step"], parseInt(tw[tw_id]["from"]["red"]), parseInt(tw[tw_id]["change"]["red"]), tw[tw_id]["steps"]));
            var green = parseInt(eval(tw[tw_id]["f"])(tw[tw_id]["step"], parseInt(tw[tw_id]["from"]["green"]), parseInt(tw[tw_id]["change"]["green"]), tw[tw_id]["steps"]));
            var blue = parseInt(eval(tw[tw_id]["f"])(tw[tw_id]["step"], parseInt(tw[tw_id]["from"]["blue"]), parseInt(tw[tw_id]["change"]["blue"]), tw[tw_id]["steps"]));
            tw[tw_id]["ez"] = "rgb(" + red + "," + green + "," + blue + ")";
        } else {
            tw[tw_id]["ez"] = parseInt(eval(tw[tw_id]["f"])(tw[tw_id]["step"], tw[tw_id]["from"], tw[tw_id]["change"], tw[tw_id]["steps"]) * 100) / 100;
            tw[tw_id]["ez"] = tw[tw_id]["prefix"] + tw[tw_id]["ez"] + tw[tw_id]["suffix"];
        }
 
        tw[tw_id]["timer"] = setTimeout("ease_repeat(" + tw_id + ")", tw[tw_id]["interval"]);
    }
 
    if (tw[tw_id]["step"] >= tw[tw_id]["steps"]) {
        tw[tw_id]["status"] = "complete";
    }
 
}
 
function ease_repeat(tw_id) {
    try {
        tw[tw_id]["element"].style[tw[tw_id]["property"]] = tw[tw_id]["ez"];
        ease(tw_id);
    } catch (e) {}
}
 
 
/* Keep it simple with these nice functions */
 
function h2d(h) {
    // hex to decimal
    return parseInt(h, 16);
}
 
function str_replace(search, replace, subject, count) {
    // version: 908.406
    // discuss at: http://phpjs.org/functions/str_replace
    var i = 0,
        j = 0,
        temp = '',
        repl = '',
        sl = 0,
        fl = 0,
        f = [].concat(search),
        r = [].concat(replace),
        s = subject,
        ra = r instanceof Array,
        sa = s instanceof Array;
    s = [].concat(s);
    if (count) this.window[count] = 0;
    for (i = 0, sl = s.length; i < sl; i++) {
        if (s[i] === '') continue;
        for (j = 0, fl = f.length; j < fl; j++) {
            temp = s[i] + '';
            repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
            s[i] = (temp).split(f[j]).join(repl);
            if (count && s[i] !== temp) {
                this.window[count] += (temp.length - s[i].length) / f[j].length;
            }
        }
    }
    return sa ? s : s[0];
}
 
function resolve_element(element) {
    if (typeof (element) == "object");
    else if (typeof (element) == "string") element = document.getElementById(element);
    if (element.tagName != "undefined") return element;
    return false;
}
 
function resolve_property(property) {
    //  resolve_property("-moz-border-radius") => "MozBorderRadius";
    var matched;
    var dash_letter = new RegExp("-[a-z]");
    while (1) {
        if (matched = property.match(dash_letter)) {
            matched = matched.toString();
            property = str_replace(matched, matched.charAt(1).toUpperCase(), property);
        } else break;
    }
    return property;
}
 
function resolve_color(color) {
    // return an array containing R, G and B values 
    if (color === 'transparent') // IE (6 and ?)
    color = '#FFF';
    var r, g, b;
    var hex_color_pcre = new RegExp("^#[0-9a-f]{3}([0-9a-f]{3})?$", 'gi');
    var rgb_color_pcre = new RegExp("rgb\\(\\s*((?:[0-2]?[0-9])?[0-9])\\s*,\\s*((?:[0-2]?[0-9])?[0-9])\\s*,\\s*((?:[0-2]?[0-9])?[0-9])\\s*\\)$", 'gi');
    var rgb_percent_color_pcre = new RegExp("rgb\\(\\s*((?:[0-1]?[0-9])?[0-9])%\\s*,\\s*((?:[0-1]?[0-9])?[0-9])%\\s*,\\s*((?:[0-1]?[0-9])?[0-9])%\\s*\\)$", 'gi');
    if (color.match(hex_color_pcre)) {
        if (color.length == 4) {
            r = color.charAt(1) + "" + color.charAt(1);
            g = color.charAt(2) + "" + color.charAt(2);
            b = color.charAt(3) + "" + color.charAt(3);
        } else {
            r = color.charAt(1) + "" + color.charAt(2);
            g = color.charAt(3) + "" + color.charAt(4);
            b = color.charAt(5) + "" + color.charAt(6);
        }
        r = h2d(r);
        g = h2d(g);
        b = h2d(b);
    } else if (color.match(rgb_color_pcre)) {
        r = RegExp.$1;
        g = RegExp.$2;
        b = RegExp.$3;
    } else if (color.match(rgb_percent_color_pcre)) {
        r = parseInt((RegExp.$1) * 2.55);
        g = parseInt((RegExp.$2) * 2.55);
        b = parseInt((RegExp.$3) * 2.55);
    } else return false;
 
    var returned = [];
    returned['red'] = r;
    returned['green'] = g;
    returned['blue'] = b;
    return returned;
}
 
function getStyle(oElm, strCssRule) {
    // http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
    var strValue = "";
    if (document.defaultView && document.defaultView.getComputedStyle) {
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    } else if (oElm.currentStyle) {
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}
 
function generatePassword(len) {
    // http://www.kadimi.com/en/javascript/random-password-string/
    len = parseInt(len);
    if (!len) len = 6;
    var password = "";
    var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var charsN = chars.length;
    var nextChar;
 
    for (i = 0; i < len; i++) {
        nextChar = chars.charAt(Math.floor(Math.random() * charsN));
        password += nextChar
    }
    return password;
}
 
function substr(f_string, f_start, f_length) {
    // version: 908.406
    // discuss at: http://phpjs.org/functions/substr
    f_string += '';
 
    if (f_start < 0) {
        f_start += f_string.length;
    }
 
    if (f_length == undefined) {
        f_length = f_string.length;
    } else if (f_length < 0) {
        f_length += f_string.length;
    } else {
        f_length += f_start;
    }
 
    if (f_length < f_start) {
        f_length = f_start;
    }
 
    return f_string.substring(f_start, f_length);
}
 
function microtime(get_as_float) {
    // Returns either a string or a float containing the current time in seconds and microseconds  
    // discuss at: http://phpjs.org/functions/microtime
    // +   original by: Paulo Ricardo F. Santos
    // *     example 1: timeStamp = microtime(true);
    // *     results 1: timeStamp > 1000000000 && timeStamp < 2000000000
    var now = new Date().getTime() / 1000;
    var s = parseInt(now, 10);
 
    return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
 
// My favorite $()
 
 
function $() {
    //http://v3.thewatchmakerproject.com/code/extended-dollar.txt
    var elements = new Array();
    for (var i = 0, len = arguments.length; i < len; i++) {
        var element = arguments[i];
        if (typeof element == 'string') {
            var matched = document.getElementById(element);
            if (matched) {
                elements.push(matched);
            } else {
                var allels = (document.all) ? document.all : document.getElementsByTagName('*');
                var regexp = new RegExp('(^| )' + element + '( |$)');
                for (var i = 0, len = allels.length; i < len; i++) if (regexp.test(allels[i].className)) elements.push(allels[i]);
            }
            if (!elements.length) elements = document.getElementsByTagName(element);
            if (!elements.length) {
                elements = new Array();
                var allels = (document.all) ? document.all : document.getElementsByTagName('*');
                for (var i = 0, len = allels.length; i < len; i++) if (allels[i].getAttribute(element)) elements.push(allels[i]);
            }
            if (!elements.length) {
                var allels = (document.all) ? document.all : document.getElementsByTagName('*');
                for (var i = 0, len = allels.length; i < len; i++) if (allels[i].attributes) for (var j = 0, lenn = allels[i].attributes.length; j < lenn; j++) if (allels[i].attributes[j].specified) if (allels[i].attributes[j].nodeValue == element) elements.push(allels[i]);
            }
        } else {
            elements.push(element);
        }
    }
    if (elements.length == 1) {
        return elements[0];
    } else {
        return elements;
    }
}
 
 
// Ease function(s)
linear = function (t, b, c, d) {
    return c * t / d + b;
};
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// ease functions
// Back
easeInBack = function (t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c * (t /= d) * t * ((s + 1) * t - s) + b;
};
easeOutBack = function (t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
};
easeInOutBack = function (t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
};
 
 
 
 
 
//Circulat
easeInCirc = function (t, b, c, d) {
    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
};
 
easeOutCirc = function (t, b, c, d) {
    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
};
 
easeInOutCirc = function (t, b, c, d) {
    if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
};
 
//Bounce
easeInBounce = function (t, b, c, d) {
    return c - easeOutBounce(d - t, 0, c, d) + b;
};
 
easeOutBounce = function (t, b, c, d) {
    if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b;
    } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
    } else if (t < (2.5 / 2.75)) {
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
    } else {
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
    }
};
easeInOutBounce = function (t, b, c, d) {
    if (t < d / 2) return easeInBounce(t * 2, 0, c, d) * .5 + b;
    return easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
};
//*/

JavaScript round float to n decimal points

Nabil — Mon, 24 Aug 2009 07:09:26 +0000

The best you can do with built in JavaScript functions is to round a number to the nearest integer using the method Math.round(x), so to round a float to n decimal points we need to come up with our own function.

The function round_float() rounds a floating point number x to n decimals, if you ommit the parameter n, the function will have the same behaviour as the round() method, here is the round_float function definition:

function round_float(x,n){
  if(!parseInt(n))
  	var n=0;
  if(!parseFloat(x))
  	return false;
  return Math.round(x*Math.pow(10,n))/Math.pow(10,n);
}

With prototyping

Dmitry suggested a better approach using prototyping:

if (!Number.toFixed) {
  Number.prototype.toFixed=function(n){
    return Math.round(this*Math.pow(10, n)) / Math.pow(10, n);
  }
}
 
// example:
floating_number = 123.45687;
decimal_points = 2;
window.alert(floating_number.toFixed(decimal_points));

setAttribute/getAttribute(“style”) crossbrowser alternative

Nabil — Mon, 10 Aug 2009 02:21:50 +0000

The JavaScript methods setAttribute and getAttribute are very handy when you are designing dynamic effects for your website, but those methods have a lot of bugs in IE (6 an 7 at least), I use these two crossbrowser functions as alternatives instead of using directly setAttribute() and getAttribute(), I’ve been using them for quite a long time and have had excellent results (crossbrowser compatibility):

/* setStyle function */
function setStyle(element, styleText){
	if(element.style.setAttribute)
		element.style.setAttribute("cssText", styleText );
	else
		element.setAttribute("style", styleText );
}
/* getStyle function */
function getStyle(element){
 	var styleText = element.getAttribute('style');
 	if(styleText == null)
		return "";
	if (typeof styleText == 'string') // !IE
		return styleText;
	else  // IE
		return styleText.cssText;
}

Now use the setStyle function whenever you need to change the style attribite of a HTML element

Demonstration

Roll over this trigger:

setStyle and getStyle Test (using border and padding)

Explanation

On the demonstration we define two style for the div, the default one and one that we will swith to once we “mouseover” the div.

 type="text/javascript">
/* 
/* Test */
var my_element = document.getElementById("test_div");
var my_trigger = document.getElementById("trigger");
var initial_style = getStyle(my_element);
var alternative_style = "border:solid 6px green;padding:6px";
my_trigger.onmouseover = my_element.onload = function (){
	setStyle(my_element, alternative_style);
};
my_trigger.onmouseout = function (){
	setStyle(my_element, initial_style)
};
/* ]]> */
>
Roll over this  id="trigger" href="#" onclick="return false;" >trigger>:
 id="test_div" style="border:solid 2px green;padding:10px">
  setStyle and getStyle Test (using border and padding)
>

Print HTML code from JavaScript variable

Nabil — Wed, 05 Aug 2009 06:35:11 +0000

This also was about to drive me crazy so I will not let it go without writing about it..

Let’s say you have some long HTML code contained on a PHP variable, something like this


$some_div = '

  Title
  Article contents + comments
';
?>

Now you want to use this HTML code as a JavaScript variable instead of printing it directly, you will tell me you’ll do this:

JavaScript doesn’t like unescaped new lines and special characters (mainly “, < and >) too much, so the previous code won’t work, my quick solution for that is to do the following:

Encode the html code in PHP using urlencode
Decode it within JavaScript

When using PHP’s urlencode function, all whitespace characters will be replaced by + signs, so we’d better deal with those characters before encoding them, otherwise, we won’t make a difference between spaces and real + signs, please read the comment on the PHP code below to understand:


 
// replace consecutive white space characters with a single space
$some_div_2 = preg_replace('/\s+/',' ',$some_div);
 
// Explode (cut the string on the white space and put the resulting part on an array)
$some_div_2 = explode(' ', $some_div_2);
 
// Encode the text contained on the array cells
foreach($some_div_2 as $index => $content)
  $some_div_2[$index] = urlencode($content);
 
// Implode (reassemble) the array to a string again
$some_div_2 = implode(' ', $some_div_2);
 
?>

A note on JavaScript arrays creation & initialization

Nabil — Wed, 05 Aug 2009 04:19:01 +0000

I use PHP a lot in my projects and it happens that sometimes I combine PHP with another language and write completely useless code.

PHP arrays can be created and initialized with like this:

I thought that the same would apply to javascript… Yes, it can work, but only if the array already exists, otherwise you will get an error, Your browser will tell you that it can’t find that array, pretty simple… maybe…

var cities = []// we create the array first
  cities[0] = "mecca";
  cities[1] = "medina";

Note that JavaScript doesn’t automatically assign table indexes, you have to set them automatically. +1 for PHP (on most other languages)

Generate passwords with JavaScript

Nabil — Sat, 06 Jun 2009 03:56:50 +0000

The function generatePassword() is a simple yet customizable function that generates a random password string, the default password length is 6, you can override it by calling the function like this generatePassword(n) where n is the password length. The possible characters are defined within the function with the variable chars

The function: generatePassword([len=6])

function generatePassword(len){
	len	= parseInt(len);
	if(!len)
		len = 6;
	var password = "";
	var chars    = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var charsN   = chars.length;
	var nextChar;
 
	for(i=0; i<len; i++){
		nextChar = chars.charAt(Math.floor(Math.random()*charsN));
		password += nextChar;
	}
	return password;
}

Usage

The first example show the function without the optional len patamater(string length), and second example makes use of it:

// Example 1: No len
window.alert("A random string of 6 characters: " + generatePassword());
 
// Example 2: Using len
pwdLen = 10;
window.alert("A random string of " + pwdLen + "characters: " + generatePassword(pwdLen));

Try it

Generate a random password of 128 characters.

How to style input fields with CSS?

Nabil — Fri, 05 Jun 2009 11:13:56 +0000

There are situations where you need to style input fields depending on there types.

Doing this is wrong:

input{
    border:solid 1px red;
}

As you see in the image, the CSS rule has been applied to all input fields (a text input field, and an image input)

You can specify the type of input field that you are targeting by doing like this:

input[type="password"]{
    border:solid 1px red;
}

Generate a negative random number using JavaScript

Nabil — Tue, 05 May 2009 01:54:31 +0000

Maths

Ok, so you already know how to generate positive rondom numbers but let’s do it again:

To generate a random number varying from 0 to 9 we will use this code:

1	var randomN = Math.floor(Math.random()*10)

This expression on the right of the “=”

produces a random number from 0 to 1 (excluding 1, say 0.917) with Math.random()
multiplies it by 10 (9.71)
removes decimals (9) with Math.floor

For negative values from -9 to 0 we will simply subtract 9 from the previous result:

1	var negativeRandomN = Math.floor(Math.random()*10) - 9

Now what if you wanted a rondom integer from -10 to 20… ?
Yes you guessed it right! we will generate a random number from 0 to 30 then substact 10 from it

1	var randomN = Math.floor(Math.random()*31) - 10

So the rule is:
To generate a random integer from m to n, here is the code

1	var randomN = Math.floor(Math.random() * (n-m+1)) + m

Examples

# Random integer from 1 to 10
var randomN = Math.floor(Math.random() * 10) + 1
 
# Random integer from -100 to 100
var randomN = Math.floor(Math.random() * 201) -100
 
# Random integer from 0 to 255
var randomN = Math.floor(Math.random() * 256)