Web Development Blog Shannenpio

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 ...

Earlier when I decided to redesign my blog I asked myself this question: what screen size should I design for? I answered myself by looking at the visitor data collected by Google Analytics. Even though I decided to go for a responsive design, a screen resolution report provided my with some interesting insights. For example I inferred that more than 75% of my visitors would be able to see the newly introduced 970x90px large leaderboard AdSense ads. To create a "Screen Resolutions Report" in Google Analytics, go to the Customization tab, click the New Custom Report button and follow the instructions below: Enter a suitable title for your report. Change the name of the first tab to Overall . Change the report type to Explorer . In the Metric Groups section, click the add metric button and select Visitors > Visits . You can add as many metrics as you like. In the Dimension Drilldowns section, click the add dimension button and select Visitors > Screen Resolut...

MPEG 4 is the most dominant video format for the web, which is supported on a variety of platforms and devices. And FFmpeg is the most popular software for encoding videos. While there are tons of articles about encoding MPEG 4 videos with FFmpeg, most of them fail to warn you about something: most video players will not start the playback until the whole video is downloaded. This could be annoying, especially for large videos. Here is a video encoded with the following command and played via two methods; the HTML5 video tag and Flash-based video player: ffmpeg.exe -i big_buck_bunny_trailer-1080p.ogg -c:v libx264 -profile:v baseline -preset slow -b:v 800k -c:a libvo_aacenc -b:a 128k -s 512x288 big_buck_bunny_trailer-288p.mp4 HTML5 Video 1, 2 Flash Player 1 To create a "fast-start" enabled video using FFMpeg, specify -movflags faststart parameter in the command 3 : ffmpeg.exe -i big_buck_bunny_tr...

Tip: if you are commenting on a blog post that uses Google+ comments, you can choose to share the comment with a specific person (e.g. the blog author) instead of public or your circles. When posting a comment: Remove the "Public" circle from the "Shared with" box Type in the person's name or email address Only the person (or people) with whom the comment is shared with can view the comment.

Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak: <script src='/feeds/posts/default?alt=json-in-script&max-results= 99999 &callback=randomPosts'></script> Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait — tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil ( dius...

The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Dialog widget is a part of jQuery UI; it allows you to display content inside a floating window which has a title bar, content area, button bar, drag handle and close button; and it can be moved, resized and closed. The following examples demonstrate some advance uses of the dialog widget. Modal Dialog with Buttons Open Dialog on Click Hide the Close Button/Title Bar Change Dialog Position Load Content via AJAX Size to Fit Content Modal Dialog with Buttons To create a basic dialog, simply call the .dialog() method on a div. The jQuery UI framework will convert the div into a modeless dialog. To create a modal dialog instead, set modal option to true (a modal dialog prevents interaction with the rest of the page while it is active). You can also specify the buttons option to specify the buttons which should be displayed on the dialog. The following ex...

I built a report using HTML table that had more than two dozen columns. In fact, it was a matrix report where the number of rows and columns could grow indefinitely. The report looked perfect on the screen. However, upon printing, the browsers would print only the left portion of the table while the portion which does not fit on the page horizontally is discarded. I was not able to find a solution so I made a half-hearted attempt at this. My "solution": Create a fixed width div with hidden overflow Place a copy of the table inside this div Scroll the desired portion of the table into view using CSS positioning Repeat as many times necessary Below is a jQuery-powered demonstration of this idea. The output ( PDF , XPS ) is not perfect; but I am sure it can be improved. View source Open in new window In case you are wondering, the "accepted" solution was to export the table data as a Microsoft Excel/OpenOffice Calc document which provides more pr...