Membuat Scroll 2 div Berjalan Secara Sersamaan Dengan JQuery

Pada artikel ini akan ditampilkan contoh bagaimana kita membuat scroll pada 2 div berjalan secara bersamaan, misalnya kita memiliki 2 div yang isi dari div tersebut saling berkaitan seperti gambar berikut,

Ketika kita menggeser scroll pada div yang pertama, maka scroll pada div ke 2 bergeser secara otomatis begitu juga sebaliknya.

Pertama buatlah tag HTML seperti berikut,

<div style="overflow-y:scroll;height:150px;border: 1px solid #cee1e8;width:200px;float:left; margin-right:20px;" id="divKiri">
    <ul type="number">
        <li>List Pertama</li>
        <li>List Kedua</li>
        <li>List Ketiga</li>
        <li>List Keempat</li>
        <li>List Kelima</li>
        <li>List Keenam</li>
        <li>List Ketujuh</li>
        <li>List kedelapan</li>
    </ul>
</div>
<div style="overflow-y:scroll;height:150px;border: 1px solid #cee1e8;width:200px;" id="divKanan">
    <ul type="number">
        <li>Isi List Pertama</li>
        <li>Isi List Kedua</li>
        <li>Isi List Ketiga</li>
        <li>Isi List Keempat</li>
        <li>Isi List Kelima</li>
        <li>Isi List Keenam</li>
        <li>Isi List Ketujuh</li>
        <li>Isi List kedelapan</li>
    </ul>
</div>

Selanjutnya buatlah script JQuerynya

