My Programming Tricks

Caveman Blogger

This is just a combination of my previous post on moving and fading elements without JQuery. I just combine the two functions so that I can move elements and at the same time fade them. Here are the links to my previous posts:

1. Simple Javascript Fade In/Out Function without JQuery
2. Simple Javascript Element Moving Function without JQuery

The combination of these two functions:

<html>
<script>

var moveSpeed = 100; // interval in ms, smaller means faster
var moveStep = 10; // pixel count in every move, bigger means faster

function moveObj(elemID) {

this.id = elemID;
this.x = -1;
this.y = -1;
this.targetX;
this.targetY;
this.timerX;
this.timerY;
this.directionX;
this.directionY;

this.moveHorizontal = function(x1,x2) {
  clearInterval(this.timerX); // cancel earlier movement if any
  x2<x1? this.directionX = 'left':this.directionX = 'right';
  this.x = x1;
  document.getElementById(this.id).style.left = x1+'px';
  this.targetX = x2;
  var tempObj = this;
  this.timerX = setInterval(function() { move(tempObj,'hor'); },moveSpeed);
};

this.moveVertical = function(y1,y2) {
  clearInterval(this.timerY); // cancel earlier movement if any
  y2<y1? this.directionY = 'up':this.directionY = 'down';
  this.y = y1;
  document.getElementById(this.id).style.top = y1+'px';
  this.targetY = y2;
  var tempObj = this;
  this.timerY = setInterval(function() { move(tempObj,'ver'); },moveSpeed);
};
}

function move(obj,movement) {

if (movement == 'hor') {
  obj.directionX == 'left'? obj.x-=moveStep:obj.x+=moveStep; //You can change it to non-linear movement here by applying formula instead just adding/subtracting in a linear fashion
  if ((obj.directionX == 'left' && obj.x < obj.targetX) || (obj.directionX == 'right' && obj.x > obj.targetX)) {
   clearInterval(obj.timerX);
  }
  else {
   document.getElementById(obj.id).style.left = obj.x + 'px';
  }
}
else {
  obj.directionY == 'up'? obj.y-=moveStep:obj.y+=moveStep; //You can change it to non-linear movement here as above
  if ((obj.directionY == 'up' && obj.y < obj.targetY) || (obj.directionY == 'down' && obj.y > obj.targetY)) {
   clearInterval(obj.timerY);
  }
  else {
   document.getElementById(obj.id).style.top = obj.y + 'px';
  }
}

}

var fadeSpeed = 100;

function fadeObj(elemName) {

this.name = elemName;
this.opacity = -1; // -1 indicates a new obj
this.timer;

this.fadeOut = function(delay) {
  if (this.opacity == -1) {
   setOpacity(this.name,10);
   this.opacity = 10;
  }
  var tempObj = this;
  setTimeout(function(){tempObj.timer = setInterval(function() { fade(tempObj,'out'); },fadeSpeed)},delay);
};

this.fadeIn = function(delay) {
  if (this.opacity == -1) {
   setOpacity(this.name,0);
   this.opacity = 0;
  }
  var tempObj = this;
  setTimeout(function(){tempObj.timer = setInterval(function() { fade(tempObj,'in'); },fadeSpeed)},delay);
};

}

function fade(obj,direction) {

if (direction == 'out') {
  obj.opacity--;
  if (obj.opacity >= 0) {
   setOpacity(obj.name,obj.opacity);
  }
  else {
   clearInterval(obj.timer);
  }
}
else {
  obj.opacity++;
  if (obj.opacity <= 10) {
   setOpacity(obj.name,obj.opacity);
  }
  else {
   clearInterval(obj.timer);
  }
}

}

function setOpacity(elemName,value) { // opacity from 0 to 10

document.getElementById(elemName).style.MozOpacity = value/10;
document.getElementById(elemName).style.opacity = value/10;
document.getElementById(elemName).style.filter = 'alpha(opacity=' + value*10 + ')';

}

</script>

<body>
<span id="animateMe" style="position:absolute;top:100px">Hello</span>
<br>

