• GoDaddy Community
  • VPS & Dedicated Servers
  • VPS & Dedicated Servers

    cancel
    Showing results for 
    Search instead for 
    Did you mean: 
    Advocate V Advocate V
    Advocate V

    Some fun little javascripts

    With the advent of HTML5 and CSS3, our world has gotten soooo much larger and more interesting.  Still, I have some clients whose business depends on other businesses and those other businesses depend on an IT department that closely controls what software is installed and what updates are available.

    A lot of forms these days depend on placeholders that take the place of labels so rather than seeing 

    First Name: <text input>

    You'll just see the input with First Name inside of it in light gray.

    Sweet from a design perspective.  Much less cluttered.

    But many large corporations haven't updated to the latest, greatest Windows 10.  Or even 8.  I have one client whose analytics show a large percentage of his clients are accessing his site with Internet Exploder 9 (or even 8.  Blech!).  In their case, all they see is a column of empty inputs with no indication of what goes where!

    Here's a fun little script that takes care of that pesky lack of a placeholder in older browsers.

    Consider you have jQuery loaded...

    	//
    	//	Handle older browsers that don't do placeholders
    	//
    	a = document.createElement('input');
    	a.type = 'text'
    	if (!('placeholder' in a)) {  // only attach handler of placeholder not supported
    		$('input[type="text"]').each(function() {
    			if ($(this).val() == '') {  // load all the placeholders
    				$(this).val($(this).attr('placeholder'));
    			}
    		})
    		$('input[type="text"]').on('focus', function() {  // whenever the element gets focus
    			if ($(this).val() == this.placeholder) {
    				$(this).val('');
    			}
    		})
    		$('input[type="text"]').on('blur', function() {  //when the element loses focus.
    			if ($(this).val() == '') {
    				$(this).val($(this).attr('placeholder'))
    			}
    		})
    	}

    Of course, this needs to go in your $(document).ready() block so the inputs exist when the script is run.  Markup of the inputs doesn't change.  This will work:

    <input type="text" name="first_name" placeholder="First Name" />

    Anybody else have a snippet they'd care to share?

    Keep on Coding!
    Mark Cicchetti - There are 10 kinds of people... those who understand binary and those who don't.
    3 REPLIES 3
    Advocate II Advocate II
    Advocate II

    Re: Some fun little javascripts

    Hi, nice!

     

    Didn't test it but I think this bit might be incorrect:

     

    if ($(this).val() == this.placeholder) {
    	$(this).val('');
    }

    Should be: 

     

    if ($(this).val() == $(this).attr('placeholder')) {
    	$(this).val('');
    }

    Also as a side note, if you still need to code for older browsers and want to use 'modern' HTML5 features, instead of coding these kind of solutions for every feature, you might want to consider using modernizr in combination with polyfills (or shims).

     

    More here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

    Mike Kikkert | GD Reseller | Javascript specialist | SSL/Security and performance specialist.
    Advocate V Advocate V
    Advocate V

    Re: Some fun little javascripts

    This is tested and working in production.  I think because in this case, "this" is referring to the input object itself and placeholder is a direct member of the object so this.placeholder works as well as $(this).attr('placeholder').

     

    Modernizr is good and works well at this and a bunch of other things but I'm a big fan of lean programming.  If this is the only thing lacking on a page, why download a build that could weigh in at 30 to 50 kb with a ton of features that are completely unused?  This actually took as long to code as going in and creating a custom modernizr build.

     

    And there are things I haven't seen modernizr do (yet).  For instance, modern Javascript has the Number.toFixed() function that I think came out with Javascript 1.5.  This will constrain a float to a fixed number of decimal places (for example pi = 3.1416.  pi.toFixed(2) would display 3.14) but what if you're looking for a nice friendly number with thousands separators for say a price?

     

     

    Number.prototype.format = function(precision, decimalPlace, thousands){
        var n = this, 
        precision = isNaN(precision = Math.abs(precision)) ? 2 : precision, 
        decimalPlace = decimalPlace == undefined ? "." : decimalPlace, 
        thousands = thousands == undefined ? "," : thousands, 
        s = n < 0 ? "-" : "", 
        i = parseInt(n = Math.abs(+n || 0).toFixed(precision)) + "", 
        j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + thousands : "") + i.substr(j).replace(/(\decimalPlace{3})(?=\decimalPlace)/g, "$1" + thousands) + (precision ? decimalPlace + Math.abs(n - i).toFixed(precision).slice(2) : "");
     };

    Now when you get a shopping cart or price list, say through AJAX and you need to populate some numbers, you can just use $('#subTotal').html("$"+subtotal.format());

     

     

    If you're supporting European customers as well as American, change this to subtotal.format(2,',','.') so that 3,487.32 will display as 3.487,32.

    Keep on Coding!
    Mark Cicchetti - There are 10 kinds of people... those who understand binary and those who don't.
    New

    JAVASCRIPT SETTIMEOUT FUNCTION ON IOS

    I have an online chat that works fine in google chrome and firefox, but won't work in Safari.

     

    The javascritp settimeout function refreshes a <div> every 3 seconds so as to re-query the mysql database for new chat entries.  

     

    When viewed in Safari or any browser on my iphone, the div constantly refreshes, so one can't scroll down, or even read the text as it flicker's every few seconds.

     

    Any advice on settimeout or setinterval (same problem) alternatives in javascript that will work on an ios system?