Showing posts with label Web. Show all posts

Thursday, 30 April 2015

Web UI Icons #1

Here is a collection of Web User Interface Icon Collection.
This can be used to build web apps, web pages etc..
Hope you like it..

Download

UI Orb Loader

Another User Interface Item from Shutter.
Animated Orb Loader....
Hope it helps

Download

Please rate this post and comment below to help me improve....

This is a UI Loader element that can be embedded in webpages, movie desgning etc...

Download

ToWords Javascript File - Convert numbers to Words

This is a JavaScript file to convert numbers into words.If you need to convert any number such as 251 into Two Hundred Fifty One this file might help you. It can convert numbers from 0 to 999999999999999 which reads 'nine hundred ninety nine trillion nine hundred ninety nine billion nine hundred ninety nine million nine hundred ninety nine thousand nine hundred ninety nine'. This javscript cannot convert negative numbers because I found it is less necessary. You can download the file directly by clicking the link below.Hope it helps

Download

AA Menu Maker script

Script file to generate dropdown menus,popups,onclick menus and much more with just simple codes..

Download

Link to your Webpage by pasting the below code:

<script src="https://googledrive.com/host/0B9LZUJ9ROeSrcmRvXzhWaFVRN2M"><script>

View Demo Language file for Notepad++

AAMath-Function file (Updated)

It is a javascript file that can be linked to your html webpages to include some of the functions to save time generating such functions.

The functions included are:

fact()-factorial
ncr()-combination.
npr()-permutation.
sumToA()-sum to n terms of an Arithmetic Progression.
sumToG()-sum to n terms of a Geometric Progression.
factors()-factors of a number.
reverse()-reverse of a number.
swap()-swap between digits.
shift()-shift digits
multiples()-multiples of a number
isPrime()-Check whether the number is prime or not.
primes()-Generate a prime number series.New!
hcf()-find the hcf of two numbers.New!
lcm()-find the lcm of two numbers.New!
factorise()-prime factorise a number.New!

Get more information on these functions for the reference file along with the script file.
-download script and reference-
Download

External linking url:
https://googledrive.com/host/0B9LZUJ9ROeSreUl0b1ZuSHB5TDA

View Reference Download language file for Notepad++
Hope its helpful.....will continue to add more functions

HTML5 Clock-Sci-Fi-Tech

Download zip

HTML5 Clock4

SkyDrive:

Download

HTML5 Clock-3 [Code]

Creating a simple html clock using html, css and javascript

<html>
<head>
<style>
...
</style>
</head>
<body onload="runclock()">
<div class="cbg"></div>
<div id="clock" class="clock"></div>
<div id="min" class="min"></div>
<div id="day" class="day"></div>
<div id="date"></div>
<div id="sec" class="sec"></div>
<div id="sr1" class="sr" style="background:orange;"></div>
<div id="sr2" class="sr" style="background:yellow;"></div>
<div id="sr3" class="sr" style="background:lime;"></div>
<div id="sr4" class="sr" style="background:red;"></div>
<script>
...
</script>
</body>
</html>

The style part is:

.clock
{
    width:500px;
    height:500px;
    position:absolute;
    left:300px;
    top:100px;
    font-family:YouMurderer BB;
    font-size:300px;
    text-align:center;
    color:#900000;
    text-shadow:2px 2px black;
}

.min
{
    width:500px;
    height:500px;
    position:absolute;
    left:450px;
    top:150px;
    font-family:YouMurderer BB;
    font-size:250px;
    text-align:center;
    color:#b64500;
    text-shadow:2px 2px black;
}

.cbg
{
    width:500px;
    height:500px;
    border-radius:250px;
    position:absolute;
    left:300px;
    top:50px;
}

.day
{
    width:150px;
    height:150px;
    position:absolute;
    left:475px;
    top:100px;
    font-family:YouMurderer BB;
    font-size:100px;
    text-align:center;
    color:#009315;
    text-shadow:2px 2px black;
}

#date
{
    width:150px;
    height:150px;
    position:absolute;
    left:400px;
    top:120px;
    font-family:YouMurderer BB;
    font-size:150px;
    text-align:center;
    color:#00f6ff;
    text-shadow:2px 2px black;
}

.sec
{
    width:150px;
    height:150px;
    position:absolute;
    left:575px;
    top:250px;
    font-family:YouMurderer BB;
    font-size:150px;
    text-align:center;
    color:#ffde00;
    text-shadow:2px 2px black;
}
.sr
{
    position:absolute;
    left:300px;
    top:50px;
    width:20px;
    height:100px;
    background:red;
}

@keyframes secrun1
{
    0%{top:50px;left:300px;transform:rotate(0deg);}
    100%{top:400px;left:300px;transform:rotate(90deg);}
}

@keyframes secrun2
{
    0%{top:400px;left:300px;transform:rotate(90deg);}
    100%{top:400px;left:900px;transform:rotate(0deg);}
}

@keyframes secrun3
{
    0%{top:400px;left:900px;transform:rotate(0deg);}
    100%{top:50px;left:900px;transform:rotate(90deg);}
}

