CSS Affix Plugin (Css Tingkat Lanjutan)

Pernah berkunjung ke sebuah alamat website, terus ketika scroll halaman ada bagian komponen atau elemen web yang ke tutup, tapi ada elemen yang tetep ke bawa-bawa ngikut keatas ikut ke bawah ikut sampai pada posisi tertentu. Nah yang element yang ikut-ikut itu istilahnya dalam web disebut affix.

endang-affix

Apa itu affix plugin? affix plugin yaitu plugin yang berfungsi untuk mengunci(locked) element pada area tertentu pada halaman web.

Bootstrap 3 sudah menyiapkan plugin affix ini. Apa itu bootstrap, anda bisa cari info di google. Kurang lebih seperti ini.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Bootstrap adalah framework HTML, CSS dan Javascript yang sangat populer untuk membangun website yang responsive baik itu di PC atau di Mobile Smartphone.

Untuk contoh pemakaiannya cuplikan penggunaan affix adalah sebagai berikut.

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

untuk menu horizontal

dan

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

untuk menu vertical.

semoga bermanfaat. wassalam.

 

 

Script Css Meletakan Div Posisi Kanan Bawah

Cara untuk membuat div agar posisi dibawah kanan, contoh scriptnya berikut


<html>
<head>
<title>Absolute Positioning</title>
<style rel='stylesheet' type='text/css'>
body {
background: yellowgreen;
}
div {
position: absolute;
background: yellow;
padding: 5px;
width: 100px;
height: 100px;
}
div#bottom-right {
bottom: 0;
right: 0;
border-left: 1px solid black;
border-top: 1px solid black;
background: red;
}
</style>
</head>
<body>
<div>
normal
</div>
<div id='bottom-right'>
Bottom, Right
</div>
</body>
</html>

Cara sederhana membuat div berada di bawah kanan browser dengan css

Untuk membuat posisi div ingin berada di bawah kanan pada browser caranya tidak sulit. contoh kodenya adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Css Position Fixed Bottom</title> 
 <style>
 .nav-fixed {
 background: #FF5722;
 position: fixed;
 bottom: 0;
 right: 0;
 padding: 8px 15px;
 margin-right: 5px;
 color: #fff; 
 }
 .nav-fixed-radius {
 border-radius: 4px 4px 0 0;
 }
 </style>
</head>
<body>
 
</body>
</html>

Jika dilihat pada contoh kode di atas, Kunci attribut yang di pergunakan agar porsisi div dibawah adalah pada atribut position : fixed, bottom: 0, dan right: 0.

silahkan coba sendiri untuk ber eksperimen. wassalam.

Membuat Dropdown Menu On Hover di Bootstrap

Secara default Navigator Menu Atau Dropdown Menu akan memunculkan submenunya ketika diklik. Namun, bagaimana caranya jika Dropdown menu akan muncul ketika mouse berada diatas menu, yakni dengan menambahkan kode javascript berikut.

 

 <[removeSpace]script type="text/javascript">
 $('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
 }, function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
 });
 <[removeSpace]/script>

 

catatan : hapus tulisan [removeSpace]

Ok, semoga bermanfaat, wassalam :-).

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.

Cara install Sass – Scss di windows

endang-sass

Sebelum melakukan instalasi sass, anda harus mendownload aplikasi ruby terlebih dahulu. untuk mendapatkannya anda bisa mendownload melalui link dibawah ini :

http://www.4shared.com/file/jcVQwO8uce/rubyinstaller-231.html

jika sudah didownload buka insall program ruby.exe. ikuti langkah-langkah instalasi seperti pada aplikasi pada umumnya. jika sudah selesai, buka program command line.

lalu ikuti langkah-langkah seperti dibawah ini.

ketik

gem install sass

1-endang-gems-install-sass

jika error install sass, maka ketik perintah

gem sources-a http://rubygems.org/

dan ketik y

2-endang-gems-install-sass

setelah itu, ketik kembali

gem install sass

3-endang-gems-install-sass

jika ada progress instalasi hingga 100%, berarti sass sudah berhasil di install, untuk memeriksanya, ketikkan

sass –version

4-endang-gems-install-sass

untuk aplikasi tambahannya, yang nanti akan dibutuhkan ketika membuat scss. download aplikasi scout app, di link berikut :

http://www.4shared.com/zip/0Na5HnGNce/scout-app-071-win.html

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

});

Kode untuk memperbaiki style css pencarian google custom

search-custom-engine-button-icon-not-show

Kode css berikut untuk . dimana tampilan button google terlihat abu dan ceper, aneh tapi nyata tapi memang bawaannya seperti itu. Akhirnya harus ditambahkan kode berikut untuk membenahi style css button tersebut.

<style>
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
height: 26px !important;
margin-top: 0 !important;
min-width: 13px !important;
padding: 5px 26px !important;
width: 68px !important;
}
</style>

tambahkan di html didalam tag <head>…</head>, sederhana namun semoga bermanfaat. wassalam.