Category: Javascript

Image preview by javascript

By , October 13, 2011 5:32 pm

Here I  will  show how to display image preview before uploading to server side.

#HTML


<!DOCTYPE html>

<html>

<head>

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

<meta charset=utf-8 />

<title>JS Bin</title>

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }

</style>

</head>

<body>

<input type='file' onchange="showImagePreview(this);" />

<img id="image_preview" src="#" alt="your image" />

</body>

</html>

#Javascript


function showImagePreview(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#image_preview

.attr('src', e.target.result)

.width(150)

.height(200);

};

reader.readAsDataURL(input.files[0]);

}

}

Note: This method is not worked in IE as files property of file field is not supported by IE browser

Array.indexOf in Internet Explorer

By , July 22, 2011 2:32 pm

In javascript, to find value in array I am using indexOf method. This method works well in all browsers except IE.

IE throws error that “indexOf method is not defined”. So I found solution that added following code in javascript.


if(!Array.indexOf){

Array.prototype.indexOf = function(obj){

for(var i=0; i<this.length; i++){

if(this[i]==obj){

return i;

}

}

return -1;

}

}

So if browser does not find indexOf method then indexOf method is defined by above code. So this will helps to solve IE issues.

Strip tags in Rails, Javascript and PHP

By , August 28, 2009 10:30 pm

Strip tag function is used to remove html tags from the string.

Here I will show you that how to use strip tag in ruby on rails, javascript and php.

#PHP:

Example 1: Remove all html tags.

<?php
$str '<h1>Test1.</h1><p> text2</p>';
echo strip_tags($str);
?>

Example 2: Allow p and h1 html tag.

<?php
$str '<h1>Test1.</h1><p> text2</p>';
echo strip_tags($str,"<h1><p>");
?>

#Ruby On Rails

Example 1: Remove all html tags

#model

class User < ActiveRecord::Base
include ActionView::Helpers
before_save :strip_comment
def strip_comment
return true if self.comment.nil?
self.comment=sanitize(self.comment,:tags =>%w())
save
return true
end

Example 2: Allow h1 and p html tags

#model

class User < ActiveRecord::Base
include ActionView::Helpers
before_save :strip_comment

def strip_comment
return true if self.comment.nil?
self.comment=sanitize(self.comment,:tags =>%w(p h1))
save
return true
end

#Javascript
#Add strip_tags.js

function strip_tags (str, allowed_tags) {

var key = '', allowed = false;
var matches = [];
var allowed_array = [];
var allowed_tag = '';
var i = 0;
var k = '';
var html = '';
var replacer = function (search, replace, str) {
return str.split(search).join(replace);
};

// Build allowes tags associative array
if (allowed_tags) {
allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
}

str += '';

// Match tags
matches = str.match(/(<\/?[\S][^>]*>)/gi);

// Go through all HTML tags
for (key in matches) {
if (isNaN(key)) {
// IE7 Hack
continue;
}

// Save HTML tag
html = matches[key].toString();

// Is tag not in allowed list? Remove from str!
allowed = false;

// Go through all allowed tags
for (k in allowed_array) {
// Init
allowed_tag = allowed_array[k];
i = -1;

if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}

// Determine
if (i == 0) {
allowed = true;
break;
}
}

if (!allowed) {
str = replacer(html, "", str); // Custom replace. No regexing
}
}

return str;

}

#Used strip_tags function to remove html tags.
Example 1: remove all html tags.

var html_string= '<h1>Test1.</h1><p> text2</p>';
var strip_string= strip_tags(html_string);

Example 2: allow only p and h1 html tags

var html_string= '<h1>Test1.</h1><p> text2</p>';
var strip_string= strip_tags(html_string,"<p><h1>");

Waiting for gg.google.com

By , August 7, 2009 5:09 am

When I was working on Google Maps API , I was getting error of “waiting for gg.google.com” on status bar.

Later on I found out that if script debugging is diabled, this problem can not raise.

So just disable script debugging from the firebug.

Firebug Script Debug

Passing data from child window to parent window

By , July 24, 2009 8:54 pm

In this blog, i will show you how to pass data from child window to parent window.

1. Create a form in parent window.


<form name="parent"  id="parent">

<input type="text"  id="test" >

<a  onClick=window.open("child.html","TITILE",
"width=850,height=150,status=1,");>open the child window</a>

</form>

2. Create a second window


<form name="child"  id="child">

<input type="text" id="test_2" name="test_2" value="YOUR DATA">

<input type="button"  id="submit"  value="submit" onclick="call_submit();">

</form>

3. Pass data to parent window by javascript


function call_submit()

{

opener.document.parent.test.value=document.child.test_2.value

self.close();

}

Panorama Theme by Themocracy