Design Timeline using CSS and Jquery

Timeline design is the current web trend that visualizes the data in an interesting way. Today I want to discuss about how to design a timeline in a simple way with JSON data feed , that using CSS pseudo elements such as:before and :after. Pseudo elements are used to apply special effects to selectors. This post is a combination of my previous post, please take a quick look at this demo and try demo script with your WAMP server.

csstimeline PHP and ASP

The ::before selector inserts content before the content of the selected element(s).

CSS Code

#updates
{
position:relative;
padding:20px 0px 20px 0px;
}
#updates:before
{
content: ”;
position: absolute;
top: 0px;
bottom: 0px;
width: 5px;
background: #999999 ;
}
.timeline_square
{
width:12px;
height:12px;
display:block;
position: absolute;
left:-4px;
border-top:3px solid #e8eaed;
border-bottom:3px solid #e8eaed;
margin-top:-8px;
}

Status Update HTML Code
Check my previous postStatus Message Design with CSS
<div class=”stbody”>
<span class=”timeline_square color1″></span>
<div class=”stimg”><img src=”profile.jpg” /></div>
<div class=”sttext”>
<span class=”stdelete” title=”Delete”>X</span>
<b>Srinivas Tamada</b><br/>
9lessons Programming Blog
<div class=”sttime”>10 seconds aga.</div>
<div class=”stexpand”>
//Youtube IFrame Code
</div>
</div></div>
users.json
This contains Users data feed, you can generate this using PHP code.
{
Messages“:[
{
“user”:”Srinivas”,
“message”:”9lessons Programming Blog http://www.9lessons.info . “,
“avatar”:”srinivas.jpg”,
“embed”:””,
“time”:”16 seconds ago”
},
{
“user”:”Arun”,
“message”:”Everything is possible. “,
“avatar”:”arun.jpg”,
“embed”:””,
“time”:”18 seconds ago”
},
{
“user”:”Joker”,
“message”:”If you are good at something, never do it for free”,
“avatar”:”joker.png”,
“embed”:”<iframe height=’315′ src=’//www.youtube.com/embed/FalHdi2DkEg’ width=’560′></iframe>”,
“time”:”28 seconds ago”
},
…………..
…………..
…………..
]
}
index.html
Contains Jquery and JavaScript code, here $.getJSON parse the JSON data object.
<script src=”js/jquery.min.js”></script>
<script src=”js/jquery.linkify.min.js”></script>
<script src=”js/jquery.livequery.js”></script>
<script>
$(document).ready(function()
{//Formatting the text that contains URLs (text to link)
$(“.sttext”).livequery(function ()
{
$(this).linkify({ target: “_blank”});
});

//Parsing JSON object.
$.getJSON(“users.json”, function(data)
{
var totalCount=5;
var jsondata=”;
$.each(data.Messages, function(i, M)
{
//Generating random numbers for different dot colors
var num = Math.ceil(Math.random() * totalCount );
jsondata +='<div class=”stbody”>’
+'<span class=”timeline_square color’+num+'”></span>’
+'<div class=”stimg”><img src=”‘+M.avatar+'” /></div>’
+'<div class=”sttext”><span class=”stdelete”>X</span>’
+'<b>’+M.user +'</b><br/>’
+M.message+'<div class=”sttime”>’+M.time
+'</div><div class=”stexpand”>’+M.embed+'</div></div></div>’;
});
$(jsondata).appendTo(“#updates”);
});

//Delete record
$(‘body’).on(“click”,”.stdelete”,function()
{
var A=$(this).parent().parent();
A.addClass(“effectHinge”);
A.delay(500).fadeOut(“slow”,function(){
$(this).remove();
});
});});
</script>
//HTML Code
<div id=”updates”></div>

Deleting record animation effect, please check my previous post CSS3 Animation Effects with Keyframes

CSS code
Random colors for timeline square points.

.color1
{
background-color:#f37160
}
.color2
{
background-color:#50b848
}
.color3
{
background-color:#f39c12
}
.color4
{
background-color:#0073b7
}
.color5
{
background-color:#00acd6
}
.effectHinge
{
animation:hinge 1s;
-webkit-animation:hinge 1s; /* Safari and Chrome */
}

 

custom Audio Player using Jquery and HTML5

Today I want to discuss how to publish a voice recording messages on newsfeed using Jquery and HTML5 with custom HTML5 audio player. Take a quick look at the live demo, make sure use the microphone for better result.

Database
Newsfeed table contains all the user update details.

CREATE TABLE newsfeed(
id INT PRIMARY KEY AUTO_INCREMENT,
userUpdate TEXT,
user_id_fk INT,
audioMessage TEXT,
status ENUM(‘0′,’1’) DEFAULT ‘1’);

JavaScript
You have to include all these JavaScript library files.

<script src=”recorderControl.js”></script>
<script src=”js/jquery.min.2.1.js”></script> //Jquery
<script src=”js/jquery.stopwatch.js”></script> //Jquery Stop Watch
<script src=”recorder.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

—–
—–
—–

});
</script>