$(document).ready(function() {
       //perintah pada saat scroll div pertama di gerakan
       $("#divKiri").scroll(function () {
            $("#divKanan").scrollTop($("#divKiri").scrollTop());
        });
        
        //perintah pada saat scroll div kedua di gerakan
        $("#divKanan").scroll(function () {
            $("#divKiri").scrollTop($("#divKanan").scrollTop());
        });
}

Demikian contoh pembuatan scroll pada 2 div yang berjalan bersamaan, untuk lebih memahami bisa lihat contoh pada link Berikut

Semoga bermanfaat..

Baca Selengkapnya »

Membuat Table Menggunakan DIV

Brikut contoh pembuatan table tanpa menggunakan tag HTML <table> melainkan menggunakan tag <div>.

Buatlah tag HTML seperti berikut :

<div class="divTable">
    <div class="divTableRow">
        <div class="divTableCellhd">Judul 1</div>
        <div class="divTableCellhd">Judul 2</div>
        <div class="divTableCellhd">Judul 3</div>
        <div class="divTableCellhd">Judul 4</div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell">Isi baris 1 kolom 1</div>
        <div class="divTableCell">Isi baris 1 kolom 2</div>
        <div class="divTableCell">Isi baris 1 kolom 3</div>
        <div class="divTableCell">Isi baris 1 kolom 4</div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell">Isi baris 2 kolom 1</div>
        <div class="divTableCell">Isi baris 2 kolom 2</div>
        <div class="divTableCell">Isi baris 2 kolom 3</div>
        <div class="divTableCell">Isi baris 2 kolom 4</a>

        </div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell">Isi baris 3 kolom 1</div>
        <div class="divTableCell">Isi baris 3 kolom 2</div>
        <div class="divTableCell">Isi baris 3 kolom 3</div>
        <div class="divTableCell">Isi baris 3 kolom 4</div>
    </div>
</div> 

Selanjutnya buat style CSS nya,

.divTable {
    width: 100%;
    display: table;
    -webkit-box-shadow: 1px 1px 1px 1px #888888;
    box-shadow: 1px 1px 1px 1px #888888;
}
.divTableRow {
    width: 100%;
    height: 100%;
    display: table-row;
}
.divTableCell {
    padding:5px;
    width: 25%;
    height: 100%;
    display: table-cell;
    border: 1px solid #808080;
}
.divTableCellhd {
    background-color: #4a6b82;
    color: #fff;
    padding:5px;
    width: 25%;
    height: 100%;
    display: table-cell;
    border: 1px solid #808080;
}
.divTable .divTableRow:nth-child(odd) {
    background-color: #aad4ff;
}
.divTable .divTableRow:hover {
   background-color: #FBEDBB;
} 

Untuk demonya bisa di buka disini

Semoga bermanfaat..

Baca Selengkapnya »

Menghapus atau mengganti isi dalam DIV dengan JQuery

Misalnya kita punya tag HTML sebagai berikut

<div id="content">
   <p>Ini adalah isi dari konten</p>
</div>
<input type="button" click="gantiDiv()" />

Pada tag diatas kita akan menghapus dan mengganti semua isi dari dalam tag <div>.

1. Menghapus isi <div>
Untuk menghapus isi dalam div anda bisa menggunakan perintah .empty() pada jQuery seperti berikut:

function gantiDiv()
{
  $("#content").empty(); //menghapus semua isi yang berada dalam div dengan id content
}

2. Mengganti isi <div>
Untuk melakukan penggantian isi di dalam div yang pertama kita lakukan adalah menghapus isi terlebih dahulu kemudian mengisi dengan konten yang baru.

function gantiDiv()
{
  $("#content").empty(); //menghapus semua isi yang berada dalam div dengan id content
  var string = "<input type='text' value=' ' name='nama' />"; //membuat textbox yang akan dimasukan ke dalam <div>
  $("#content").append(string);
}

Untuk mengganti (replace) isi pada div kita juga bisa menggunakan perintah jQuery .replaceWith().

function gantiDiv()
{
  $("#content p").replaceWith("<h2>Mengganti isi</h2>"); //mengganti isi pada tag <p> didalam tag <div> dengan id content.
}

Semoga bermanfaat..

Baca Selengkapnya »

Membuat Button Menarik Dengan CSS

Pada artikel ini kita akan membuat suatu button yang cukup menarik tidak hanya text tetapi ada image nya juga, seperti gambar berikut

Untuk membuat button seperti itu kita harus buat terlebih dahulu style CSS seperti berikut

.button
{      
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
 
.button:hover
{
background-color: #eee;      
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
 
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
 
.button:focus
{
outline: 0;
background: #fafafa;
}  
 
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;      
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;  
pointer-events: none;
}

/* Buttons and inputs */

button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
 button::-moz-focus-inner
{
border: 0;
padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
 
/* Hexadecimal entities for the icons */
 
.add:before
{
content: "\271A";
}
 
.edit:before
{
content: "\270E";      
}
 
.delete:before
{
content: "\2718";      
}
 
.save:before
{
content: "\2714";      
}
 
.email:before
{
content: "\2709";      
}
 
.like:before
{
content: "\2764";      
}
 
.next:before
{
content: "\279C";
}
 
.star:before
{
content: "\2605";
}
 
.spark:before
{
content: "\2737";
}
 
.play:before
{
content: "\25B6";
}
/* Social media buttons */
.tw, .fb,
.tw:hover, .fb:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus
{
background-color: #88E1E6;
}

.fb, .fb:focus
{
background-color: #3C5A98;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.tw:hover
{
background-color: #b1f0f3;
}

.fb:hover
{
background-color: #879bc3;
}

.tw:before
{
content: "t";
background: #91cfd3;
background: rgba(0,0,0,.1);
color: #fff;
font-family: verdana;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
 
.fb:before
{
content: "f";
background: #4467ac;
background: rgba(0,0,0,.1);
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}


Untuk memanggil atau menggunakan di HTML kita bisa gunakan script berikut

<a href="alamat link" class="button">Tombol</a>

Untuk membuat tombol yang berbeda baik itu image atau teks nya seperti pada gambar diatas kita bisa mengganti nama classnya seperti berikut :

<a href="#" class="button">Button</a>
<a href="#" class="button add">Add</a>
<a href="#" class="button edit">Edit</a>
<a href="#" class="button delete">Delete</a>
<a href="#" class="button save">Save</a>
<a href="#" class="button email">Send email</a>
<a href="#" class="button like">Like</a>
<a href="#" class="button next">Next</a>
<a href="#" class="button star">Favourite</a>
<a href="#" class="button spark">Spark</a>
<a href="#" class="button play">Play</a>
<a href="#" class="button tw">Follow me</a>
<a href="#" class="button fb">Become a fan</a>

Untuk melihat hasilnya, bisa dilihat pada link Berikut

Semoga mencoba.

Baca Selengkapnya »

Get & Set Attribut Pada Tag HTML dengan JQuery

Pada artikel ini akan dijelaskan bagaimana kita mengambil atau mengisikan nilai dari/ke atribut di dalam html. Pada jQuery kita bisa menarik atau mengisikan nilai dari/ke atribut seperti id, kelas, style, nama, judul, dsb di dalam tag apapun (seperti <div>, <span>, <p>, dll) dengan menggunakan metode attr() dan .prop().
Misalnya kita punya sintak HTML seperti berikut :

<div class="myContainer" id="warpper">
Isi content
<a id="idAlamat" title="blogger" href="">Link</a> 
<input type="checkbox" id="idCheckbox" checked="checked" />
</div>

Pada kasus diatas misalnya kita akan mengambil id dan title pada tag <a>, maka gunakan sintak JQuery sebagai berikut, 

//Mengambil id dari class myContainer dalam div
var divID = $("div.myContainer").attr("id");  //hasilnya "idAlamat"
//Mengambil title dari link (tag <a>)
 var linkTitle = $("#idAlamat").attr("title");  //hasilnya "blogger"

$("#idCheckbox").prop("checked");  //hasilnya "true" 
$("#idCheckbox").attr("checked"); //hasilnya "checked"

 Mengisikan / mengganti nilai (Set Attribute) pada tag html

//Menambahkan/ mengganti title pada sebuah link (tag <a> dengan nama id "idAlamat")
$("a#idAlamat").attr("title", "Ini link baru");

//Membuat checkbox di check
$("#idCheckbox").prop("checked", true);


Semoga bermanfaat..

Baca Selengkapnya »

Membuat Auto Slideshow Sederhana Dengan JQuery

Pada artikel ini akan dijelaskan bagaimana membuat slideshow yang berjalan secara otomatis dengan batuan JQuery. Untuk isi dari slideshow bisa berupa teks, gambar atau keduanya dan pada contoh ini kita hanya menggunakan teks.

Pertama tuliskan kode HTML untuk isi dari slideshownya seperti berikut

<div id="slideshow">
      <div>Isi dari slide 1</div>
      <div>Isi dari slide 2</div>
      <div>Isi dari slide 3</div>
</div> 

Buatlah style CSS

 #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Terakhir buat script JQuery

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Untuk melihat hasil dari contoh diatas, bisa dilihat disini

Semoga bermanfaat..

Baca Selengkapnya »

Mengatasi masalah di reporting (report viewer) ketika migrasi web aplikasi dari visual studio 2010 ke 2013

Ketika kita melakukan migrasi web aplikasi dari visual studio (VS) 2010 ke 2013, kita menemukan permasalahan dalam reporting pada saat nampilkan report viewer seperti berikut,

untuk mengatasi permasalah tersebut, lakukan perubahan pada web.config seperti berikut

<compilation debug="false" targetFramework="4.5">
  <assemblies>
    <add assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
    <add assembly="Microsoft.ReportViewer.Common, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />     
<add assembly="Microsoft.Build.Framework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
<add assembly="System.Management, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
  </assemblies>
<buildProviders>
    <add extension=".rdlc" Microsoft.Reporting.RdlBuildProvider, Microsoft.ReportViewer.Common, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />   
</buildProviders>
</compilation>

<httpHandlers>
     <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" validate="false" /> 
</httpHandlers>

<handlers>
     <add name="ReportViewerWebControlHandler" preCondition="integratedMode" verb="*" path="Reserved.ReportViewerWebControl.axd" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" /> </handlers>

Lakukan perubahan pada script yang di cetak tebal.

Pada page lakukan perubahan seperti berikut,

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>


Setelah dilakukan perubahan diatas, cobalah untuk menjalankan kembali.

Semoga bermanfaat..

Baca Selengkapnya »