Kode CSS Untuk Modal Overlays Ketika Loading Proses

Modal Overlays di pergunakan untuk memblok layar sementara pada halaman web,
secara teknis layar modal ini berada pada posisi layer yang lainnya, dengan demikian layer-layer dibawahnya tidak bisa di akses. Mengapa ini di pakai, adalah memberi tahukan sedang ada proses kepada user, sehingga user dapat menunggu hingga proses yang berjalan selesai.

Bagaimana membuatnya … berikut adalah contoh kode untuk membuat modal overlays dengan menggunakan css dan jquery.

Kode CSS yang digunakan adalah sebagai berikut :

#loading-img {
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
height: 100%;
z-index: 20;
}

.overlay {
background: #e9e9e9;
display: hide;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

Kode JQuery yang digunakan adalah sebagai berikut :

$(“#button”).click(function () {
$(“.overlay”).show();
});
Dan, kode HTML yang digunakan adalah sebagai berikut :

<[remove_this]div class=”overlay”>
<[remove_this]div id=”loading-img”><[remove_this]/div>
<[remove_this]/div>

semoga bermanfaat, wassalam.

Advertisements

Membuka pdf online di website kita dengan menggunakan viewerjs

viewerjs

Ada berbagai cara agar file pdf yang ada pada sebuah website bisa di baca secara online tanpa mendownload terlebih dahulu. salah satu caranya adalah dengan menggunakan viewer js. yaitu sebuah plugin atau library javascript yang dibuat khusus untuk melakukan pembacaan file pdf salah satunya.  penggunaan nya cukup mudah. yaitu download telebih dahulu file zipnya di bawah ini.

http://www.4shared.com/zip/wCJOmIGYba/ViewerJS-latest.html

setelah di download, extract file zip. lalu copas ke web yang akan dibangun. kemudian cara penggunaannya adalah dengan memasangkan alamat file pdf di alamat viwerjs. seperti pada contoh ini.

http://website-endang.com/viewerjs/index.html#http://website-endang.com/uploads/file.pdf

cukup mudah, semoga bermanfaat. wassalam.

Apa itu parallax dalam istilah web ?

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

endang-gambaran-cara-kerja-parallax

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }    

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);        
    

Kode untuk membuat posisi box pencarian agar tetap di atas

fixed-search-menu

 

Betikut cara untuk membuat kode pencarian berada diatas tidak ikut scroll dan tetap berada diatas.

 

Kode HTML

< div class="wrap" id="wrap"> 
  
  < header class="top-header"> 
    < span class="menu-icon"> ☰< /span> 
  < /header> 
  
  < div class="search"> 
    < input type="search" placeholder="Search or type URL" /> 
  < /div> 
  
  < div class="top"> 
    < div class="hero"> < /div> 
  < /div> 
  
  < main> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
  < /main> 
  
< /div> 

Kode CSS

* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

Kode JS/ Jquery

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

Menangani Ajax PHP Cross-Origin Request Blocked

CORS (Cross-Origin Resource Sharing) merupakan protokol yang dibangun di atas HTTP untuk memberikan akses Javascript yang terdapat di sebuah halaman sebuah situs untuk mengakses metode di situs lain.

skema-ajax-request-json-html-php

Dalam skema diatas,untuk dapat menjalankan proses CORS, supaya permintaan ajax jquery untuk Cross-Origin tidak di block, pada bagian server php harus ada kode yang ditambahkan dibagian paling atas kode.

Penulisan kode tambahan di php agar semua situs bisa mengakses adalah sebagai berikut.

<?php
header(“Access-Control-Allow-Origin: *”);
header(‘Access-Control-Allow-Methods: GET, POST’);

Sedangkan penulisan kode tambahan di php agar hanya situs tertentu bisa mengakses adalah sebagai berikut.

