Cara buat modal bootstrap center screen


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat modal bootstrap center screen,
berikut ini syntaxnya.

.modal
{
  position: absolute;
  float: left;
  left: 50%;
  top: 50%;
}

Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/

Cara menambahkan async dan defer javascript di yii2


Assalamu'alaikum wr wb,
kali ini saya akan share Cara menambahkan async dan defer javascript di yii2,
saya contohkan include api dari maps,
berikut ini syntaxnya.

 public $js = [
       'assets3/js/jquery.min.js',
       'assets3/js/bootstrap.min.js',
       ['src'=> 'https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&libraries=places&callback=initAutocomplete', 'async'=>'async', 'defer'=>'defer']     
    ];

Semoga bermanfaat.
http://pangeran-it.blogspot.com/

Cara buat rekomendasi cara perjalanan menuju tujuan melalui input text di google maps


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat rekomendasi cara perjalanan menuju tujuan melalui input text di google maps, disini saya buat tujuannya adalah kota medan,
berikut ini syntaxnya.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="Medan, Kota Medan, Sumatera Utara" />
   <input type="submit" value="Get directions" />
</form>

Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/

Cara mengatasi masalah keamanan https virtual host xampp di chrome


Assalamu'alaikum wr wb,
kali ini saya akan share tentang Cara mengatasi masalah keamanan https virtual host xampp di chrome, hal ini terjadi jika sobat membuat virtual host saat mengerjakan project web di localhost dengan url seperti domain. Semenjak chrome update ke versi terbaru, virtual host yang sebelumnya dibuat akan tidak bisa dibuka dengan pesan security htpps.
Berikut ini solusinya.

Sobat cukup mengganti yang sebelumnya ".dev" menjadi ".local" pada settingan host di folder C:\Windows\System32\drivers\etc dan httpd-vhosts.conf pada C:\xampp\apache\conf\extra.

Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/

Cara mengatur opacity text dari slider menggunakan javascript


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara mengatur opacity text dari slider menggunakan javascript,
berikut ini syntaxnya.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $('#range').change(function() {
                $('#page_contents').attr('style', 'opacity:' + $('#range').attr('value')/100);
            });
    });
</script>

<input id="range" type="range" max='100' min='0' value='100' />

<div id="page_contents">
    <h1>Ini adalah contoh teks sederhana.</h1>
</div>

Semoga bermanfaat.
http://pangeran-it.blogspot.com/

Cara buat background responsive css bahkan saat resize browser


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana cara buat background responsive css bahkan saat resize browser,
berikut ini syntaxnya.

<!DOCTYPE html>
<html>
<head>
<title>Extreme responsive background</title>
<style>
    .overlay{position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.25);z-index:3}
    .background{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff url(https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&s=d40582dbbbb66c7e0812854374194c2e&auto=format&fit=crop&w=750&q=80) center 65% no-repeat;background-size:cover}
    header.wrap{height:-webkit-calc(80vh);height:-moz-calc(80vh);height:calc(80vh);min-height:320px;position:relative;z-index:10}
    .header_section{height:100%;margin:0 0 60px;display:table;width:100%;height:100%;text-align:center}
    .header_section__copy{margin:0 auto;padding:0 40px;display:table-cell;vertical-align:middle}
</style>

<body>


<div class="overlay"></div>
<div class="background"></div>

<header class="wrap">
    <div class="header_section">
        <div class="header_section__copy">
        </div>
    </div>
</header>



</body>
</html>

Semoga bermanfaat.
http://pangeran-it.blogspot.com/