Custom Audio Player HTML Code
HTML code for custom designed audio player, here the actual HTML5 player is in hidden mode. Number 10 refers to user’s session id.
<div class=”audioContainer”>
<div class=”audioProgress” id=”audioProgress10′” style=”width:0px”></div>
<div class=”audioControl audioPlay” rel=”play” id=”10“></div>
<div class=”audioTime” id=”audioTime10′”>00.00</div>
<div class=”audioBar”></div>
<audio preload=”auto” src=”data:audio/mp3;base64,//sUxAAABAArMFRhgA..” type=”audio/mpeg” class=”a” id=”audio10′”><source></audio>
</div>
Audio Player CSS
Focus on colored CSS properties.
audio{display:none}
.audioContainer
{
height:50px;width:250px;
border:solid 1px #dedede;
position:relative;
}
.audioProgress
{
height:50px;float:left;background-color:#f2f2f2;z-index:800
}
.audioControl
{
position: absolute;float:left;width:52px;height:48px;;
}
.audioTime
{
position: absolute;width: 45px;height: 20px;margin-left:199px;float:right;
}
.audioBar
{
height: 3px;
background-color: #cc0000;
position: absolute;width: 147px;margin-left: 53px;
}
.audioPlay
{
background:url(‘../images/play.png’) no-repeat
}
.audioPause
{
background:url(‘../images/pause.png’) no-repeat
}
Audio JavaScript
Contains JavaScript code $(‘body’).on(‘click’,’.audioControl’, function()audioControlis the CLASS name of the DIV tag. Using $(this).attr(“id”) calling the player ID.
// Utility method that will give audio formatted time
getAudioTimeByDec = function(cTime,duration)
{
var duration = parseInt(duration),
currentTime = parseInt(cTime),
left = duration – currentTime, second, minute;
second = (left % 60);
minute = Math.floor(left / 60) % 60;
second = second < 10 ? “0”+second : second;
minute = minute < 10 ? “0”+minute : minute;
return minute+”:”+second;
};

// Custom Audio Control using Jquery
$(“body”).on(“click”,”.audioControl”, function(e)
{
var ID=$(this).attr(“id”);
var progressArea = $(“#audioProgress”+ID);
var audioTimer = $(“#audioTime”+ID);
var audio = $(“#audio”+ID);
var audioCtrl = $(this);
e.preventDefault();
var R=$(this).attr(‘rel’);
if(R==’play’)
{
$(this).removeClass(‘audioPlay’).addClass(‘audioPause’).attr(“rel”,”pause”);
audio.trigger(‘play’);
}
else
{
$(this).removeClass(‘audioPause’).addClass(‘audioPlay’).attr(“rel”,”play”);
audio.trigger(‘pause’);
}// Audio Event listener, its listens audio time update events and updates Progress area and Timer area
audio.bind(“timeupdate”, function(e)
{
var audioDOM = audio.get(0);
audioTimer.text(getAudioTimeByDec(audioDOM.currentTime,audioDOM.duration));
var audioPos = (audioDOM.currentTime / audioDOM.duration) * 100;
progressArea.css(‘width’,audioPos+”%”);
if(audioPos==”100″)
{
$(“#”+ID).removeClass(‘audioPause’).addClass(‘audioPlay’).attr(“rel”,”play”);
audio.trigger(‘pause’);
}
});
// Custom Audio Control End
});

Controlling audio controls with Jquery trigger()

Record Button HTML Code
Contains simple HTML code.

<img src=”images/Microphone.png” id=”recordButton” class=”recordOff”>
<span id=”recordHelp”>Allow your microphone.</span>
<div id=”recordContainer” class=”startContainer”>
<div id=”recordTime”> <span id=”sw_m”>00</span>:<span id=”sw_s”>00</span></div>
<div id=”recordCircle” class=”startRecord”><div id=”recordText”>Record</div></div>
</div>
CSS
#recordCircle
{
margin: 0px auto;
font-weight: bold;
cursor: pointer;
width: 100px;
height: 100px;
text-align: center;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Record Button JavaScript
This script calls record.js for recording the audio.
$(“body”).on(‘click’,’.recordOn’,function()
{
$(“#recordContainer”).toggle();
});
//Record Button
$(“#recordCircle”).mousedown(function()
{
$(this).removeClass(‘startRecord’).addClass(‘stopRecord’);
$(“#recordContainer”).removeClass(‘startContainer’).addClass(‘stopContainer’);
$(“#recordText”).html(“Stop”);
$.stopwatch.startTimer(‘sw’); // Stopwatch Start
startRecording(this); // Audio Recording Start
}).mouseup(function()
{
$.stopwatch.resetTimer(); // Stopwatch Reset
$(this).removeClass(‘stopRecord’).addClass(‘startRecord’);
$(“#recordContainer”).removeClass(‘stopContainer’).addClass(‘startContainer’);
$(“#recordText”).html(“Record”);
stopRecording(this); // Audio Recording Stop
});
record.js
Modified and included following code in record.js for storing the audio data in Base64 format.
function uploadAudioBase64(audiosrc)
{
var dataString =’audiosrc=’+audiosrc;
$.ajax({
type: “POST”,
url: “uploadAudio.php”,
data: dataString,
cache: false,
success: function(html)
{
var ID = Number(new Date()); //Timestamp
var A='<div class=”audioContainer”>’
+'<div class=”audioProgress” id=”audioProgress’+ID+'” style=”width:0px”></div>’
+'<div class=”audioControl audioPlay” rel=”play” id=”‘+ID+'”></div>’
+'<div class=”audioTime” id=”audioTime’+ID+'”>00.00</div>’
+'<div class=”audioBar”></div>’
+'<audio preload=”auto” src=”‘+audiosrc+'” type=”audio/mpeg” class=”a” id=”audio’+ID+'”><source></audio>’
+'</div>’;
var B='<div class=”stbody”><div class=”stimg “>’
+'<a href=”https://labs.9lessons.info/srinivas”><img src=”http://www.gravatar.com/avatar/c9e85bd3f889cc998dd1bb71d832634b?d=mm&s=230″ class=”big_face ” alt=”You” ></a></div>’
+'<div class=”sttext”><div class=”sttext_content”><span class=”sttext_span”><b><a href=”https://labs.9lessons.info/srinivas”>You</a></b> </span>’
+A
+'</div></div></div>’;
$(“.recordingslist”).prepend(B);
}
});
}
updateAudio.php
Inserting the audio Base64 data into newsfeed along with user session id.
<?php
include(‘db.php’);
$session_id=’1′;
if($_POST[‘audiosrc’] && !empty($session_id))
{
$audiosrc=$_POST[‘audiosrc’];
$query=mysqli_query($db,”INSERT INTO `newsfeed` (`user_id_fk`, `audioMessage`) VALUES ( ‘$session_id’, ‘$audiosrc’)”)or die(mysqli_error($db));
}
?>
This way data will store audio data into newsfeed table.
Audio Recording with Jquery and HTML5 PHP and ASP
db.php
Database connection you have to modify username, password and database values.
<?php
define(‘DB_SERVER’, ‘localhost’);
define(‘DB_USERNAME’, ‘username’);
define(‘DB_PASSWORD’, ‘password’);
define(‘DB_DATABASE’, ‘database’);
$db = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD,DB_DATABASE) or die(mysqli_connect_error());
$path = “uploads/”; //Images upload folder
?>

Make Your Design Business More Efficient using 6 Tools

Whether you run a design agency or operate as a freelancer, you quickly learn the value of efficiency. The slower you and your team members are, the more time wasted on badly-designed processes, the less work you get done – and the less money you make. You want to make sure your dirty work is quick and easy, in order to clear more time for what actually matters. The good news are that you’ve got plenty of tools to help you do that. Here are six you’ll surely find useful.

1. Webydo
Webydo is an intuitive and easy to use tool for building websites without having to write code. You can use it to execute your vision quickly and efficiently from scratch, with all the features and responsivity your client requires. It creates sites that are even simple to manage in the long run, so you can leave your clients with a fully operating, immediately published website which they can easily update with new material whenever they want to.one PHP and ASP

2. Flow
Flow is a great task management tool for small teams. It helps you keep up with all the work being done by all of your colleagues at once. You’ll find it easy to keep updated with the team and always be on top of deadlines and workloads. The nice thing is that Flow is a good middle ground: not too simplistic (so better than a sticky note with a to-do list) but not too heavy either (so might fit you better than Sharepoint.)2 PHP and ASP

3. Google Analytics
This one’s a no-brainer: Google Analytics is a go-to tool for many web designers and managers. It’s where you get all the info you need in one place about how your website’s doing, who is visiting it and how often, where they’re coming from, how much revenue you’re making, what you conversion rate is and so much more. Google, as everyone is slowly realizing, sees all – and with Google Analytics you can catch a glimpse too.3 PHP and ASP

4. Niice
Remember wasting hours gazing at Pinterest boards? Well Niice is all about creative inspiration too, with a more professional twist. If you’re stuck and need to look at what others are doing, if you need new directions for your work or even if you just enjoy looking at beautiful things other people do on Behance, Dribbble and such, go visit Niice and a good (and inspiration-full) time is guaranteed.4 PHP and ASP

5. Primer
Primer is one of those tools which are so, so simple but at the same time brilliantly useful. It lets you paste your HTML into a window, and based on that piece of HTML, outputs blank CSS based on the same classes and IDs you used. It will create your basis for you and let you develop it from there, which is great for those of us who like starting with markups and applying styling later. It also happens to have a comfortingly simplistic design 5 PHP and ASP

6. InVision
InVision is a terrific tool for designing prototypes and collaborating with team members. In not too many clicks it will transform your basic designs and vision into interactive prototypes with buttons, animations, clickability and everything else the site needs, without having to use HTML. It’s a useful first step on the way to the final, meticulously designed website that your agency so loves to deliver.6 PHP and ASP

Manage Your Smartphone Easily with MoboRobo Now

Connection Wizard PHP and ASP

Connection Wizard

Having a Smartphone is not a big deal nowadays. It has become so mainly due to availability of Smartphones that are suitable for different budgets. Although there are a number of exceptions, major issue of low-budget Smartphones is their lower screen size. Albeit the fact that you might not face issues while performing common tasks like listening to music and messaging on WhatsApp, the notable issues will be when you want to manage information in your device such as editing contacts, downloading applications massively, managing media files including videos and music etc.

It is likely that these managing sections will be a problem even in a Smartphone with big screen size. MoboRobo is one of effective solutions to solve this issue of small screen size, and is available for Smartphones running on Android and iOS. Of course, MoboRobo has proved its effectiveness since its launch and we’ll go deep into this application so that you can understand why and how should you use MoboRobo to simplify process of Smartphone management. First, we will have a brief and basic introduction to MoboRobo as one of the best Smartphone management software. As we go further into MoboRobo, we can understand its multipurpose behaviour.
Basics You Should Know about MoboRobo
Well, if you are just considering MoboRobo as an application, we can label it a Smartphone management tool, which does offer support for devices running on Android and iOS (iPhones). If you have the latter device but do not have a Mac to get the full-fledged management experience, MoboRobo will be damn useful for you. In addition, even if the Android Smartphone you have does not have a dedicated management tool, you can understand its value. And, the best part of MoboRobo is that it is completely free to use. Furthermore, MoboRobo is useful for both Smartphone users and vendors. There are a number of tasks that you can complete using MoboRobo, ranging from basic level to expert. Now, we’ll have a look on notable tasks you can accomplish using this Smartphone management tool.What to do using MoboRobo
As we have mentioned earlier, you can use MoboRobo for a number of purposes. Some of those notable tasks are as follows.
Make Your Data Secure
If you are one who runs experiments in your Smartphones, more probably in an Android device, data backup feature of MoboRobo is a wonderful solution, as it lets users backup and restore information in an easy way. Backing up your data is an easy task in MoboRobo, and you can do it right from home screen of MoboRobo. Using this feature, you’ll be able to back up variety of information; it includes contacts, call logs, music files, themes, wallpapers, messages as well as images. You can store these backup files in a secure place in PC and use it to restore if you come to lose data from device in any manner. In addition to this, ability to import and export contacts in a convenient format will help users transfer contacts from one platform to another — Android to iPhone or vice versa.
Manage your Applications
More often than not, downloading applications from Google Play Store and installing them in your Smartphone is an extremely tough task, especially if you are having a slow internet connection with you. Moreover, when it comes to Smartphone vendors, it will be a tough task to satisfy those customers, who want you to install standard apps in the device before they buy it. However, MoboRobo is an effective answer for both these issues. The section to manage applications in MoboRobo is quite helpful in installing multiple applications in your device right from your PC screen. Likewise, you have an option to transfer applications from phone memory to MicroSD card if you have both in your device. The most noticeable advantage of this application management section is that you will be able to save hell lot of data, as you will not have to spend your 3G data for downloading applications. To make these things simpler, MoboRobo consists of an integrated application store, from which users can download popular and useful apps in a matter of seconds or minutes.Contact Management & Messaging
If you have found contact management in device a tough task, this feature will help you a lot! In the contact section, you can find an option to edit contacts. When compared to your small screen, editing contacts using MoboRobo is an easy task, as you can use your keyboard and mouse to perform this task.

Just like the case of contacts, message section of MoboRobo is helpful in managing your SMSs right from your screen of your PC in such a way that you won’t have to get up and take Smartphone in order to reply to your texts. Replies will be available in the application instantaneously. Altogether, this section of MoboRobo is worth praising, indeed.

Enrich your Smartphone UI through MoboLive
MoboLive is an Android launcher that comes from same family of MoboRobo. If you have installed MoboLive in your device, you can use this Smartphone management tool to download and use MoboLive themes in your device. With no doubt, this section of MoboRobo is something superb as far as customizability of the Android launcher is a part of your concern.

Multiple Ways to Connect
It is not necessary that you have to connect your long USB cable to connect your Smartphone to PC, because it offers a feature to connect your PC to device using Wi-Fi connection. Obviously, it will be great if you are looking for fewer wires in your life.

Our Verdict
We were damn impressed by this application, as a great tool to manage your Smartphone! Particularly, we loved the intuitive user interface of MoboRobo. However, we are eager to know your opinion about this tool.

Data PHP and ASP

Data

Vanilla JS Browser Default Javascript

vanilla PHP and ASP

vanilla PHP and ASP

Start Vanilla – The Document Ready Event
Code runs after the browser finishes loading the document, including images and banner ads.

document.addEventListener(‘DOMContentLoaded’, function()
{
//JavaScript methods go here.
});

Click Event
Contains plain JavaScript code, here linkID is the ID name of anchor tag. You can prevent the default behavior by calling e.preventDefault();

document.addEventListener(‘DOMContentLoaded’, function()
{
//Click Event Code
document.querySelector(“#linkID”).addEventListener(“click”, function(e)
{
alert(“Click event triggered”);
e.preventDefault();
});});//HTML Code
<a href=”#” id=”linkID”>Click Event</a>

Hide & Show Div
The divBlock slowly disappears when clicked hideLink.

document.querySelector(“#hideLink”).addEventListener(“click”, function()
{
document.getElementById(‘divBlock’).style.display = ‘none’
});document.querySelector(“#showLink”).addEventListener(“click”, function()
{
document.getElementById(‘divBlock’).style.display = ”
});//HTML Code
<a href=”#” id=”hideLink”>Hide</a> — <a href=”#” id=”showLink”>Show</a>
<div id=”divBlock”>

</div>

Add & Remove Class
Applying and Removing a HTML Class.

CSS Code
You have to include following CSS code within the tag HEAD of the document

.hidden{display:none}

You can use following code with in the function HTMLElement.classList, this allows to add or remove the class of an element.

document.getElementById(‘divBlock’).classList.add(‘hidden’);

document.getElementById(‘divBlock’).classList.remove(‘hidden’);

//HTML Code
<a href=”#” id=”hideLink”>Hide</a> — <a href=”#” id=”showLink”>Show</a>
<div id=”divBlock”>

</div>

Toggle Class
This method simply toggles the visibility of elements, here the code is adding and removing the class hidden.

document.querySelector(“#toggle”).addEventListener(“click”, function()
{
document.getElementById(‘divBlock’).classList.toggle(‘hidden’);
});
//HTML Code
<a href=”#” id=”hideLink”>Toggle</a>
<div id=”divBlock”></div>

Mouse Over & Mouse Out
Changing the div behavior based on mouse moments.

HTML Code

<div class=”grid”></div>
<div class=”grid”></div>
<div class=”grid”></div>
<div class=”grid”></div>

JavaScript
Here grid is the class name of div tags. Using this calling the selected DOM element.

//MouseOver
[].forEach.call(document.querySelectorAll(“.grid”), function(el) {
el.addEventListener(“mouseover”, function() {
this.classList.add(‘hover’);
});
});//MouseOut
[].forEach.call(document.querySelectorAll(“.grid”), function(el) {
el.addEventListener(“mouseout”, function() {
this.classList.remove(‘hover’);
});
});

CSS Code

.grid
{
width:180px; height: 100px;
background-color:#333333;display: block;cursor:pointer;
float:left;margin-right: 10px
}
.hover
{
background-color: #cc0000 !important
}

Live POST Update and Delete Records with Vanilla JS

A simple demo project, you can instantly upload and delete news feed without refreshing the page.

HTML Code
Update box with news feed result. Live Demo

<textarea id=”updateText”></textarea>
<input type=”button” id=”updateButton” value=”POST” /><div id=”newsFeed”>
//Record One
<div class=”feed”>
The Wall Script http://thewallscript.com
<a href=”#” class=”delete”>X</a>
</div>
//Record Two
<div class=”feed”>
9lessons Blog http://9lessons.info
<a href=”#” class=”delete”>X</a>
</div>
……..
……..
……..
</div>

Ajax Post
Contains JavaScript code querySelector(“#updateButton”).addEventListener(“click”, function(){}updateButton is the ID name of the button. Usingdocument.getElementById(“updateText”).value; calling update textbox value. I did simplified a function called vanillaGetPost, you will find this in vanillaFunctions.js. Take a look at the Live Demo

//Update content.
var newsFeed=document.getElementById(‘newsFeed’);
document.querySelector(“#updateButton”).addEventListener(“click”, function()
{
var p = document.createElement(“div”),
newsFeed = document.getElementById(“newsFeed”),
content = document.getElementById(“updateText”).value;
var html ;var data=’update=’+content;
vanillaGetPost(‘POST’, ‘post.php’, data, function(data)
{
var updateText= document.getElementById(“updateText”);
html='<a class=”delete” href=”#” onclick=”deleteButton(this)” title=”Delete”>X</a>’;
p.innerHTML = data+html; //User update with delete button HTML code.
newsFeed.insertBefore(p, newsFeed.firstChild);
vanillaFadeEffect(‘fadeIn’,newsFeed.firstChild, 1000);
updateText.value=”;
updateText.focus();
});});

post.php
You have to write database connection for inserting update.

<?php
if($_POST[‘update’])
{
echo htmlentities($_POST[‘update’]);
// Write database connection here.
}
?>

Delete Records
Using this.parentNode calling parent DIV DOM element and applying fadeOut effect.

//Delete click event
[].forEach.call(document.querySelectorAll(“.delete”), function(el)
{
el.addEventListener(“click”, function() {
var parent = this.parentNode;
vanillaFadeEffect(‘fadeOut’,parent, 1000); //vanillaFunctions.js
});
});

Final JavaScript Code
You can include all of the code here.

<script src=”js/vanillaFunctions.js”></script>
<script>
document.addEventListener(‘DOMContentLoaded’, function()
{
//Textarea focus
window.onload = function() {
document.getElementById(“updateText”).focus();
};var newsFeed=document.getElementById(‘newsFeed’);//Delete click event
…….
…….
…….

//Update content.
…….
…….
…….

});

function deleteButton(id)
{
var parent = id.parentNode;
//Delete Ajax
vanillaFadeEffect(‘fadeOut’,parent, 1000);
}
</script>

Download the script, you will find out vinillaFunctions.js

vanillaGetPost Function
Ajax function for POST and GET methods.

function vanillaGetPost(type, url, data, success)
{
if(type==’GET’)
{
url=url+’?’+data;
data=”;
}
var r = window.XMLHttpRequest ? new XMLHttpRequest() : newActiveXObject(“Microsoft.XMLHTTP”);
r.open(type, url, true);
r.onreadystatechange = function () {
if (r.readyState > 3 && r.status === 200){
success(r.responseText);
}
};
r.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
r.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
r.send(data);
return r;
}

vanillaFadeEffect Function
FadeIn and FadeOut animation effect.

function vanillaFadeEffect(effect, element, speed)
{
var A=0;
if(effect === ‘fadeOut’)
A=1;if ( ! element.style.opacity)
element.style.opacity = parseInt(A);var start = null;
window.requestAnimationFrame(function animate(timestamp) {
start = start || timestamp;
var progress = timestamp – start;

if(effect === ‘fadeOut’)
element.style.opacity = 1 – progress / speed;
else
element.style.opacity = progress / speed;

if (progress >= speed) {
if(effect === ‘fadeOut’)
element.style.display = ‘none’;
else
element.style.display = ”;

}
else
{
window.requestAnimationFrame(animate);
}
});

}

Improve Your Website loading Speed by Using Google Page Speed

Website loading speed can make a big impact the success of a website. In Google standards if your pages are loading slowly, you will lose the organic search traffic. Google is offering a powerful tool called PageSpeed Insights, that can test your website page speed and suggest you the instructions. Competitors hate each other, Google hates Facebook widgets such as Like Box, Facebook Page etc. This post will explain you how to solve all these Page Speed Insights problems.

Improve Your Website loading Speed by Using Google Page Speed PHP and ASP

Google Page Speed