<script>

var moveElem = new moveObj('animateMe');
var fadeElem = new fadeObj('animateMe');
moveElem.moveHorizontal(200,100);
moveElem.moveVertical(100,260);
fadeElem.fadeOut();
setTimeout(function() {moveElem.moveHorizontal(100,500);},2000); // run this movement 2000ms later
setTimeout(function() {moveElem.moveVertical(260,100);},2000); // run this movement 2000ms later
fadeElem.fadeIn(2000); // run this movement 2000ms later

</script>

</body>
</html>

Here they are! You can also add more functions to this animation Javascript library such as the resizing element function. The easiest way is to use JQuery. But this post is not about replacing JQuery. It's about showing those who are curious about how animation can be done without JQuery in simple Javascript functions.

Caveman Blogger

This is similar with my previous post except this is for moving HTML elements instead of fading them.

Note: Again, this is not to replace the existing JQuery codes. This is just for those who are curious about how things are moved with only Javascript codes without JQuery.

Here are the codes:

<html>
<script>

var moveSpeed = 100; // interval in ms, smaller means faster
var moveStep = 10; // pixel count in every move, bigger means faster

function moveObj(elemID) {

this.id = elemID;
this.x = -1;
this.y = -1;
this.targetX;
this.targetY;
this.timerX;
this.timerY;
this.directionX;
this.directionY;

this.moveHorizontal = function(x1,x2,delay) {
  clearInterval(this.timerX); // cancel earlier movement if any
  x2<x1? this.directionX = 'left':this.directionX = 'right';
  this.x = x1;
  document.getElementById(this.id).style.left = x1+'px';
  this.targetX = x2;
  var tempObj = this;
  this.timerX = setInterval(function() { move(tempObj,'hor'); },moveSpeed);
};

this.moveVertical = function(y1,y2,delay) {
  clearInterval(this.timerY); // cancel earlier movement if any
  y2<y1? this.directionY = 'up':this.directionY = 'down';
  this.y = y1;
  document.getElementById(this.id).style.top = y1+'px';
  this.targetY = y2;
  var tempObj = this;
  this.timerY = setInterval(function() { move(tempObj,'ver'); },moveSpeed);
};
}

function move(obj,movement) {

if (movement == 'hor') {
  obj.directionX == 'left'? obj.x-=moveStep:obj.x+=moveStep; //You can change it to non-linear movement here by applying formula instead just adding/subtracting in a linear fashion
  if ((obj.directionX == 'left' && obj.x < obj.targetX) || (obj.directionX == 'right' && obj.x > obj.targetX)) {
   clearInterval(obj.timerX);
  }
  else {
   document.getElementById(obj.id).style.left = obj.x + 'px';
  }
}
else {
  obj.directionY == 'up'? obj.y-=moveStep:obj.y+=moveStep; //You can change it to non-linear movement here as above
  if ((obj.directionY == 'up' && obj.y < obj.targetY) || (obj.directionY == 'down' && obj.y > obj.targetY)) {
   clearInterval(obj.timerY);
  }
  else {
   document.getElementById(obj.id).style.top = obj.y + 'px';
  }
}

}

</script>

<body>
<span id="moveMe" style="position:absolute;top:100px">Hello</span>
<br>

<script>
var helloElem = new moveObj('moveMe');
helloElem.moveHorizontal(200,100,0);
helloElem.moveVertical(100,260,0);
setTimeout(function() {helloElem.moveHorizontal(100,500);},2000); // run this movement 2000ms later
setTimeout(function() {helloElem.moveVertical(260,100);},6000); // run this movement 6000ms later
setTimeout(function() {helloElem.moveHorizontal(500,100);},6000); // run this movement 6000ms later

</script>

</body>
</html>

You can try it out and see if it works almost like JQuery. With these codes, you have more control over the speed. You can change it to non-linear movement like JQuery with adding/subtracting pixel movement with a non-linear formula.

I have also combined the moving and fading function together to make it more interesting:

