HEI's Blog

Get URL Parameters using jQuery To implement this, I have created a function which returns value of any  parameters  variable. function GetURLParameter(sParam) { var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } }​ And this is how you can use this function assuming the URL is,  " http://dummy.com/?technology=jquery&blog=jquerybyexample ".  var tech = GetURLParameter('technology'); var blog = GetURLParameter('blog'); So in above code variable " tech " will have " jquery " as value and " blog " variable's will be " jquerybyexample ". Source from: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery...

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive (Yes, I like the way Facebook implements its menu on mobile) By Alberto Varela Download You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). Fill the sidrs normally, with existent content, remote content,... or what you want. Source from : http://www.berriart.com/sidr/

Prevent Default Behaviour of Hashed Anchor Tag with jQuery Way back in the day, I use to always set up my event triggering anchor tags a certain way to prevent their default behaviour of having to click-through to a URL or named anchor: $( 'a[href="#"]' ).click( function(e) { e.preventDefault(); } );

Preview an image after browse the file Javascript in Page function readURL ( input ) { if ( input . files && input . files [ 0 ]) { var reader = new FileReader (); reader . onload = function ( e ) { $ ( '#image' ). attr ( 'src' , e . target . result ); } reader . readAsDataURL ( input . files [ 0 ]); } } $ ( "#upload" ). change ( function (){ readURL ( this ); });   HTML in Page: <form id = "form1" runat = "server" > <input type = 'file' id = " upload " /> <img id = " image " src = "#" alt = "your image" /> </form>

This tutorial serves two purposes. It teaches you   how to create an email   link, and it also explains all of the properties of the mailto handle. If you want to use any of these options together with a munged and protected link with our   email address encoder   (to avoid spam), enter   the code   highlighted in light yellow   into the Advanced Options box. Note that converting the advanced options into ASCII would cause the link to fail to   work . Therefore we recommend not using the   cc   or   bcc   options (explained below) and instead enter all   email addresses   into the   email address   box separated by commas.. Simple email link: <a href="mailto:your@email.address">Contact Us</a>   Working example:   Contact Us This is the simplest link possible. Just like a regular URL link to any site,   this link   starts with the start tag   <a href=""> , f...

html viewport meta 淺見及說明 web mobile 化已經是一個全球的局面，好像網站如果沒有做個 media query，都會羞的不敢見人。 神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data，為了釐清實際的效用以及屬性，接下來將大略介紹 viewport-meta 說明屬性與應用。 屬性說明 W3C 協會定義  viewport meta  目前還屬於草案，意思就是有可能隨時修改，特別註記一下，此文於西元2012年3月28日撰寫，以下描述如有出入，以W3C 標準為主。 viewport 可以設定的屬性分別如下， width：可設定數值，或者指定為 device-width height：可設定數值，或者指定為 device-height initial-scale：第一次進入頁面的初始比例 minimum-scale：允許縮小最小比例 maximum-scale：允許放大最大比例 user-scalable：允許使用者縮放，1 or 0 (yes or no) 最初執行viewport meta加入如下 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意， @viewport { width: device-width; initial-scale: 1.0 } 基本說明 width=device-width 先提一下幾個注意的地方，首先在 viewport 裡面的 width 通常會看到設定為device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。 因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用javascript 針對UA 下去做動態調整。 user-scalable 從屬性名稱來看就是...