Log in
updated 11:29 AM UTC, May 4, 2016

Simple program to move a div element using JavaScript

Here is a simple program to move a Div element of an HTML using JavaScript.

Code is self explanatory with all the comments in it. Here is link to download the file directly:

http://ictforu.com/data/keypress.html

<html>
<head>
	<title>Arrow key movements</title>
	<script type="text/javascript"> 
		window.onload = function () {
			var moveDiv = document.getElementById("movingDiv");
			window.onkeydown = function(e) {
		
				e.preventDefault();
				if (!e)
				{
					e = window.event;
				}
				var keyCode;
				// pixel wise speed variable
				var speed = 3;       
				if(e.which) {
					keyCode = e.which;
				} else {
					keyCode = e.keyCode;
				}

		//increment/decrement the top or left of the div based on the arrow key movements
				if(keyCode === 37) {
					moveDiv.style.left = (parseInt(moveDiv.style.left, 10) - speed) + 'px';
				} else if (keyCode === 38) {
					moveDiv.style.top = (parseInt(moveDiv.style.top, 10) - speed) + 'px';
				} else if (keyCode === 39) {
					moveDiv.style.left = (parseInt(moveDiv.style.left, 10) + speed) + 'px';
				} else if (keyCode === 40) {
					moveDiv.style.top = (parseInt(moveDiv.style.top, 10) + speed) + 'px';
				}
			};
		};
	</script>

	<!-- CSS fpr moving Div -->
	<style type="text/css">
		#movingDiv {
			width: 100px;
			height: 100px;
			position: absolute;
			background-color: #CCC;
		}
	</style>
</head>
<body>
<!-- This div element will move , it has CSS style element in the header -->
	<div id="movingDiv" style="top:0px;left:0px;">
	</div>
</body>

</html>

 

courtesy: codersblock tutorial

Add a comment (2)

  • Written by Madhu V Rao
  • Category: Javascripts
  • Hits: 12437

Missing radix parameter in Jquery

Missing Radix Parameter is an warning you get when you use jQuery parseInt() without second parameter.

Here are some examples of the behaviour of Javascript on different inputs to parseInt function

     parseInt("10");      ---   produces 10

     parseInt("010")     ---   produces 8 (010 is Octal)

     parseInt("0x10")   ---  produces 16 (0x represents Hexadecimal numbers)

and so on , Jquery assumes the proper numbering system in the above cases.

But what if the number expected is supposed to be in Integer and user enters "010" which is valid representation of 10 in decimal?

The jquery will parse it as 8 and there are chances of miscalculations.

Hence , the second parameter is important and JSHint enforces it with error "Missing Radix Parameter".

(JSHint: static code checker for Javascripts).

These are some way to use the parseInt with second parameter i.e radix parameter:

parseInt("010", 10)   -  (10 represents decimal system) produces 10

parseInt("010", 2)     -  (2 represents Binary)  produces 2

parseInt("010", 8)     - (8 represents Octal) produces 8

parseInt("010", 16)   - (16 represents Hexadecimal) produces 16.

 

 

 

Add a comment (0)

  • Written by Madhu V Rao
  • Category: Javascripts
  • Hits: 4020

jQuery basics & CDN explained

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

    HTML/DOM manipulation
    CSS manipulation
    HTML event methods
    Effects and animations
    AJAX
    Utilities

Advantages are it works across all types of browsers.

Best way to use jQuery is to include it from one of the Content Delivery Networks (Google CDN or Microsoft CDN).

To use jQuery from Google : add this code

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



One big advantage of using the hosted jQuery from Google or Microsoft:

Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.


jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).
By default, jQuery uses "$" as a shortcut for "jQuery"

Basic syntax is: $(selector).action()

    A $ sign to define/access jQuery
    A (selector) to "query (or find)" HTML elements
    A jQuery action() to be performed on the element(s)

Add a comment (0)

  • Written by Madhu V Rao
  • Category: Javascripts
  • Hits: 2738
Follow Us on Twitter
Find Us on Facebook
Follow Us on Google
Follow Us on Pinterest