Archive for the ‘HTML’ Category

Debug mobileweb in device

Posted: September 15, 2015 in HTML

1) Install nodeJs using msi installer: https://nodejs.org/en/
2) Go to command line and check if its installed or not using: npm -v
3) Install weinre using below command: npm install –g weinre
4) Run ipconfig command and note your IPv4 address.
5) Run the debugging server using your dev machine: weinre –boundHost 10.12.0.1
6) Once you run above command it will give you weinre URL like http://10.12.0.1:8080, run that url in browser
7) Under “Target Script” you will find <script>.., copy that line in your mobileweb code.
8) Under “Access Points”, click on “debug client user interface” i.e. http://10.12.0.1:8080/client/#anonymous
9) Now, once you run your mobileweb

Reference: http://people.apache.org/~pmuellr/weinre-docs/latest/Installing.html

How to add line break in body for mailto

Posted: August 13, 2015 in HTML, PHP
Tags:

// PHP code

$email = 'myemail.domain.com';
$subject = addslashes("This is Subject: Let's check it...!!!");
$body = addslashes("This is message area. \r\n My Second line...Let's check it...!!!"); // body comes from text area so will have \r and \n
$body = str_replace(array("\r\n","\r","\n"),'%0D%0A',trim($body));

// HTML Code



<a onclick="mailto:<?=$email;?>?subject=<?=$subject;?>&body=<?=$body;?>" >Click here to email me</a>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=KEY&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">

function initialize()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(23.005, 72.5959), 15);
map.setUIToDefault(); // will add top menu,left menu etc

var marker = new GMarker(new GLatLng(23.005, 72.5959));
map.addOverlay(marker);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 700px; height: 500px"></div>
</body>
</html>


// Detect file input support
var isFileInputSupported = (function () {
// Handle devices which falsely report support
if (navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/)) {
return false;
}
// Create test element
var el = document.createElement("input");
el.type = "file";
return !el.disabled;
})();

if (isFileInputSupported)
$('[name="myfile[]"]').trigger('click');
else
alert('This device does not support File upload.');

Simple timer with javascript

