Web Development Blog Shannenpio

Bagaimana tidak kumaha kalian untuk merubah salah satu ukuran image atau pun gambar sehingga menjadi pas dan enak dilihat di dalam wadah ukuran sehingga menjadi tetap stabil jug a sesuai ukuran rasio aspeknya gaes,Coba kalian bisa apa enggak?.Untuk solusi nyata adalah mengatur lebar gambar, tinggi, lebar minimum dan / atau tinggi minimum gambar menjadi 100% atau otomatis. Namun, solusi ini tidak cukup umum untuk menangani gambar dengan rasio aspek yang bervariasi dengan benar. Berikut ini sebuah contoh: Batas hijau menunjukkan output yang diinginkan yaitu sesuai dengan gambar di dalam wadah (atau sebaliknya, isi wadah dengan gambar seperti yang ditunjukkan oleh batas merah). Jelas bahwa Anda perlu menggunakan aturan yang berbeda tergantung pada aspek rasio wadah dan gambar. CSS saja tidak dapat memilih aturan yang benar; Anda harus menggunakan JavaScript untuk menentukan apakah akan mencocokkan gambar secara horizontal atau vertikal. CSS3 memberikan (well, sort of): the: background

Google telah secara konstan menambahkan fitur-fitur baru ke AdSense, menawarkan penerbit lebih banyak kontrol atas bagaimana iklan ditampilkan di situs web mereka. Berikut adalah beberapa fitur yang terkait dengan penerapan kode iklan yang diluncurkan selama 12 bulan terakhir: Introduction of Asynchronous Ads — July 2013 Introduction of Responsive Ads — July 2013 Introduction of Custom-Sized Ads — December 2013 At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads. The Problem With Standard and Custom-Sized Ads Both standard and custom-sized ads are fixed size which means they do not adapt to fluid or responsive website layout. Web designers understand that fixed size ads influence the layout of a website; and likewise, the website layout dictates the ad sizes to display. For example, conside

Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like: The first and last page links are always visible The previous and next page links (numeric ones) are always visible At most n page links excluding first and last page links are visible; rest are represented by ellipsis The pagination for first and last n - 1 pages is handled a bit differently Complete PHP source code below. DEMO DISINI Pagination Function <?php /** * Displays pagination links based on given parameters * * @param int $currentPage - current page * @param int $itemCount - number of items to paginate, used to calculate total number of pages * @param int $items

Can you guess which datepicker is this? It is the jQuery UI datepicker tweaked for jQuery Mobile! I have written a small patch that allows you to use the jQuery UI datepicker with jQuery Mobile 1.4.x. To use the script: Include jQuery UI datepicker javascript after jQuery Mobile javascript files. You do not need the whole package; just grab the jquery.ui.datepicker.js file from from jQuery UI ZIP downloads. Include the monkey patch script; it basically replaces jQuery UI CSS classes with jQuery Mobile CSS classes in datepicker HTML. Add CSS rules to fine tune the appearance of datepicker. Call $(selector).datepicker() method on pagebeforecreate or pagecreate . Demo View source Open in new window

The CSS3 :nth-child() selector pseudo-class allows you to select elements based on their position in the set of children of their parent. It accepts an argument in the form of an + b . How exactly does it work? Let me explain. In very simple words, the expression an + b matches every a th element in the set starting from the b th element keeping in mind that (i) the index numbering starts at 1 (ii) zero and negative values do not represent any element (iii) text and non-element nodes are not counted. The following corollaries exist: a can be zero or an can be omitted – in which case there is no "every a th element in the set" clause and only the b th element is matched. a can be negative – in which case every a th element is matched going backwards, towards non-existing elements. b can be zero or negative – in which case the matching starts from a non-existing element. The argument can be odd or even – which represent the expressions 2n + 1 and 2n resp

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started. Using Label-Value Pairs Add CSS Class to the Dropdown Load Data via AJAX Highlight Matched Text Custom HTML in Dropdown A note before you begin: the autocomplete data should look like one of the following regardless of the source option: An array of strings e.g. ['Option 1', 'Option 2'] An array of objects; each object having label and/or value (and additional) properties e.g. [{label: 'Option 1'}, {label: 'Option 2'}] [{value: 'Value 1'}, {value: 'Value 2'}] [{label: 'Option 1', value: 1}, {label: 'Option 2', value: 2}] If necessary, the widget normalizes the data behind the scenes to match the last format in the above mentioned list. Using Label-Value