KADIMI [Web Dev, SEO, Linux...] » JavaScript http://www.kadimi.com/en Blog & Free Tech Support Mon, 28 Jun 2010 22:54:47 +0000 en hourly 1 http://wordpress.org/?v=3.0 JavaScript Tween function http://www.kadimi.com/en/javascript-tween-function-368 http://www.kadimi.com/en/javascript-tween-function-368#comments Thu, 17 Dec 2009 23:59:34 +0000 Nabil http://www.kadimi.com/en/?p=368 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:

tween(element, property, from, to, duration, [optional] 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[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< 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< 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;
};
//*/
]]> http://www.kadimi.com/en/javascript-tween-function-368/feed 4 JavaScript round float to n decimal points http://www.kadimi.com/en/round-float-349 http://www.kadimi.com/en/round-float-349#comments Mon, 24 Aug 2009 07:09:26 +0000 Nabil http://www.kadimi.com/en/?p=349 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:

1
2
3
4
5
6
7

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);
}
]]> http://www.kadimi.com/en/round-float-349/feed 0 setAttribute/getAttribute(“style”) crossbrowser alternative http://www.kadimi.com/en/setattribute-getattribute-315 http://www.kadimi.com/en/setattribute-getattribute-315#comments Mon, 10 Aug 2009 02:21:50 +0000 Nabil http://www.kadimi.com/en/?p=315 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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
/* <![CDATA[ */
/* 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)
};
/* ]]> */
</script>
Roll over this <a id="trigger" href="#" onclick="return false;" >trigger</a>:
<div id="test_div" style="border:solid 2px green;padding:10px">
  setStyle and getStyle Test (using border and padding)
</div>
]]> http://www.kadimi.com/en/setattribute-getattribute-315/feed 0 Print HTML code from JavaScript variable http://www.kadimi.com/en/html-code-variable-235 http://www.kadimi.com/en/html-code-variable-235#comments Wed, 05 Aug 2009 06:35:11 +0000 Nabil http://www.kadimi.com/en/?p=235 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

<?php

# define the $html variable using the
# Nowdoc syntax to avoid parsing

$html = <<<'HTML'
<div id="box">
  <h1>Title</h1>
  <p>Article contents + comments</p>
</div>
HTML;

# Warning: no spaces before or after "HTML;"

?>

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:

<script type="text/javascript">
/* <![CDATA[ */
  var html = <?php echo $html; ?>
/* ]]> */
</script>

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:

<?php

$html2 = preg_replace('/\s+/',' ',$html);

$html2 = explode(' ', $html2);

foreach($html2 as $index => $content)
  $html2[$index] = urlencode($content);
$html2 = implode(' ', $html2);
?>

<script type="text/javascript">
/* <![CDATA[ */

  // Import the variable from PHP
  var html = <?php echo $html2; ?>

  // Decode it
  unescape(decodeURI(html2));

  // Display it
  document.writeln(html2);

/* ]]> */
</script>
]]> http://www.kadimi.com/en/html-code-variable-235/feed 0 A note on JavaScript arrays creation & initialization http://www.kadimi.com/en/arrays-creation-and-initialization-225 http://www.kadimi.com/en/arrays-creation-and-initialization-225#comments Wed, 05 Aug 2009 04:19:01 +0000 Nabil http://www.kadimi.com/en/?p=225 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:

<?php
  $cities[] = "mecca";
  $cities[] = "medina";
?>

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)

]]> http://www.kadimi.com/en/arrays-creation-and-initialization-225/feed 0 Generate passwords with JavaScript http://www.kadimi.com/en/random-password-string-107 http://www.kadimi.com/en/random-password-string-107#comments Sat, 06 Jun 2009 03:56:50 +0000 Nabil http://www.kadimi.com/en/?p=107
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

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;
}

Here is an example of calling the function:

pwdLen = 10;
window.alert("A random string of " + pwdLen + "characters: " + generatePassword(pwdLen));

Try it

Generate a random password of 8 characters.

]]> http://www.kadimi.com/en/random-password-string-107/feed 0 Generate a negative random number using JavaScript http://www.kadimi.com/en/negative-random-87 http://www.kadimi.com/en/negative-random-87#comments Tue, 05 May 2009 01:54:31 +0000 Nabil http://www.kadimi.com/en/?p=87 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:

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

This expression on the right of the “=”

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

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

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

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

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)
]]> http://www.kadimi.com/en/negative-random-87/feed 0