Postingan

Menampilkan postingan dengan label JQuery

Membuat Form Dinamis Menggunakan JQuery

Gambar
Selamat datang di blog arsipbertuah. Pada posting ini ane akan membahas Bagaimana cara membuat kolom input di form html bisa ditambah dan dihapus sesuai dengan kebutuhan. inilah yang dinamakan dengan form dinamis, yang mana form tersebut kolom input tidak di tetapkan jumlahnya dalam satu halaman tersebut melainkan bisa berubah-ubah sesuai kebutuhan. agar bisa membuat form dinamis di halaman html ini tentunya kita bisa menipulasi halaman html menggunakan javascript , tapi pada artikel ini ane menggunakan JQuery karena scriptnya lebih simple dan mudah. jQuery adalah salah satu framework javascript atau javascript library yang telah dirancang untuk mempermudah mendesain halaman web di bagian user interface . untuk menjalankan script dibawah ini, ane asumsikan agan sudah paham untuk menggunakan jquery. jika belum bisa instal jquery bisa baca di artikel ane tentang instalasi jquery . berikut ini adalah script jquery serta form htmlnya untuk praktek membuat form dinamis. <html> <he

Panduan pemula belajar pemrograman web dan internet

Pada artikel ini akan membahas tentang bagaimana untuk memulai langkah awal untuk menjadi seorang programmer. bahasa pemograman apa saja yang perlu dikuasai dalam pemograman web dan pemograman internet. Definisi pemograman web World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil informasi (disebut "dokumen" atau "halaman web") dari server web dan menampilkannya, biasanya di sebuah monitor. Kita lalu dapat mengikuti pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi dengannya. Ini disebut "surfing" atau "berselancar" da

Belajar Jquery Ajax : menampilkan animasi loader

Gambar
Memasang Loader mengunakan jQuery ajax selamat datang di blog arsipbertuah.pada posting ane kali ini ane mau mengajak agan untuk belajar Ajax JQuery membuat animasi loader pada web.animasi ini menggunakan gambar dengan format gif yang akan ditampilkan pada web ketika web melakukan loading saat request data .animasi loader akan disembunyikan lagi ketika proses load data telah selesai dan hasil request akan di tampilkan di elemen HTML.untuk membuat gambar animasi agan bisa download di ajaxloader.com di situ agan bisa pilih gambar loader yang diinginkan dan bisa agan modifikasi warna dan ukurannya sesuai dengan kebutuhan web agan. belajar loader jquery ajax yuk, lansung saja kita praktek contohnya: pertama agan sudah punya gambar animasinya seperti yang ane sarankan diatas. contoh gambar loader ane seperti ini. contoh gambar loader  berikutnya buat dokumen html dan dan koding Jquery seperti dibawah ini contoh koding html dan jquery <html> <head> <title>belajar jquery me

Belajar Jquery : memperbesar gambar ketika disentuh mouse

Gambar
Belajar mouse event pada jQuery selamat datang di arsipbertuah blog,pada belajar jquery kali ini ane menuliskan tentang  bagaimana membuat gambar berubah ukurannya menjadi besar ketika di lalui oleh pointer mouse. untuk mengubah ukuran gambar tersebut bisa menggunakan Javascript.tapi bisa lebih mudah kita gunakan javascript library yaitu JQuery.   JavaScript sangat powerfull untuk memanipulasi element HTML, tapi penggunaannya juga tidak mudah dan sedikit ribet. oleh karena itu dengan jQuerylah yang dapat mempermudah memanipulasi HTML. Pengertian Jquery jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan

Belajar jQuery : menyembunyikan dan menampilkan elemen

Gambar
selamat datang di arsip bertuah blog .pada post ane kali ini, ane mau membagikan koding jquery untuk menyembunyikan dan menampilkan elemen html pada web. Penjelasan Jquery jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif .jQuery adalah pustaka/library javascript yang memudahkan kita agar tidak perlu menulis script JavaScript yang panjang.nah,pada post ane adalah salah satu contoh penggunaan jQuery  effects. yang mana ada efek yang terjadi jika kita klik pada selektor yang kita buat misalkan tombol,link dll.contohnya pa

Belajar web : load page dengan Jquery Ajax

