BloggerAds廣告

相關文章

loading..
顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

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" />

JS
// 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)
});
張貼者： littleshell 於 下午6:17 0 意見
標籤： , , , ,

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.


張貼者： littleshell 於 凌晨3:18 0 意見
標籤： ,

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()


張貼者： littleshell 於 下午5:31 0 意見
標籤： ,
訂閱： 文章 ( Atom )