Posted: June 19, 2012 in HTML, Javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>~VJ Timer~</title>
<style>
h1{ color:#4BB7B7; font-size:50px;}
a{ color:#09F; font-size:35px; text-decoration:none;}
</style>
</head>

<body>
<!-- Created by Vibha Jadwani -->
<!-- Copyright © 2012 Vibha -->

<h1 style="text-align:center; margin-top:270px;"  id="time">&nbsp;</h1>

<div style="float:left; margin-left:680px; margin-bottom:30px;">
<a id="start" href="#" onclick="toogleTimer();" >Play</a> 
</div>

<div style="float:left; margin-left:680px;">
<a id="stop" href="#" onclick="stopTimer();" >Stop</a> 
</div>


<script language="javascript">
if(getCookie('c_timer')=='on')
{
	document.getElementById('start').innerHTML = 'Pause';
	document.getElementById('stop').style.display = 'block';
	startTicker();
}
else
{
	document.getElementById('stop').style.display = 'none';
}
function startTicker()
{
	if(!getCookie('startTimestamp'))
	{
		var d = new Date();
		setCookie('startTimestamp',Math.round(d.getTime()/1000),1);
		setCookie('c_timer','on',1);
		document.getElementById('stop').style.display = 'block';
	}
	var d = new Date();
	var currentTimestamp = Math.round(d.getTime()/1000);
	
	var breakTime = getCookie('breakTime');
	if(breakTime > 0)
	{
		var diff = parseInt(currentTimestamp)-parseInt(breakTime);
		setCookie('startTimestamp',parseInt(getCookie('startTimestamp'))+parseInt(diff),1);	
		setCookie('breakTime',0,1);	
	}
	oneTick();
}
function stopTicker()
{
	var d = new Date();
	setCookie('breakTime',Math.round(d.getTime()/1000),1);
	clearTimeout(tickTimer);	
}
function stopTimer()
{
	setCookie('startTimestamp','',1);
	setCookie('name','',1);
	setCookie('c_timer','',1);
	clearTimeout(tickTimer);
	document.getElementById('start').innerHTML = 'Play';
	document.getElementById('time').innerHTML = '';
	document.getElementById('stop').style.display = 'none';
}
function oneTick()
{
	var d = new Date();
	var currentTimestamp = Math.round(d.getTime()/1000);
	var startTimestamp = getCookie('startTimestamp');
	
	var diff = parseInt(currentTimestamp)-parseInt(startTimestamp);
	document.getElementById('time').innerHTML = timestampToTime(diff);
	
	tickTimer = setTimeout('oneTick()',1000);
}
function toogleTimer()
{
	if(document.getElementById('start').innerHTML=='Play')
	{
		startTicker();
		document.getElementById('start').innerHTML = 'Pause';
	}
	else
	{
		stopTicker();
		document.getElementById('start').innerHTML = 'Play';
	}
}
function timestampToTime(time)
{
	var hour = Math.floor(time/3600);
	var min = Math.floor((time%3600)/60);
	var sec = (time%3600)%60;
	return padDigit(hour)+' : '+padDigit(min)+' : '+padDigit(sec);
}
function padDigit(number) 
{
   return (number < 10 ? '0' : '') + number;
}
function setCookie(c_name,value,exdays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
	var i,x,y,ARRcookies=document.cookie.split(";");
	for (i=0;i<ARRcookies.length;i++)
	{
	  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
	  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
	  x=x.replace(/^\s+|\s+$/g,"");
	  if (x==c_name)
	  {
		return unescape(y);
	}
	 }
} 
</script>
</body>
</html>

Facebook connect using javascript

Posted: November 1, 2011 in HTML, Javascript
<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>FB JS Connect Tutorial</title>
    </head>
    <body>
        <div id="fb-root"></div>
        <script type="text/javascript">
            var button;
            var userInfo;
            
            window.fbAsyncInit = function() {
                FB.init({ appId: '########', //change the appId to your appId
                    status: true, 
                    cookie: true,
                    xfbml: true,
                    oauth: true});

               //showLoader(true);
               
               function updateButton(response) {
                    button       =   document.getElementById('fb-auth');
                    userInfo     =   document.getElementById('user-info');
                    
                    if (response.authResponse) {
                        //user is already logged in and connected
                        FB.api('/me', function(info) {
                            login(response, info);
                        });
                        
                        button.onclick = function() {
                            FB.logout(function(response) {
                                logout(response);
                            });
                        };
                    } else {
                        //user is not connected to your app or logged out
                        button.innerHTML = 'Login';
                        button.onclick = function() {
                            showLoader(true);
                            FB.login(function(response) {
                                if (response.authResponse) {
                                    FB.api('/me', function(info) {
                                        login(response, info);
                                    });	   
                                } else {
                                    //user cancelled login or did not grant authorization
                                    showLoader(false);
                                }
                            }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});  	
                        }
                    }
                }
                
                // run once with current status and whenever the status changes
                FB.getLoginStatus(updateButton);
                FB.Event.subscribe('auth.statusChange', updateButton);	
            };
            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol 
                    + '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());
            
            
            function login(response, info){ alert('login called');
                if (response.authResponse) {
                    var accessToken                                 =   response.authResponse.accessToken;
                    
                    userInfo.innerHTML                             = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name
                                                                     + "<br /> Your Access Token: " + accessToken;
                    button.innerHTML                               = 'Logout';
                    showLoader(false);
                    document.getElementById('other').style.display = "block";
                }
            }
        
            function logout(response){alert('logout called'); 
                userInfo.innerHTML                             =   "";
                document.getElementById('debug').innerHTML     =   "";
                document.getElementById('other').style.display =   "none";
                showLoader(false);
            }

            //stream publish method
            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){alert('streamPublish called');
                showLoader(true);
                FB.ui(
                {
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [
                        { text: hrefTitle, href: hrefLink }
                    ],
                    user_prompt_message: userPrompt
                },
                function(response) {
                    showLoader(false);
                });

            }
            function showStream(){alert('showStream called'); 
                FB.api('/me', function(response) {
                    //console.log(response.id);
                    streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");
                });
            }
			
			function feed()
			{
				var share = {
                    method: 'send',
				   message     : "I love thinkdiff.net for facebook app development tutorials",
                   link        : 'http://ithinkdiff.net',
                   picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
                   name        : 'iOS Apps & Games',
                   description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
                };

				 FB.ui(share, function(response) { 
                   alert(response);
                   FB.api('/platform/posts', { limit: 3 }, function(response) {
					  for (var i=0, l=response.length; i<l; i++) {
						var post = response[i];
						if (post.message) {
						  alert('Message: ' + post.message);
						} else if (post.attachment && post.attachment.name) {
						  alert('Attachment: ' + post.attachment.name);
						}
					  }
					});

                });
				 
				/*FB.ui({
				   method: 'send',
				   message     : "I love thinkdiff.net for facebook app development tutorials",
                   link        : 'http://ithinkdiff.net',
                   picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
                   name        : 'iOS Apps & Games',
                   description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
				  });*/


			}
            function share(){alert('share called'); 
                showLoader(true);
                var share = {
                    method: 'stream.share',
                    u: 'http://thinkdiff.net/'
                };

                FB.ui(share, function(response) { 
                    showLoader(false);
                    console.log(response); 
                });
            }

            function graphStreamPublish(){alert('graphStreamPublish called'); 
                showLoader(true);
                
                FB.api('/me/feed', 'post', 
                    { 
                        message     : "I love thinkdiff.net for facebook app development tutorials",
                        link        : 'http://ithinkdiff.net',
                        picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
                        name        : 'iOS Apps & Games',
                        description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
                        
                }, 
                function(response) {
                    showLoader(false);
                    
                    if (!response || response.error) {
                        alert('Error occured');
                    } else {
                        alert('Post ID: ' + response.id);
                    }
                });
            }

            function fqlQuery(){alert('fqlQuery called'); 
                showLoader(true);
                
                FB.api('/me', function(response) {
                    showLoader(false);
                    
                    //http://developers.facebook.com/docs/reference/fql/user/
                    var query       =  FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
                    query.wait(function(rows) {
                       document.getElementById('debug').innerHTML =  
                         'FQL Information: '+  "<br />" + 
                         'Your name: '      +  rows[0].name                                                            + "<br />" +
                         'Your Sex: '       +  (rows[0].sex!= undefined ? rows[0].sex : "")                            + "<br />" +
                         'Your Profile: '   +  "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />" +
                         '<img src="'       +  rows[0].pic_small + '" alt="" />' + "<br />";
                     });
                });
            }

            function setStatus(){alert('setStatus called'); 
                showLoader(true);
                
                status1 = document.getElementById('status').value;
                FB.api(
                  {
                    method: 'status.set',
                    status: status1
                  },
                  function(response) {
                    if (response == 0){
                        alert('Your facebook status not updated. Give Status Update Permission.');
                    }
                    else{
                        alert('Your facebook status updated');
                    }
                    showLoader(false);
                  }
                );
            }
            
            function showLoader(status){
                if (status)
                    document.getElementById('loader').style.display = 'block';
                else
                    document.getElementById('loader').style.display = 'none';
            }
            
        </script>

        <h3>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</h3>
        <button id="fb-auth">Login</button>
        <div id="loader" style="display:none">
            <img src="ajax-loader.gif" alt="loading..." />
        </div>
        <br />
        <div id="user-info"></div>
        <br />
        <div id="debug"></div>
        
        <div id="other" style="display:none">
            <a href="#" onClick="showStream(); return false;">Publish Wall Post</a> |
            <a href="#" onClick="share(); return false;">Share With Your Friends</a> |
             <a href="#" onClick="feed(); return false;">Feed</a> |
            <a href="#" onClick="graphStreamPublish(); return false;">Publish Stream Using Graph API</a> |
            <a href="#" onClick="fqlQuery(); return false;">FQL Query Example</a>
            
            <br />
            <textarea id="status" cols="50" rows="5">Write your status here and click 'Status Set Using Legacy Api Call'</textarea>
            <br />
            <a href="#" onClick="setStatus(); return false;">Status Set Using Legacy Api Call</a>
        </div>
    </body>
