Seattle Web Design - JavaScript - Kianoush Portfolio

Archive for the ‘JavaScript’ Category

Timing in JavaScript

Wednesday, April 22nd, 2015

Here is an example you can learn how to play with timer in JavaScript.

<!doctype html>
<html>
   <head>
       <title>Timer</title>
       <meta charset='utf-8'>
       <style>
           #viewarea, #controls {
               text-align: center;
               width: 20em;
           }
           #viewarea {
               background-color: cyan;
           }
           #sprite {
               padding: 10pt;
               vertical-align: center;
               position: relative;
           }
       </style>
       <script>
           var sprite;
           var delta;
           function setup() {
               sprite = document.getElementById('sprite');

           }

           function moveRight() {
               if(delta < 8) {
                   delta += 1;
               } else {
                   delta = -8;
               }
               sprite.style.left = delta + 'em';
               console.log('delta: ' + delta + ', left: ' + sprite.style.left);
           }

           function timer() {
               moveRight();
               if(delta < 8) {
                   setTimeout(timer, 250);
               }
           }

       </script>
   </head>
   <body onload='setup();'>
       <h1>Timer</h1>
       <div id='viewarea'>
           <p id='sprite'>@</p>
       </div>
       <div id='controls'>
           <p>
               <button onclick='home();'>Home</button>
               <button onclick='moveRight();'>Move Right</button><br>
               <button onclick='start();'>Start Interval</button>
               <button onclick='stop();'>Stop Interval</button><br>
               <button onclick='timer();'>Use Timeout</button>
               <button onclick='moveFour();'>Move Four</button>
           </p>
       </div>
   </body>
</html>

Posted in JavaScript | No Comments »

Swapping 15 Puzzle – Sliding Tile Game

Wednesday, April 22nd, 2015

This is based on JavaScript, Prototype, JQuery solution. This projects covers moves counter, Changing picture, Hide/Show numbers, and Timer. Feel free to get the code from my website and play around it. I have used innerHTML in some lines.

HTML File:

<!doctype html>
<html>
   <!–
   AD 320, JavaScript Exam
   You should not modify puzzle.html. Your JS code shall be evaluated against an
   unmodified version of this file.
   –>
   <head>
       <title>Tiling Puzzle</title>
       <meta charset='utf-8'>

       <!– stop the web browser from ever caching this page or its images –>
       <meta http-equiv="Cache-Control" content="no-cache" />
       <meta http-equiv="Pragma" content="no-cache" />
       <meta http-equiv="Expires" content="0" />

<!– instructor-provided CSS stylesheet; do not modify –>
<link href="puzzle.css" type="text/css" rel="stylesheet" />

<!– link to Prototype library; do not modify –>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js" type="text/javascript"></script>

       <!– your file –>
       <script src="puzzle.js" type="text/javascript"></script>
   </head>

   <body>
       <h1>AD 320 – Tiling Puzzle</h1>
       <h2>JavaScript Exam</h2>

       <p class="explanation">
           This is a tiling puzzle that is somewhat a cross between a jigsaw puzzle and the fifteen puzzle.
       </p>

           <p class="instructions">
               Click on a piece to move it to the empty location.
           </p>

           <div id="controls">
               <button id="shufflebutton">Shuffle</button>
           </div>

       </div>

   </body>
</html>

CSS File:

/*
AD 320 – Tiling Puzzle, JavaScript exam

You should not modify this style sheet file.
*/

body {
   background-color: white;
   font-family: "Times New Roman";
   font-size: 14pt;
}

#controls, #overall, #puzzlearea {
width: 400px;
}

#controls, .instructions {
padding-top: 10px;
text-align: center;
}

h1 {
margin: 0px;
}

h2 {
margin: 0px;
}

/* Used to center the puzzle. */
#overall {
margin-left: auto;
margin-right: auto;
}

/* The area that holds the 15 puzzle pieces. */
#puzzlearea {
   font-family: sans-serif;
   font-size: 32pt;
   height: 400px;
   margin-bottom: 10px;
   padding: 0px;
   position: relative;
}