<?php
header(“Access-Control-Allow-Origin: http://example.com&#8221;);
header(‘Access-Control-Allow-Methods: GET, POST’);

Kurang lebih seperti itu, jika masih terdapat kesalahan silahkan dikoreksi. Terimakasih.

Cara CSS Membuat DIV Posisi Berada di Bawah Kanan Layar

endangcahyapermana-css-div-posisi-bawah-kanan
Div Box

Ketika kita buka halaman website, sering kita lihat ada kotak kecil yang berada di posisi bawah sebelah kanan layar. Kotak tersebut kadang berisi iklan, control navigasi atau layanan live chat atau chating langsung via website. Hal tersebut sungguh menyuguhkan tampilan website menjadi lebih interaktif dengan pengunjung. Namun, bagaimana caranya untuk membuatnya di halaman web html.

Setelah googling akhirnya menemukan cara untuk membuatnya, yaitu dengan menggunakan kode css dan jquery. Lengkap kode nya adalah sebagai berikut.

Didalam kode CSS adalah sebagai berikut

<style type=”text/css”>
.screen {
text-align: center;
background: #00DD88;
background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
border-radius: 30px 30px 30px 30px;
margin: 5px 0 10px 15px;
position: absolute;
right: -980px;
display: none;
z-index: 100;
}
</style>

Didalam kode Javascript atau Jquery adalah sebagai berikut

$(‘.screen’).animate({
opacity: 1,
right: “50px”,
bottom: “10px”,
height: “toggle”
}, 1000, function() {
// Animation complete.
}).css(‘position’,’fixed’);

Dan kode html div box adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title>Endang</title>
 https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
 <style type="text/css">
 .screen {
 text-align: center;
 background: #00DD88;
 background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
 border-radius: 30px 30px 30px 30px;
 margin: 5px 0 10px 15px;
 padding: 15px;
 position: absolute;
 right: -980px;
 display: none;
 z-index: 100;
 color: #fff;
 }
 </style> 
</head>
<body>
 < div class='screen' >
 welcome to my website
 < /div >
 
 $('.screen').animate({
 opacity: 1,
 right: "50px",
 bottom: "10px",
 height: "toggle"
 }, 1000, function() {
 }).css('position','fixed');
  
</body>
</html>

 

http://www.4shared.com/rar/MFqPXbD9ce/Div_Box_Posisi_Bawah_Kanan_-_e.html

Drag and drop menggunakan jquery ui

Drag and drop merupakan cara memindahkan sebuah komponen dari satu lokasi ke lokasi lain dalam halaman html. Untuk melakukan drag and drop tersebut dapat menggunakan libarary dary Jqueryui. adapun cara penggunaan adalah sebagai berikut :

Kode untuk di bagian head :

<link rel=”stylesheet” href=”/jquery-ui-1.10.2/themes/base/jquery.ui.all.css”>
/jquery-ui-1.10.2/jquery-1.9.1.js
/jquery-ui-1.10.2/ui/jquery.ui.core.js
/jquery-ui-1.10.2/ui/jquery.ui.widget.js
/jquery-ui-1.10.2/ui/jquery.ui.mouse.js
/jquery-ui-1.10.2/ui/jquery.ui.draggable.js
/jquery-ui-1.10.2/ui/jquery.ui.position.js
/jquery-ui-1.10.2/ui/jquery.ui.resizable.js
/jquery-ui-1.10.2/ui/jquery.ui.button.js
/jquery-ui-1.10.2/ui/jquery.ui.dialog.js
/jquery-ui-1.10.2/ui/jquery.ui.datepicker.js
/jquery-ui-1.10.2/ui/jquery.ui.autocomplete.js

$(function() {
$( “#sortable” ).sortable();
$( “#sortable” ).disableSelection();
});
$(document).ajaxSuccess(function() {
$( “#sortable” ).sortable();
$( “#sortable” ).disableSelection();
});

Di bagian body html, kode list adalah sebagai berikut :

<ul id=”sortable”>
<li class=”ui-state-default”>
<span class=”ui-icon ui-icon-arrowthick-2-n-s”></span>
<input type=”hidden” name=”link_order_no[]” value=”1″ />
</li>
<li class=”ui-state-default”>
<span class=”ui-icon ui-icon-arrowthick-2-n-s”></span>
<input type=”hidden” name=”link_order_no[]” value=”2″ />
</li>
<li class=”ui-state-default”>
<span class=”ui-icon ui-icon-arrowthick-2-n-s”></span>
<input type=”hidden” name=”link_order_no[]” value=”3″ />
</li>
</ul>

kurang lebih seperti itu, untuk penggunaannya jangan lupa mendownload jqueryui terlebih dahulu.

Jquery Ajax Post

Proses mengirim dan menampilkan  data pakai ajax post dari framework jquery atau javascript . penggunaannya sederhana, silahkan copy paste kode berikut. Namun,  jangan lupa sebelumnya pasang terlebih dahulu file jquery nya di dalam html.

$.ajax({
url: “/test/index”,
type: “post”,
date: “foo=’bar'”,
success: function (response) {
alert(response);
}
});

Silahkan modifikasi berdasarkan kebutuhan.