Tag Archives: javascript

Flash example with jQuery.

Just created a box with colors and also put the text into it.

This example will flash your eyes but also you can used with any effects.

<!DOCTYPE html>
<html>
<head>
<title>Flash example</title>
<script src=”jquery-2.2.0.js”></script>
<style type=”text/css”>
#canvas_id {
position: fixed;
left: 0px;
top: 0px;
z-index: -10;
width: 100%;
height: 100%;
}
html, body {
margin: 0px;
}
#body {
margin: 8px;
}
</style>
</head>
<body>
<canvas id=”canvas_id”></canvas>
<div id=”body”>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec gravida est, nec fermentum metus. Suspendisse congue ante elit, vitae accumsan quam convallis nec. Integer sodales, nibh id ultricies hendrerit, risus lacus varius ligula, quis porta nulla massa sit amet quam. Praesent posuere vulputate nunc, ac convallis nulla consectetur eget. Vestibulum eu dapibus justo. Aenean ac venenatis sem. Nullam porta, augue at egestas pretium, diam metus suscipit eros, eu eleifend quam diam in lacus. Fusce accumsan sem in placerat blandit. Nulla eget hendrerit lorem, at semper leo. Duis non commodo tellus.
</p>
</div>
<script type=”text/javascript”>
var canvas = document.getElementById(“canvas_id”);
var gl = canvas.getContext(“experimental-webgl”);
var resize = function() {
var width = gl.canvas.clientWidth;
var height = gl.canvas.clientHeight;
if (gl.canvas.width != width || gl.canvas.height != height) {
gl.canvas.width = width;
gl.canvas.height = height;
console.log(“new size: ” + width + “, ” + height);
}
};
var render = function() {
resize();
gl.clearColor(1, Math.random() * 0.2 +0.5, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(render);
};
render();
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Text box example with jQuery.

I know some examples come without explanation.
Most javascript source code is the basis for both CSS and HTML.
In the next example will see one box with text and hover.
The hover effect can also done with CSS.
In this example the goal is the three and jquery libs over mouseenter and mouseleave functions.
The animation effect also use: animate effect.

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>text box example</title>
<style type=”text/css”>
.thumbbox{
    position:relative;
    width: 220px;
    height: 165px;
    margin: 0 20px 20px 0;
    float:left;
    overflow:hidden;
}
.thumb_text{
    position:absolute;
    top:0;
    left:-220px;
    width:200px;
    height:90px;
    text-align:center;
    pointer-events: none;
    padding: 65px 10px 10px 10px;
    -webkit-font-smoothing: antialiased;
    background-color:#666;
}
.thumbimg{
    width:220px;
    height:165px;
    background-color:#CCC;
}</style>
<script src=”jquery-2.2.0.js”></script>
<script src=”three.js”></script>
</head>
<body>
<div class=”thumbbox hover”>
        <div class=”thumbimg”></div>
        <div class=”thumb_text”>TEXT</div>
</div>

<script type=”text/javascript”>
    jQuery(document).ready(function($) {
        // Code that uses jQuery’s $ can follow here.
        $(document).on(‘mouseenter’, ‘.hover’, function(e) {
            var t = $(this).find(‘.thumbimg’),
                t2 = $(this).find(‘.thumb_text’).css(‘left’, -220);
            if ($(window).width() < 9999) {
                t.stop().animate({ opacity: .0 }, 200);
                t2.stop().animate({ left: 0 }, 200);
            }
            else {
                t.stop().animate({ opacity: .5 }, 200);
            };
        })
        .on(‘mouseleave’, ‘.hover’, function(e) {
            var t = $(this).find(‘.thumbimg’),
                t2 = $(this).find(‘.thumb_text’);
            if ($(window).width() < 9999) {
                t.stop().animate({ opacity: 1 }, 200);
                t2.stop().animate({ left: 220 }, 200);
            }
            else {
                t.stop().animate({ opacity: 1 }, 200);
            };
        })
    });
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Rainbow example with jQuery.

This simple example show you how to use jquery with html tags.

<!DOCTYPE html>
<html>
<head>
<title>rainbow example</title>
<script src=”../js/jquery-2.2.0.js”></script>
</head>
<body>
<script>for(d=document,i=0;k=i>>1,k<7;setTimeout(function(w){d.getElementById(w).id=”x”+w},555*k,i++))d.write(“<b id=”+i+”><style>b{width:0;height:0;transition:width 1s,height 1s;border-radius:70ex 70ex 0 0;position:fixed;bottom:-4ex}#x”+i+”{left:”+(9+4*k)+”ex;width:”+(80-6*k)+”ex;height:”+(40-3*k)+”ex;box-shadow:”+(i%2&&”inset 0″)+” 0 6ex hsl(“+50*k+”,99%,50%)}</style>”)</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

JavaScript – highcharts.js chart library – part 001.

This library allow us to make charts for our data and infos. You can download it from code.highcharts.com.
Also you need to use modules if you want to export the chart like image, by using exporting.js from same website.
In this example the source code is very simple just you need to add it into your html5 file and set the data and settings for title, series. As can you see the series and categories has same number of elements. You need to put under xAxis and also to use curly brackets to set the intervals.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Highmaps Example 1</title>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<style type=”text/css”>
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
</style>
<script src=”https://code.highcharts.com/highcharts.js”></script>
<script src=”https://code.highcharts.com/modules/exporting.js”></script>
<div id=”container”></div>
</head>
<body>
<script type=”text/javascript”>
Highcharts.chart(‘container’, {
title: {
text: ‘2015 – 2016 ‘,
},
//
subtitle: {
text: ‘inflation’
},
xAxis: {
categories: [‘2015 T1’, ‘2015 T2’, ‘2015 T3’, ‘2015 T4’, ‘2016 T1’]
},
series: [{ name:”inflation”,
data: [0.79, -1.55, -1.73, -0.93, -3.0],
type: ‘column’
}]
});</script>
</body>
</html>

 

Posted in All, javascript, Programming. Tagged with , , , .

JavaScript – Processing.js 2D library – part 002.

In the last tutorials I told you about studio sketchpad.
Another way to working with processing is to run your script into html files.
If you want to download the processing then you can get it from processing website.
The download will come with an integrated development environment.
If you want to use your processing sketch then you need to make some changes because I will got errors with the IDE.
The changes I make to fix that is to put into the top of your sketch Ball ball001; and MovingBall mb001;.
See the source code.

The most of this features can be found here.

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .