Javascript | SEO, SEM, Web, eCommerce, iOS and Android

Javascript Archives

Drag and Drop Using Javascript

Friday, October 15th, 2010 at 5:18 pm

This is a sample program to create a drag and drop using javascript.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Javascript Drag and Drop Example.&lt;/title&gt;
&lt;style type="text/css"&gt;
.vidFrame {
position: absolute;
display: none;
background-color: #ffdead;
border: 1px solid #800000;
width: 435px;
height: 362px;
cursor: move;
}
.moveable {
position: absolute;
cursor: move;
}

&lt;/style&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
var selObj = null;
function playVid(vidId) {
if (vidPaneID.style.display=='block') {
vidPaneID.style.display='none';
vidPaneID.innerHTML='';
}
}
function moveHandler(e){
if (e == null) { e = window.event }
if (e.button&lt;=1&amp;&amp;dragOK){
selObj.style.left=e.clientX-dragXoffset+'px';
selObj.style.top=e.clientY-dragYoffset+'px';
return false;
}
}
function cleanup(e) {
document.onmousemove=null;
document.onmouseup=null;
selObj.style.cursor=orgCursor;
dragOK=false;
}
function dragHandler(e){
var htype='-moz-grabbing';
if (e == null) { e = window.event; htype='move';}
var target = e.target != null ? e.target : e.srcElement;
selObj=target;
orgCursor=target.style.cursor;
if (target.className=="vidFrame"||target.className=="moveable") {
target.style.cursor=htype;
dragOK=true;
dragXoffset=e.clientX-parseInt(selObj.style.left);
dragYoffset=e.clientY-parseInt(selObj.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;
}
}
document.onmousedown=dragHandler;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src='Tree.jpg' class='moveable'  id='movePic'&gt;
&lt;div id='vidPane' class='vidFrame'&gt;&lt;/div&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
var orgCursor=null;
var dragOK=false;
var dragXoffset=0;
var dragYoffset=0;
vidPaneID = document.getElementById('vidPane');
vidPaneID.style.top='75px';
vidPaneID.style.left='75px';
document.getElementById('movePic').style.left='500px';
document.getElementById('movePic').style.top='100px';
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Javascript Drag and Drop Example.</title>

.vidFrame {

position: absolute;

display: none;

background-color: #ffdead;

border: 1px solid #800000;

width: 435px;

height: 362px;

cursor: move;

}

.moveable {

position: absolute;

cursor: move;

}

</style>

var selObj = null;

function playVid(vidId) {

if (vidPaneID.style.display=='block') {

vidPaneID.style.display='none';

vidPaneID.innerHTML='';

}

function moveHandler(e){

if (e == null) { e = window.event }

if (e.button<=1&&dragOK){

selObj.style.left=e.clientX-dragXoffset+'px';

selObj.style.top=e.clientY-dragYoffset+'px';

return false;

}

function cleanup(e) {

document.onmousemove=null;

document.onmouseup=null;

selObj.style.cursor=orgCursor;

dragOK=false;

}

function dragHandler(e){

var htype='-moz-grabbing';

if (e == null) { e = window.event; htype='move';}

var target = e.target != null ? e.target : e.srcElement;

selObj=target;

orgCursor=target.style.cursor;

if (target.className=="vidFrame"||target.className=="moveable") {

target.style.cursor=htype;

dragOK=true;

dragXoffset=e.clientX-parseInt(selObj.style.left);

dragYoffset=e.clientY-parseInt(selObj.style.top);

document.onmousemove=moveHandler;

document.onmouseup=cleanup;

return false;

}

document.onmousedown=dragHandler;

</script>

</head>

<body>

var orgCursor=null;

var dragOK=false;

var dragXoffset=0;

var dragYoffset=0;

vidPaneID = document.getElementById('vidPane');

vidPaneID.style.top='75px';

vidPaneID.style.left='75px';

document.getElementById('movePic').style.left='500px';

document.getElementById('movePic').style.top='100px';

</script>

</body>

</html>

Image Slide Show

Tuesday, October 5th, 2010 at 6:22 pm

Leave your comment

This is the source code to create an image slide show in javascript:
Read the rest of this entry

Image Viewer using javascript

Friday, October 1st, 2010 at 5:37 pm

Leave your comment

This is an Image Viewer application using HTML and Javascript.

Read the rest of this entry

Simple Form validation with Javascript

Friday, October 1st, 2010 at 5:11 pm

Comments (1)

This is a very simple validation using Javascript.
Here we have three fields: Name, Phone and Email.
Number validation is applied in phone field and email validation is applied in email field.
Also you cannot leave your fields blank.
Read the rest of this entry

Android and iphone detection using javascript

Friday, October 1st, 2010 at 5:08 pm

Leave your comment

Applications that run on an Android have a distinctly different look than iPhone applications.
In the code snippet below, you can use JavaScript to determine the type of device and then use the appropriate style-sheet.

if (navigator.userAgent.indexOf('Android') > -1) {
	document.write("<link href='android.css' rel='stylesheet'>");
} else {
	document.write("<link href='iphone.css' rel='stylesheet'>");
}

if (navigator.userAgent.indexOf('Android') > -1) {

document.write("<link href='android.css' rel='stylesheet'>");

} else {

document.write("<link href='iphone.css' rel='stylesheet'>");

}

Incoming search terms:

javascript detekce android

JavaScript iPad detection

Thursday, September 30th, 2010 at 6:02 pm

Comments (1)

If you’re trying to detect the iPad using JavaScript, there’s a very simple way to do so: check navigator.platform.
The value of navigator.platform is always “iPad” when Safari for iPad is the user-agent.
This is the most accurate way to detect the iPad from JavaScript, assuming you don’t want to do a full user-agent string sniff.
A sample function is given below:

function isIPad(){
return navigator.platform == "iPad";
}

function isIPad(){

return navigator.platform == "iPad";

}

Keep in mind that navigator.platform doesn’t change even when the user-agent string for a browser is changed.

Rotating Image Using Javascript

Friday, September 24th, 2010 at 5:27 pm

Comments (1)

The below code allows you to rotate the image according to the angle you given.
Read the rest of this entry

Incoming search terms:

javascript code for rotating images

Simple graphics using javascript

Friday, September 24th, 2010 at 4:53 pm

Leave your comment

&lt;html&gt;
<head>
</head>
<body>
<div>
<canvas id="canvas">your browser does not support the canvas tag </canvas>
<button onclick="draw();">Show Graphic</button>
</div>
<script type="text/javascript">
function draw(){
  var canvas=document.getElementById("canvas");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.fillStyle="rgb(200,0,0)";
  ctx.fillRect(10,10,55,50);
  ctx.fillStyle="rgba(0,0,200,0.5)";
  ctx.fillRect(30,30,55,50);}
</script>
</body>
&lt;/html&gt;

<html>

<head>

</head>

<body>

<div>

<canvas id="canvas">your browser does not support the canvas tag </canvas>

<button onclick="draw();">Show Graphic</button>

</div>

function draw(){

var canvas=document.getElementById("canvas");

if(!canvas.getContext){return;}

var ctx=canvas.getContext("2d");

ctx.fillStyle="rgb(200,0,0)";

ctx.fillRect(10,10,55,50);

ctx.fillStyle="rgba(0,0,200,0.5)";

ctx.fillRect(30,30,55,50);}

</script>

</body>

</html>

Note: Update your browser to a latest version to make the code work.

Mathematics Game

Thursday, September 16th, 2010 at 10:36 am

Leave your comment

This is a javascript game to test your ability in simple mathematics. The questions are categorized into three as Easy, Moderate and Difficult. First you have to select a category. Along with it, you have to choose whether you are playing on addition, subtraction, multiplication or division. Then a prompt box will appear with a question. After entering your answer click on OK button. Then a dialogue box appears with score and number of right and wrong answers. There is a built in score checker. On game completion, you can check your score and reset it if you wish so.

Read the rest of this entry

Simple Calculator Using Javascript

Thursday, September 16th, 2010 at 10:30 am

Leave your comment

The script below explains a simple mathematical calculator.
Read the rest of this entry

Incoming search terms:

basic calculator using javascript function
simple calculator using javascript

Page 7 of 8« First «...4 5 678 »

SEO, SEM, Web, eCommerce, iOS and Android

Categories

Archives

Javascript Archives

Drag and Drop Using Javascript

Image Slide Show

Image Viewer using javascript

Simple Form validation with Javascript

Android and iphone detection using javascript

Incoming search terms:

JavaScript iPad detection

Rotating Image Using Javascript

Incoming search terms:

Simple graphics using javascript

Mathematics Game

Simple Calculator Using Javascript

Incoming search terms:

Blogroll

Pages