Gambar
selamat datang di arsipbertuah pada posting satu ini saya akan membahas tentang cara membuat load halaman menggunakan jquery ajax. dengan tujuan untuk mempercepat proses loading karena semua element web tidak di load semua. Pengertian Jquery jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif pengertian Ajax AJAX(Asynchoronous Javascript and XML) adalah sebuah teknik pemograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar,sehingga halaman web tidak perlu di reload lagi hanya untuk menganti se

Rotating Slider With JQUERY & CSS3

Gambar
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality. We�ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control. The beautiful photos are by Andrew and Lili and you can see their Behance profile here: http://www.behance.net/AndrewLili The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License. Allrighty! Let�s start with the HTML! CSS::   .rm_wrapper{     width: 1160 px;     margin:0 auto;     position:relative; } .rm_container{     width: 1050 px;     overflow:hidden;     position:relative;     height: 530 px;     margin:0 auto; } .rm_container h2{     background:

3 Ways to Solve jQuery - Uncaught ReferenceError: $ is not defined Error

If you are using jQuery, Angualr JS or plain old JavaScript and getting "Uncaught ReferenceError: $ is not defined" error which means $ is either a variable or a method which you are trying to use before declaring it using var keyword. In jQuery, it's a short name of jQuery() function and most commonly used in $(document).ready(function()) . If you are doing some jQuery stuff when DOM is loaded and getting this error it means your browser has a problem loading jQuery library either from the internet or local file system. In this article, you will see some of the most common reasons of "Uncaught ReferenceError: $ is not defined" error and how to solve them, but before that let's learn some basic about the dreaded Uncaught ReferenceError: $ is not defined error. Read more �

Advice For Smartphone Application Development

There is a period when telephones were a novelty. These were limited to the house or certain designated areas. These were then freed and mobile technology permitted individuals to make telephone calls on the go. With smartphone database integration there's a multitude of options having a phone which go beyond simply making calls. You will get a variety of programs. For instance if you wish to

How to Add Smileys/Emoticons in Blogger Comments

Gambar
The Smileys/Emoticons way to give the visitors a lot of fun and confidence to your blog,It is known that these smileys used in social websites as Facebook. Demo To do this just follow the steps: 1.  Go to Blogger Dashboard   --> Template 2.  Please! download  a copy of your template 3.  Now click on Edit HTML 4.  Use Ctrl+F  to find  </body> 5.  Then copy and paste just  above/before it, this code: <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function () {emoticonx({ emoRange:"#comments p, div.emoWrap", putEmoAbove:"iframe#comment-editor", topText:"Click to see the code!", emoMessage:"To insert emoticon you must added at least one space before the code." }) }); //]]> </script> <script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/> </b:if> Note:  You can change

How to Add Cool Chat Box to Blogger

Gambar
Chatwee is a new chat service, unlike other Chatwee is added as a toolbar and chat deployed on the right side (you can switch to the left), showing the flag next to the user depending on the country where connect. Its design is attractive, however the functions are very limited because you can not choose a nickname unless you register, and so far I still do not know how to change the avatar once you're registered. But yes, it has the advantage of allowing users to share files such as PDF, music and photos. Once you register you'll have the code you can use on your blog, you can also customize the colors of it. It is recommended to have a script that prevents the redirection of countries, since the chat is only displayed in the URL you have registered, so if someone from another country comes in and adds another extension is not shown. How to Add Cool Chat Box to Blogger? Step 1 1- Go to the following link:   chatwee 2- And do like the image 3-   After creating your chatwee ac

How To Add Zoom Effect in Blogger Images

Gambar
How to add zoom effect in your blog? 1.  go to  Blogger Dashboard  >  Template 2.   Download   a copy of your template 3.  Now c lick on  Edit HTML 4.  Hit  Proceed  button 5.  Check   Expand Widget Templates  checkbox 6.  Use ctrl F to find ]]></b:skin> and paste the following code above/before it. .zoomeffect img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .zoomeffect img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }   7. Click on  Save the template How to activate it on images? Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect . Example: Your image class in post editor will be <div class="seperator" , now change it to <div class= "

Smooth Jquery Featured Post Slideshow For Blogger

Gambar
This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px . I think you will love this slideshow.You can see the DEMO of this widget from here. 1. Login to your blogger dashboard -->   Template - -> Edit HTML 2. Scroll down to where you see </head> tag . 3. Copy below code and paste it just before the </head> tag . <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ /* ------------------------------------------------------------------------ s3Slider Developped By: Boban KariÅ¡ik -> http://www.serie3.info/  CSS Help: Mészáros Róbert -> http://www.