about my life of multimedia: js

顯示具有 js 標籤的文章。顯示所有文章

2014年3月31日星期一

input password placeholder workaround IE

the workaround solution for using placeholder on IE<10
it works for IE7~10

(credits to http://jsfiddle.net/q8ajJ/)

HTML

<!-- Style = display none for people who dont have javascript -->
<input id="fake_pass" name="fake_pass" style="display: none;" type="text" value="Enter Password:" />
<input id="real_pass" name="real_pass" type="password" />

// On DOM ready, hide the real password
$('#real_pass').hide();

// Show the fake pass (because JS is enabled)
$('#fake_pass').show();

// On focus of the fake password field
$('#fake_pass').focus(function(){
    $(this).hide(); //  hide the fake password input text
    $('#real_pass').show().focus(); // and show the real password input password
});

// On blur of the real pass
$('#real_pass').blur(function(){
    if($(this).val() == ""){ // if the value is empty, 
        $(this).hide(); // hide the real password field
        $('#fake_pass').show(); // show the fake password
    }
    // otherwise, a password has been entered,
    // so do nothing (leave the real password showing)
});

2013年4月19日星期五

phonegap opening a PDF file in Windows Phone

For those who suffering from opening PDF in your application
here you are the solusion

just simply upgrade your cordova framework to at least 2.6.0
and use the following js to open

window.open("your/pdf/link", "_system")

the package can be downloaded here

please leave me a comment if it solves your problem~

2013年2月18日星期一

google map v3 custom infobox template

Here you are the google map custom infobox template,
the js library can be downloaded here

and the API document is here

<html>
 <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
  <script type="text/javascript">
   var gMap;
   var ib;
   $(window).load(window_load);

   function initMap() {
    var _mapOptions = {
     center: new google.maps.LatLng(22.302698, 114.160501),
     zoom: 12,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    gMap = new google.maps.Map(document.getElementById("mapArea"), _mapOptions);
   }

   function setMarker() {
    var _mOptions = {
     position:new google.maps.LatLng(22.302698, 114.160501),
     map:gMap
    }
    
    var _marker = new google.maps.Marker(_mOptions);
    
    ib.open(gMap, _marker)
    
    google.maps.event.addListener(_marker, 'click', function() {
     if(ib.getVisible()){
      ib.close();
     }else{
      ib.open(gMap, _marker)
     }
    });
   }

   function setInfoBox() {
    var _infoBoxOptions = {
     content: "<div class='divInfoContent'>hello world~~</div>",
     alignBottom:true,
     closeBoxURL: "",
     pixelOffset : new google.maps.Size(-20, -30),
     boxStyle: {
      width: 100,
      height: 75,
      background: "url(http://www.clker.com/cliparts/6/b/2/4/1197148387581632758SRD_comic_clouds_2.svg.thumb.png) no-repeat"
     }
    }
    
    ib = new InfoBox(_infoBoxOptions);
   }

   function window_load(){
    initMap();
    setInfoBox();
    setMarker();
   }
  </script>
 </head>
 
 
 
 <style>
  #mapArea {
   width: 480px;
   height: 360px;
   margin: 0 auto;
  }
  
  .divInfoContent {
   padding: 10px 20px;
  }
 </style>
 
 
 
 <body>
  <div id="mapArea"></div>
 </body>
</html>

2013年2月6日星期三

jquery .animate() overflow

just a note on $().animate()

this function will set overflow:hidden when method call and it will be back to normal when animation finished

simply set overflow:visible when needed.

2012年11月29日星期四

jquery .height() problem in chrome/safari

The evilness of Chrome is not less then IE

Thanks my workmate discovered a problem on chrome.
when i use $.height(), it works well on other browsers but Chrome and Safari,
which is webkit based browser

after google, findings below:
$(document).ready() means the DOM is fully loaded, but does not mean the graphics were loaded.
$(window).load() fires after$(document).ready() and all graphics were fully loaded.

here i made an experiment:

<html>
 <head>
  <title>event test</title>
  <script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script language="javascript" >
  
  //Run a function when the page is fully loaded including graphics.
  $(window).load(function(){
   var _imageHeight=$("img").height();
   $("ol").append("<li>window load, image's height is " + _imageHeight + "</li>");
  });
  
  //Specify a function to execute when the DOM is fully loaded.
  $(document).ready(function(){
   var _imageHeight=$("img").height();
   $("ol").append("<li>document ready, image's height is " + _imageHeight + "</li>");
  });
  </script>
 </head>
 <body>
  <ol></ol> <!-- use ordered list to show the call sequence -->
  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
 </body>
</html>

the above code tested with IE7, IE8, firefox 17, Maxthon 3, Chrome 23 & Safari 5.1.7

except chrome and safari, all other results below:
1.document ready, image's height is 53
2.window load, image's height is 53

and chrome and safari results:

1.document ready, image's height is 0
2.window load, image's height is 53

which shows $(window).load() fires after $(document).ready()
and webkit-based browsers (except Maxthon3)
cannot get the height since all graphics have not been loaded.

in summery, it is better using $(window).load() instead of $(document).ready()

2012年10月4日星期四

load json crossdomain

Simply a note for loading json cross-domain

i use $.ajax() method for better event handling

client side js coding:

$.ajax({
 url:"http://another.domain.com",
 
 dataType: 'jsonp', //stand for "json-padding", it is jsonp, not json
 
 //its "jsonpCallback", not "jsonCallback". the callback method name from JSON, will explain below
 jsonpCallback: 'jsonCallback', 
 
 //set this to true to let the method know im loading data cross-domain
 crossDomain : true, 
 //success handler
 success: function(data) {
  console.log("dosomthing")
 },
 
 //error handler
 error: function() {
   console.log("error occured")
 }
});

the json response, wrap the JSON with a function with the name which declared in jsonpCallback above:

jsonCallback(
 {
  "user":"littleshell",
  "gender":"male"
 }
);

about my life of multimedia

BloggerAds廣告

相關文章

2014年3月31日星期一

input password placeholder workaround IE

2013年4月19日星期五

phonegap opening a PDF file in Windows Phone

2013年2月18日星期一

google map v3 custom infobox template

2013年2月6日星期三

jquery .animate() overflow

2012年11月29日星期四

jquery .height() problem in chrome/safari

2012年10月4日星期四

load json crossdomain

BloggerAds廣告

相關文章

2014年3月31日 星期一

input password placeholder workaround IE

2013年4月19日 星期五

phonegap opening a PDF file in Windows Phone

2013年2月18日 星期一

google map v3 custom infobox template

2013年2月6日 星期三

jquery .animate() overflow

2012年11月29日 星期四

jquery .height() problem in chrome/safari

2012年10月4日 星期四

load json crossdomain

2014年3月31日星期一

2013年4月19日星期五

2013年2月18日星期一

2013年2月6日星期三

2012年11月29日星期四

2012年10月4日星期四