Altmint Blog » JavaScript http://blog.altmint.com Fri, 23 Apr 2010 12:28:49 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Javascript Explode http://blog.altmint.com/javascript-explode http://blog.altmint.com/javascript-explode#comments Fri, 02 Apr 2010 05:32:39 +0000 admin http://blog.altmint.com/?p=59 What is the equivalent function for php explode in Javascript?

There is no explode function in java script.but we can handle the explode functionality by writing some custom functions. here is a simple java script  code for you.

If you Run the following code
explode(’. ‘, ‘blog.altmint.com);

It Could return
1.{0: ‘blog’, 1: ‘altmint’, 2: ‘com’}

function explode( delimiter, string, limit ) {
// Splits a string on string separator and return array of components. If limit is positive only limit number of components is returned. If limit is negative all components except the last abs(limit) are returned.
//
// version: 810.114
// discuss at: http://phpjs.org/functions/explode
// +     original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// +     improved by: kenneth
// +     improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// +     improved by: d3x
// +     bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// *     example 1: explode(' ', 'Kevin van Zonneveld');
// *     returns 1: {0: 'Kevin', 1: 'van', 2: 'Zonneveld'}
// *     example 2: explode('=', 'a=bc=d', 2);
// *     returns 2: ['a', 'bc=d']

var emptyArray = { 0: '' };

// third argument is not required
if ( arguments.length < 2
|| typeof arguments[0] == 'undefined'
|| typeof arguments[1] == 'undefined' )
{
return null;
}

if ( delimiter === ''
|| delimiter === false
|| delimiter === null )
{
return false;
}

if ( typeof delimiter == 'function'
|| typeof delimiter == 'object'
|| typeof string == 'function'
|| typeof string == 'object' )
{
return emptyArray;
}

if ( delimiter === true ) {
delimiter = '1';
}

if (!limit) {
return string.toString().split(delimiter.toString());
} else {
// support for limit argument
var splitted = string.toString().split(delimiter.toString());
var partA = splitted.splice(0, limit - 1);
var partB = splitted.join(delimiter.toString());
partA.push(partB);
return partA;
}
}

Click here to Read more.

]]> http://blog.altmint.com/javascript-explode/feed 1 Alter Css Properties with Jquery http://blog.altmint.com/alter-css-properties-with-jquery http://blog.altmint.com/alter-css-properties-with-jquery#comments Thu, 25 Mar 2010 14:40:11 +0000 admin http://blog.altmint.com/?p=41 how to change the Properties of class or id with javascript?

It is very simple with jquery. we can alter or add any css property to the class or id. here is a sample example for it.

Assuming Jquery is Included

$(”#IdName”).css(”color”,”red”);
(or)
$(”.Classname”).css(”color”,”red”);

]]> http://blog.altmint.com/alter-css-properties-with-jquery/feed 0 CSS Properties To JavaScript Reference Conversion http://blog.altmint.com/change-style-properties-with-javascript http://blog.altmint.com/change-style-properties-with-javascript#comments Thu, 25 Mar 2010 13:29:00 +0000 admin http://blog.altmint.com/?p=32 CSS Properties To JavaScript Reference Conversion
CSS Property JavaScript Reference
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Usage

Internet Explorer

document.all.div_id.style.JS_property_reference = “new_CSS_property_value”;

Older Netscape’s (4.7 and earlier)

document.div_id.JS_property_reference = “new_CSS_property_value”;

Netscape 6.0+ and Opera (and other Mozilla)

document.getElementById(div_id).style.JS_property_reference = “new_CSS_property_value”;

Note the use of parentheses instead of square brackets in newer Mozilla’s “getElementById()” reference.

]]> http://blog.altmint.com/change-style-properties-with-javascript/feed 2 JavaScript Image Rotator http://blog.altmint.com/javascript-image-rotator http://blog.altmint.com/javascript-image-rotator#comments Tue, 09 Mar 2010 07:40:50 +0000 admin http://blog.altmint.com/?p=16 We can rotate the image by angle.here is a source code for it ..( rotate an image by an arbitrary angle, it works in IE7 & FF3

<html>
<head>
<!--
**** Universal JavaScript Image Rotator v1.1 (16-03-2009)
//-->
<script type="text/javascript">
<!--
//******************** Image parameters *******************
imagename='kk.jpg'
xsize=180
ysize=240
//*********** nothing to configure below this line ********
//-->
</script>
</head>
<body style="margin:20px">
<H1>Universal JavaScript Image Rotator v1.0 (14-03-2009)</H1>
<div id="container" style="overflow:hidden">
<script type="text/javascript">
<!--
    canvsize=Math.round(Math.sqrt(xsize*xsize+ysize*ysize)); //I need a square canvas for complete rotation
    document.write('<canvas id=canvas width='+canvsize+' height='+canvsize+'></canvas>')
    document.write('<div id="canvas2"><img id=im width='+xsize+' height='+ysize+'></div>')
//-->
</script>

<script type="text/javascript">
<!--
ie=0
var browser=navigator.appName;
if (browser=='Microsoft Internet Explorer') ie=1;

document.getElementById("container").style.width=canvsize+'px'
document.getElementById("container").style.height=canvsize+'px'
//document.getElementById("canvas").style.width=canvsize+'px'
//document.getElementById("canvas").style.height=canvsize+'px'
document.getElementById("canvas2").style.width=xsize+'px'
document.getElementById("canvas2").style.height=ysize+'px'
document.getElementById("canvas2").style.marginLeft=(canvsize-xsize)/2+'px'
document.getElementById("canvas2").style.marginTop=(canvsize-ysize)/2+'px'

var browser=navigator.appName;
if (ie==1) {
    document.getElementById('im').src=imagename;
    var canvas2=document.getElementById('canvas2');
    canvas2.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
    }
else {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img1 = new Image();
    img1.src = imagename;
    img1.onload=function() { ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);}
}

function rotate(deg){
    rad = deg*Math.PI/180
    if (ie==1) rotate_ie(rad,deg)
    else rotate_ff(rad)
}

function rotate_ff(rad) {
    ctx.clearRect(0,0,canvsize,canvsize);
    ctx.save();
    ctx.translate(canvsize/2,canvsize/2);
    ctx.rotate(rad);
    ctx.drawImage(img1, -xsize/2, -ysize/2, xsize, ysize);
    ctx.restore();
}

function rotate_ie(rad)
{
    canvas2.filters.item(0).M11 = Math.cos(rad);
    canvas2.filters.item(0).M12 = -Math.sin(rad);
    canvas2.filters.item(0).M21 = Math.sin(rad);
    canvas2.filters.item(0).M22 = Math.cos(rad);
    canvas2.style.marginLeft=((canvsize-canvas2.offsetWidth)/2)+'px'
    canvas2.style.marginTop=((canvsize-canvas2.offsetHeight)/2)+'px'
}
//-->
</script>
</div>

<p>
Enter the number of degrees (positive or negative) you want to rotate the image:<BR>
<input type="text" id="rotation">
<input type="button" value="Rotate" onclick="rotate(document.getElementById('rotation').value);">
</p>

</body>
</html>
]]> http://blog.altmint.com/javascript-image-rotator/feed 1