Project Structure:
----------------------------------------------
index.html
<!DOCTYPE html>
<html>
<head>
<title>URLive</title>
<link href="jquery.urlive.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.urlive.js"></script>
<style type="text/css">
body {
font-family:'Segoe UI', 'Open Sans', sans-serif;
max-width:420px;
}
textarea {
height:70px;
width:100%;
}
.urlive-container {
margin-top:15px;
padding:0 0 50px 0;
}
.loading {
display:none;
}
</style>
</head>
<body>
<textarea placeholder="input a URL here">http://www.rampukar.xyz/2016/05/angularjs-crud-phpmysql.html</textarea>
<div class="urlive-container">
<span class="loading">Loading...</span>
</div>
<script type="text/javascript">
$('textarea').on('input propertychange', function () {
$('textarea').urlive({
callbacks: {
onStart: function () {
$('.loading').show();
$('.urlive-container').urlive('remove');
},
onSuccess: function (data) {
$('.loading').hide();
$('.urlive-container').urlive('remove');
},
noData: function () {
$('.loading').hide();
$('.urlive-container').urlive('remove');
}
}
});
}).trigger('input');
</script>
</body>
</html>
-----------------------------------------------------
Demo:
-------------------------------------------
Source: https://github.com/markserbol/urlive
Download: https://app.box.com/s/hfnzkdqgopynm14v4mi3jecq8nf7ymsw
0 comments:
Post a Comment