</html>
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<link rel="Stylesheet" href="files/reset-min.css">
<style>
.addMoreBoundry:first-child .removeCustom { display:none; }
</style>
<script src="files/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {		
	var addMoreCnt = 1;
	$('<span class="removeCustom" style="float:left; cursor:pointer;"><img border="0" src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_21.png" alt="Remove" title="Remove"></span><span class="addCustom" style="float:left; cursor:pointer;"><img border="0" src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_19.png" alt="Add More" title="Add More"></span> ').appendTo(".addMoreBoundry:first");
	var cloneObj = $(".addMoreBoundry:first").clone(true);	
	$('.addCustom').live('click',function() 
	{				
		$(cloneObj).clone(true).insertAfter(".addMoreBoundry:last");
		addMoreCnt = addMoreCnt + 1;			
		$(this).hide();
		$(".addCustom:last").show();			
	});			
	$('.removeCustom').live('click',function() {
		if(confirm('Are you sure you wish to remove selected field(s)?'))
		{
			$(this).parents(".addMoreBoundry").remove();
			$(".addCustom:last").show();
		}
	});
});
</script>
</head><body>
    
<span class="addMoreBoundry">
<div style="float:left; background-color:#CCCCCC; padding:10px; margin:10px; clear:both;">        	
Name : <input id="FilePath_1" name="filePath[]" type="text" size="60" />
<br> Address : <textarea id="address_1" name="address[]"></textarea>
<br> Gender : <input name="gender" type="radio" value="Male"> Male <input name="gender" type="radio" value="Female"> Female
<br> File : <input name="" type="file"> <input name="cb" type="checkbox" value="1">
<br> Button : <input type="button" id="button_1" value="Button" />  
</div>
</span> 
</body></html>