/* This class should be applied to each of the 15 puzzle pieces. */
.puzzlepiece {
   background-repeat: no-repeat;
   border: 2px solid black;
   cursor: default;
   height: 96px;
   line-height: 96px;
   position: absolute;
   text-align: center;
   vertical-align: middle;
   width: 96px;
}

/* This indicates which piece will be moved. */
.puzzlepiece:hover {
   border-color: red;
   color: #009900;
   text-decoration: underline;
}

JavaScript File (JS):

/*
AD320 – Spring Quarter – North Seattle College
Exam#1: Tiling Puzzle, JavaScript
Author: Kianoush Moradian
@version: 2015-8

This program runs 15 Puzzle Game perfectly based on JavaScript, Prototype
I have added
1- Hiding numbers
2- Changing back image
3- Game statistics

var mainDiv;
var counter =0; // initializing counter

// This is the main function to initialize the game
window.onload = function(){

// window.alert('Welcome to page ');

   mainDiv = $('puzzlearea');
   var myURL = "url('http://kianoushm.com/test/images/world.jpg')";
   setItUp(myURL);
   document.getElementById("shufflebutton").onclick = shuffleIt;

   //adding counter to the html page by using innerHTML
   var cr = document.createElement('div');
   cr.id = 'myCounter';
   $('overall').appendChild(cr);
   $('myCounter').style.height = "20px";
   $('myCounter').style.background = "rgba(176,196,222,0.6)";
   $('myCounter').style.marginTop = "10px";
   $('myCounter').style.padding = "5px";
   $('myCounter').style.border = "thin dotted black";
   $('myCounter').innerHTML= "Counter: "
   $('myCounter').innerHTML= "Counter: " + counter.toString();

   //adding timer to the html page by suing innerHTML
   var ti = document.createElement('div');
   ti.id = 'myTimer';
   $('overall').appendChild(ti);
   $('myTimer').style.height = "20px";
   $('myTimer').style.background = "rgba(176,196,222,0.6)";
   $('myTimer').style.marginTop = "5px";
   $('myTimer').style.padding = "5px";
   $('myTimer').style.border = "thin dotted black";
   $('myTimer').innerHTML= "Counter: "
   $('myTimer').innerHTML= " Timer: <span id='minutes'>00</span>:<span id='seconds'>00</span>";

   //adding select options to our page
   var sl = document.createElement('select');
   sl.name = 'sl';
   sl.id = 'sl';
   $('controls').appendChild(sl);
   var option1 = document.createElement("option");
        option1.text="The World";
   option1.value="world";
   sl.appendChild(option1);
   var option2 = document.createElement("option");
        option2.text="Happy";
   option2.value="happy";
   sl.appendChild(option2);
   var option3 = document.createElement("option");
        option3.text="Love";
   option3.value="love";
   sl.appendChild(option3);
   var option4 = document.createElement("option");
        option4.text="creepy";
   option4.value="creepy";
   sl.appendChild(option4);
   var option5 = document.createElement("option");
        option5.text="diffuse";
   option5.value="diffuse";
   sl.appendChild(option5);

   sl.onchange = runSl;

   //Adding check box to our page
   var cb = document.createElement('input');
   cb.type='checkbox';
   cb.name='cbox';
   cb.value='cbox';
   cb.id='cbId';
   $('controls').appendChild(cb);

   var label = document.createElement('label')
   label.htmlFor = "cbId";
   label.appendChild(document.createTextNode('Show/Hide'));
   $('controls').appendChild(label);

   cb.onclick=runCb;


   } // End of onload function


   //This is my Timer
   var sec = 0,
    timeoutHandler;

function pad(val) {
return val > 9 ? val : "0" + val;
}

function pausePad() {
clearTimeout( timeoutHandler );
}

function resumePad() {
pausePad();
runPad();
}

function resetPad() {
sec = 0;
resumePad();
}

   mainDiv.getElementsByTagName('div')[2].style.left= '200px';
   mainDiv.getElementsByTagName('div')[2].style.top='0px';
   mainDiv.getElementsByTagName('div')[2].style.backgroundPosition='-200px 0px';

   mainDiv.getElementsByTagName('div')[3].style.left= '300px';
   mainDiv.getElementsByTagName('div')[3].style.top='0px';
   mainDiv.getElementsByTagName('div')[3].style.backgroundPosition='-300px 0px';

   mainDiv.getElementsByTagName('div')[4].style.left= '0px';
   mainDiv.getElementsByTagName('div')[4].style.top='100px';
   mainDiv.getElementsByTagName('div')[4].style.backgroundPosition='0px -100px';

   mainDiv.getElementsByTagName('div')[5].style.left= '100px';
   mainDiv.getElementsByTagName('div')[5].style.top='100px';
   mainDiv.getElementsByTagName('div')[5].style.backgroundPosition='-100px -100px';

   mainDiv.getElementsByTagName('div')[6].style.left= '200px';
   mainDiv.getElementsByTagName('div')[6].style.top='100px';
   mainDiv.getElementsByTagName('div')[6].style.backgroundPosition='-200px -100px';

   mainDiv.getElementsByTagName('div')[7].style.left= '300px';
   mainDiv.getElementsByTagName('div')[7].style.top='100px';
   mainDiv.getElementsByTagName('div')[7].style.backgroundPosition='-300px -100px';

   mainDiv.getElementsByTagName('div')[8].style.left= '0px';
   mainDiv.getElementsByTagName('div')[8].style.top='200px';
   mainDiv.getElementsByTagName('div')[8].style.backgroundPosition='0px -200px';

   mainDiv.getElementsByTagName('div')[9].style.left= '100px';
   mainDiv.getElementsByTagName('div')[9].style.top='200px';
   mainDiv.getElementsByTagName('div')[9].style.backgroundPosition='-100px -200px';

   mainDiv.getElementsByTagName('div')[10].style.left= '200px';
   mainDiv.getElementsByTagName('div')[10].style.top='200px';
   mainDiv.getElementsByTagName('div')[10].style.backgroundPosition='-200px -200px';

   mainDiv.getElementsByTagName('div')[11].style.left= '300px';
   mainDiv.getElementsByTagName('div')[11].style.top='200px';
   mainDiv.getElementsByTagName('div')[11].style.backgroundPosition='-300px -200px';

   mainDiv.getElementsByTagName('div')[12].style.left= '0px';
   mainDiv.getElementsByTagName('div')[12].style.top='300px';
   mainDiv.getElementsByTagName('div')[12].style.backgroundPosition='0px -300px';

   mainDiv.getElementsByTagName('div')[13].style.left= '100px';
   mainDiv.getElementsByTagName('div')[13].style.top='300px';
   mainDiv.getElementsByTagName('div')[13].style.backgroundPosition='-100px -300px';

   mainDiv.getElementsByTagName('div')[14].style.left= '200px';
   mainDiv.getElementsByTagName('div')[14].style.top='300px';
   mainDiv.getElementsByTagName('div')[14].style.backgroundPosition='-200px -300px';

   }

   //generate random numbers 1~ 15
   function myRandom(){
       var arr = []
   while(arr.length < 15){
   var randomnumber=Math.ceil(Math.random()*15)
   var found=false;
    for(var i=0;i<arr.length;i++){
   if(arr[i]==randomnumber){found=true;break}
   }
   if(!found)arr[arr.length]=randomnumber;
   }
   return arr;
   }

   //This function hides and shows numbers
   function runCb() {

   var type;
   if($('cbId').checked)
       {

   for (i=0;i<15; i++)
   mainDiv.getElementsByTagName('div')[i].style.color = "rgba(0,0,0,0)"; // using alpha transparency
   } else {
   for (i=0;i<15; i++)
   mainDiv.getElementsByTagName('div')[i].style.color = "rgba(0,0,0,1)";
   }
   }

   var eLeft = '300px'; //default empty position
   var eTop = '300px';
   var tempLeft, tempTop; // temporary position

//This function moves tiles
function setup() {

   counter++;
   //window.alert("left: "+this.style.left+", top: "+this.style.top+"");
   $('myCounter').innerHTML= "Counter: " + counter.toString();

   tempLeft = this.style.left;
   tempTop = this.style.top;
   this.style.left = eLeft;
   this.style.top = eTop;
   eLeft = tempLeft;
   eTop = tempTop;

}

   //I do not know why it does not work :'(
   function blink(selector){
   $(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
   });
   }

   // when the shuffle button is pressed, this function is called
   function shuffleIt(){

   stopTimer();

   counter =0; //reset
   $('myCounter').innerHTML= "Counter: " + counter.toString();

   eLeft = '300px'; //reset empty position
   eTop = '300px';

   var myArray = $('puzzlearea').getElementsByTagName('div');
   //myArray = shuffle(myArray);
   giveCoordinates(myArray);

   }

   //Set coordinates to tiles.
   function giveCoordinates(array){
   //This is how I make a random number 1 ~ 15

   var arr = []
   while(arr.length < 15){
   var randomnumber=Math.ceil(Math.random()*15)
   var found=false;
   for(var i=0;i<arr.length;i++){
   if(arr[i]==randomnumber){found=true;break}
   }
   if(!found)arr[arr.length]=randomnumber;
   }

   array[arr[14]-1].style.left= '0px';
   array[arr[14]-1].style.top='0px';
   array[arr[13]-1].style.left= '100px';
   array[arr[13]-1].style.top='0px';
   array[arr[12]-1].style.left= '200px';
   array[arr[12]-1].style.top='0px';
   array[arr[11]-1].style.left= '300px';
   array[arr[11]-1].style.top='0px';
   array[arr[10]-1].style.left= '0px';
   array[arr[10]-1].style.top='100px';
   array[arr[9]-1].style.left= '100px';
   array[arr[9]-1].style.top='100px';
   array[arr[8]-1].style.left= '200px';
   array[arr[8]-1].style.top='100px';
   array[arr[7]-1].style.left= '300px';
   array[arr[7]-1].style.top='100px';
   array[arr[6]-1].style.left= '0px';
   array[arr[6]-1].style.top='200px';
   array[arr[5]-1].style.left= '100px';
   array[arr[5]-1].style.top='200px';
   array[arr[4]-1].style.left= '200px';
   array[arr[4]-1].style.top='200px';
   array[arr[3]-1].style.left= '300px';
   array[arr[3]-1].style.top='200px';
   array[arr[2]-1].style.left= '0px';
   array[arr[2]-1].style.top='300px';
   array[arr[1]-1].style.left= '100px';
   array[arr[1]-1].style.top='300px';
   array[arr[0]-1].style.left= '200px';
   array[arr[0]-1].style.top='300px';

   }

Posted in JavaScript | No Comments »

Google Map and Markers API

Wednesday, April 22nd, 2015

This tutorial shows you how to put Google Map on your website and set Markers on it. Also you will see how it animates markers. The fantastic point in this tutorial is, you can use dynamic html ( JavaScript ) to add elements to your web page (DOM).

HTML File:
<!doctype html>
<html>
<head>
<title>US Cities</title>
<meta charset='utf-8'>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src='us_cities.js'></script>
<link rel='stylesheet' href='us_cities.css'>
</head>
<body>
<h1>US Cities</h1>
<div id='display'>
<div id='map_area'></div>
<form name='picker'>
Select the city to be displayed above.
<select name='city'>
<option value='sea'>Seattle</option>
<option value='sfo'>San Francisco</option>
<option value='den'>Denver</option>
<option value='atl'>Altanta</option>
<option value='bos'>Boston</option>
</select>
<input type='button' name='show' value='Show' >
<input type='button' name='clear' value='Clear'>

</form>
</div>
</body>
</html>

CSS:

body {
   background-color: #CCC;
}
h1 {
   text-align: center;
   margin-left: -500px;
}
form {
   margin-top: 10px;
   text-align: center;
}
#map_area {
   width: 750px;
   height: 425px;
   background-color: #CF3;
   border: 2px #000 double;
   margin-left: auto;
   margin-right: auto;
}

JavaScript (js) File

       var map;

       function initialize() {
           document.picker.show.onclick = setMarker;
           document.picker.clear.onclick = remover;


       var mapOptions = {
       zoom: 4,
       center: new google.maps.LatLng(38, -99)
       };
       map = new google.maps.Map(document.getElementById('map_area'),
       mapOptions);


       var option = document.createElement("option");
        option.text="Orlando";
   option.value="mco";
   document.picker.city.appendChild(option);

       var option1 = document.createElement("option");
        option1.text="Chicago";
   option1.value="cgx";
   document.picker.city.appendChild(option1);

       var option2 = document.createElement("option");
        option2.text="San Diego";
   option2.value="san";
   document.picker.city.appendChild(option2);

       var option3 = document.createElement("option");
        option3.text="New York City";
   option3.value="nyc";
   document.picker.city.appendChild(option3);

       var option4 = document.createElement("option");
        option4.text="Los Angeles";
   option4.value="la";
   document.picker.city.appendChild(option4);

       var btn = document.createElement("BUTTON");
   var t = document.createTextNode("Clear All");
   btn.appendChild(t);
       btn.value="clearall";
   document.picker.appendChild(btn);
       document.picker.clearall.onclick = removeall;

       }

google.maps.event.addDomListener(window, 'load', initialize);

if ( document.picker.city.value == 'la') {

           lat = 34.05;
           lng = -118.25;
       lamarker = new google.maps.Marker({
      map:map,
           draggable:true,
           animation: google.maps.Animation.DROP,
           title: 'Los Angeles',
       position: new google.maps.LatLng(lat, lng ),

});
lamarker.setMap(map);
       }


google.maps.event.addListener(marker, 'click', toggleBounce);

       }




   function remover () {
       if ( document.picker.city.value == 'sea')
       {
       seamarker.setMap(null);
       }
       if ( document.picker.city.value == 'sfo')
       {
       sfomarker.setMap(null);
       }
       if ( document.picker.city.value == 'den')
       {
       denmarker.setMap(null);
       }
       if ( document.picker.city.value == 'atl')
       {
       atlmarker.setMap(null);
       }
       if ( document.picker.city.value == 'bos')
       {
       bosmarker.setMap(null);
       }
       if ( document.picker.city.value == 'mco')
       {
       mcomarker.setMap(null);
       }
       if ( document.picker.city.value == 'cgx')
       {
       cgxmarker.setMap(null);
       }
       if ( document.picker.city.value == 'san')
       {
       sanmarker.setMap(null);
       }
       if ( document.picker.city.value == 'nyc')
       {
       nycmarker.setMap(null);
       }
       if ( document.picker.city.value == 'la')
       {
       lamarker.setMap(null);
       }

       }

       function removeall(){

           location.reload();

           }

Posted in JavaScript | No Comments »

Simple Google Map Tutorial

Tuesday, April 21st, 2015

This is how you can initiate google map on your web page:

	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Map</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	html, body, #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
	<script>

	var map;
	function initialize() {
	var mapOptions = {
	zoom: 18,
	center: new google.maps.LatLng(47.7, -122.333)
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>

Posted in JavaScript | No Comments »

Simple JavaScript Code

Monday, April 13th, 2015

This is how you can make a very simple form and play with it by using onclick attribute.

<!DOCTYPE html>
	<html>
	<head>
	<title>Playing around with Forms</title>
	<meta charset="windows-1252">
	<script>

	// make a function
	function fred() {
	window.alert("hi " + document.oneb.name.value);
	document.oneb.name.value = "";
	}

	function cb() {
	var type;
	if(document.oneb.unmask.checked) {
	type = 'text';
	} else {
	type = 'password';
	}
	document.oneb.pwd.type = type;
	}

	</script>
	</head>
	<body onload="cb();">
	<h1 id='title' onclick='style.display="none";'>Playing around with Forms</h1>
	<form name="oneb">
	Name: <input type="text" name="name" value='bob'><br>
	Age: <input type='text' name='age' value='99'><br>
	Email: <input type='text' name='email' value='rh@gmail.com'><br>
	Password: <input type='password' name='pwd' value='xyzzy'>
	Unmask <input type='checkbox' name='unmask' onclick='cb();'><br/>
	<input type='submit'>
	<input type='button' value='Checking'
	onclick='fred()'>
	<input type='button' value='Come back'
	onclick='document.getElementById("title").style.display = "block";'>
	</form>
	</body>
	</html>

Posted in JavaScript | No Comments »