http://webtrick101.blogspot.com/2014/12/simple-javascript-to-move-and-fade.html

Caveman Blogger

If you want to know how to write your own animation function such as those in JQuery, here is one of them. Please note that this is not to replace your JQuery scripts, it is just for those who are curious about how it can be done without JQuery.

Note: I also have similar codes for movement/animation here. You can combine these two capabilities to make it fade while moving. Of course, that can be a bit challenging.

Here are the codes:

<html>
<script>

var fadeSpeed = 100;

function fadeObj(elemName) {

this.name = elemName;
this.opacity = -1; // -1 indicates a new obj
this.timer;

this.fadeOut = function(delay) {
  if (this.opacity == -1) {
   setOpacity(this.name,10);
   this.opacity = 10;
  }
  var tempObj = this;
  setTimeout(function(){tempObj.timer = setInterval(function() { fade(tempObj,'out'); },fadeSpeed)},delay);
};

this.fadeIn = function(delay) {
  if (this.opacity == -1) {
   setOpacity(this.name,0);
   this.opacity = 0;
  }
  var tempObj = this;
  setTimeout(function(){tempObj.timer = setInterval(function() { fade(tempObj,'in'); },fadeSpeed)},delay);
};

}

function fade(obj,direction) {

if (direction == 'out') {
  obj.opacity--;
  if (obj.opacity >= 0) {
   setOpacity(obj.name,obj.opacity);
  }
  else {
   clearInterval(obj.timer);
  }
}
else {
  obj.opacity++;
  if (obj.opacity <= 10) {
   setOpacity(obj.name,obj.opacity);
  }
  else {
   clearInterval(obj.timer);
  }
}

}

function setOpacity(elemName,value) { // opacity from 0 to 10

document.getElementById(elemName).style.MozOpacity = value/10;
document.getElementById(elemName).style.opacity = value/10;
document.getElementById(elemName).style.filter = 'alpha(opacity=' + value*10 + ')';

}

</script>

<body>
<span id="fadeMe" style="height:100px">Hello</span>

<script>
var helloObj = new fadeObj('fadeMe');
helloObj.fadeOut();
helloObj.fadeIn(2000); // fade in 2000ms later
</script>

</body>
</html>

The 'Hello' text will first fade out and fade back in. I create an object to handle the element by keep tracking of its opacity, element name and timer. Then I sent to a timer to do the fading process. You can also add some other function to it such as fading non-stop, fade from one opacity value to another, avoid double fading events on the same element. I just show you the most basic form of the fading function. You can add a lot more fun to it.

You can also do something cool like this using my codes above:

<body>

<span id="fadeMe1" style="height:100px">H</span><span id="fadeMe2" style="height:100px">e</span><span id="fadeMe3" style="height:100px">l</span><span id="fadeMe4" style="height:100px">l</span><span id="fadeMe5" style="height:100px">o</span>

<script>

var helloElem1 = new fadeObj('fadeMe1');
var helloElem2 = new fadeObj('fadeMe2');
var helloElem3 = new fadeObj('fadeMe3');
var helloElem4 = new fadeObj('fadeMe4');
var helloElem5 = new fadeObj('fadeMe5');

helloElem1.fadeOut(0);
helloElem2.fadeOut(100);
helloElem3.fadeOut(200);
helloElem4.fadeOut(300);
helloElem5.fadeOut(400);
helloElem1.fadeIn(2200);
helloElem2.fadeIn(2400);
helloElem3.fadeIn(2600);
helloElem4.fadeIn(2800);
helloElem5.fadeIn(3000);

</script>

Replace those codes in the body tag with those above. Enjoy!

P.S.: For this to work on IE, you need to specify the width or height for the <span> you are working with.

My Programming Tricks

Labels

Wednesday, December 31, 2014

Simple Javascript to Move and Fade Element without JQuery

Wednesday, December 24, 2014

Simple Javascript Element Moving Function without JQuery

Wednesday, December 10, 2014

Simple Javascript Fade In/Out Function without JQuery