Showing posts with label WEB PROGRAMMING. Show all posts
Showing posts with label WEB PROGRAMMING. Show all posts

Friday, 19 August 2016

CREATE A SIMPLE ANIMATION (JavaScript HTML DOM Animation)

           
  No comments  
  To create this animation you need a small amount of experience using css and javascript  because the major work is done by this two but not to worry i have broken this down as simple as possible hope it helps you and dont hesitate to give a comment if it does help you

A SIMPLE WEB LAYOUT PAGE:
     to create our animation we will need to create a simple html page then add our css and javascript am sure you are familiar with this.
<html>
<head></head>
<body>

 <div id ="container">
<div id ="animate"></div>
</div>
</body>
</html> 
for an effective run of the animation we need two container one acting as our stage and the other serving as the element thats been animated thats why we have two div tag here

now to CSS
The container element should be created with style = "position: relative".
The animation element should be created with style = "position: absolute".
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: black;
}
#animate {
  width: 400px;
  height: 30px;
  position: absolute;
  background-color: teal;
}

Share:

CREATE A TIMING EVENT IN HTML

       ,     
  No comments  
  one of the most cooler things most programmer have thought of is how to create a simple timing event how to make ads appear at some interval in your page how to make a certain picture pop out after spending some time on a o page today am going to teach you how to create a timing event using javascript with a simple example

     The window object allows execution of code at specified time intervals.

These time intervals are called timing events.

The two key methods to use with JavaScript are:

setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.
setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.

below is a simple that displays a digital watch after 5seconds of page opening

<!DOCTYPE html>
<html>
<body>

<p>welcome</p>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 5000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();

Share:

JAVA SCRIPT OUTPUT

       ,     
  No comments  
    Apart from the unquestionable ability of java-script to take input it has an even cooler way of outputting to ensure user friendliness no one would want to keep inputting and inputting without seeing an output or will you love that?
   Today we are going to be discussing the 4 major way of outputting using java-script .
  • Writing into an alert box, using window.alert(). or just alert()  an alert box is popup screen that displays an output it seizes all action on your browser until you have attended to the output screen this is implemented using the following syntax
      Window.alert("text goes here") or window.alert(calculation goes here).
      you can also decide to just use alert
        alert("text goes here") or alert(calculation goes here).

example
   <!DOCTYPE html>
<html>
<body>

<h1>My First java script example</h1>

<script>
alert("i love you");
</script>
Share: