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
?>

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);
}
});

}