Cara buat time ago di javascript
Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat time ago di javascript,
berikut ini syntaxnya.
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="http://timeago.yarp.com/jquery.timeago.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("time.timeago").timeago();
});
</script>
<time class="timeago" datetime="1991-05-04T09:24:17Z">May 04, 1991</time>
Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/
Cara memotong kata / teks / kalimat / paragraf
Assalamu'alaikum wr wb
kali ini saya akan share bagaimana Cara memotong kata / teks / kalimat / paragraf,
berikut ini syntaxnya.
<?php
$num_char = 50;
$text = 'Inspired from this impressive scene, designer stelios Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.';
echo substr($text, 0, $num_char) . '...';
?>
Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/
Cara buat parallax di css tanpa javascript
Assalamu'alaikum wr wb
kali ini saya akan share bagaimana Cara buat parallax di css tanpa javascript,
berikut ini syntaxnya.
<style type="text/css">
/* Tiny reset thingy */
body,html{margin:0;padding:0;}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}
</style>
<main class="wrapper">
<section class="section parallax bg1">
<h1>Such Adorableness</hi>
</section>
<section class="section static">
<h1>Boring</h1>
</section>
<section class="section parallax bg2">
<h1>SO FWUFFY AWWW</hi>
</section>
</main>
Semoga bermanfaat.
https://pangeran-it.blogspot.co.id
Cara buat fungsi pada saat slide carousel berganti
Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat fungsi pada saat slide carousel berganti,
berikut ini syntaxnya.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.item {
height: 300px;
}
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#myCarousel').bind('slide.bs.carousel', function (e) {
// console.log('slide event!');
alert('jalankan fungsi sebelum slide');
});
$('#myCarousel').bind('slid', function (e) {
//console.log("slid event!");
alert('jalankan fungsi setelah slide');
});
</script>
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/