@keyframes secrun4
{
    0%{top:50px;left:900px;transform:rotate(90deg);}
    100%{top:50px;left:300px;transform:rotate(0deg);}
}

Script part is:

function runclock()
{
    var t = new Date();
    var h = t.getHours();
    var m = t.getMinutes();
    var s = t.getSeconds();
    var sec=s;
    var d = t.getDay();
    var da=t.getDate();
    d=day(d);
    m=putzero(m);
    h=format(h);
    h=putzero(h);
    da=putzero(da);
    s=putzero(s);

    //create animation

    if(sec%4==0)
    { 
        document.getElementById('sr1').style.animation="secrun1 1s";
        document.getElementById('sr2').style.animation="secrun2 1s";
        document.getElementById('sr3').style.animation="secrun3 1s";
        document.getElementById('sr4').style.animation="secrun4 1s";
    }

    else  if(sec%4==1)
    {
        document.getElementById('sr1').style.animation="secrun2 1s";
        document.getElementById('sr2').style.animation="secrun3 1s";
        document.getElementById('sr3').style.animation="secrun4 1s";
        document.getElementById('sr4').style.animation="secrun1 1s";
    }

    if(sec%4==2) 
    {
        document.getElementById('sr1').style.animation="secrun3 1s";
        document.getElementById('sr2').style.animation="secrun4 1s";
        document.getElementById('sr3').style.animation="secrun1 1s";
        document.getElementById('sr4').style.animation="secrun2 1s";
    }

    else  if(sec%4==3)
    {
        document.getElementById('sr1').style.animation="secrun4 1s";
        document.getElementById('sr2').style.animation="secrun1 1s";
        document.getElementById('sr3').style.animation="secrun2 1s";
        document.getElementById('sr4').style.animation="secrun3 1s";
    }

//Display Clock
    setTimeout(function(){runclock()},500);
    document.getElementById('clock').innerHTML=h;
    document.getElementById('min').innerHTML=m;
    document.getElementById('day').innerHTML=d;
    document.getElementById('date').innerHTML=da;
    document.getElementById('sec').innerHTML=s;
}

function putzero(i)
{
    if(i<10)
    {
        i="0"+i;
    }
    return i;
}

function format(j)
{
    if(j>12)
    {
        j=j-12;
    }
    return j;
}


function day(k)
{
    switch(k)
    {
        case 0:k="SUN";
        break;
        case 1:k="MON";
        break;
        case 2:k="TUE";
        break;
        case 3:k="WED";
        break;
        case 4:k="THU";
        break;
        case 5:k="FRI";
        break;
        case 6:k="SAT";
        break;
    }
    return k;
}

HTML5 Clock -2

HTML5 Animated Clock:

Download the .zip file from google drive

Download

Javascript Code- Magic Square Generator

HTML code to generate an odd-Magic Square:

Magic Square is an arrangement of consecutive numbers such that the sum of elements of each column each row and along the diagonals are the same.
An odd sized magic square can be generated by using javascript

HTML part is:

<html>

<head>

<title>MAgic SQuaRe</title>

<style>

.box

{

font-weight:bold;

font-size:50px;

text-align:center;

outline:black solid thick;

}

</style>

</head>

<body>

<table id="table" border="2"></table>

<script>

....

</script>

</body>

</html>

Script part is:

for(t=0;;t++)
{
var n=prompt("Enter the dimension");
if(n%2!=0&&n>2) break;
else alert("MAgic Square cannot be made");
}
var last=n*n;
var a=[];

for(m=0;m<n;m++)
a[m]=[];


var i=0;
var j=Math.floor(n/2);;

for(var c=1;c<=last;c++)
{
 if(i<0)  i=n-(-i);
 if(i>=n) i=i-n;
 if(j<0)  j=n-(-j);
 if(j>=n) j=j-n;

 a[i][j]=c;

 if(c%n==0)
 {
  i++;
 }
 else
 {
  i--;
  j++;
 }
  
}
document.write("<table border='2'>");
for(k=0;k<n;k++)
{
document.write("<tr>");

 for(l=0;l<n;l++)
 {
  document.write("<td class='box' width='60' height='60'>"+a[k][l]+"</td>");
 }
 document.write("</tr>");
}
document.write("</table>");

HTML5 Clock

Animated HTML5 Clock .......

Download the .zip file from google drive

Download

Shutter

Likes Doesn't Matter... Looks Does

Menu

Thursday, 30 April 2015

Web UI Icons #1

Thursday, 19 February 2015

UI Orb Loader

Green UI Loader for Web Designers

Sunday, 24 August 2014

ToWords Javascript File - Convert numbers to Words

Sunday, 20 April 2014

AA Menu Maker script

Tuesday, 25 March 2014

AAMath-Function file (Updated)

Saturday, 22 March 2014

HTML5 Clock-Sci-Fi-Tech

Saturday, 15 March 2014

HTML5 Clock4

Wednesday, 5 March 2014

HTML5 Clock-3 [Code]

Sunday, 2 March 2014

HTML5 Clock -2

Javascript Code- Magic Square Generator

HTML5 Clock

Popular Posts

Blog Archive

Find Us On Facebook

Photoshop Hair & Makeup Tutorial