Tuesday, June 26, 2012

CSS - Float right causes line break in IE

The joy of Internet Explorer: if you have a float:right it causes the element to break line which is ultimately causes a mess in a design. The solution is quite simple though: order the not floated element before the floated one even though it doesn't look logical at first sight (and frankly, the second, lol)

Cheers!

Thursday, June 21, 2012

JavaScript - How to keep original value after validation failure

Most of us I hope are familiar with JavaScript validation methods. For example, you have two fields: my_field_01 and my_field_02, both are mandatory, you populated one field with some value, left the other blank and submitted the form, the required field validator ( if my_field_01.value = "" alert("This is a mandatory field")  ) will display a message, both fields will go blank. It's not so cool when you have twelve fields which are being reset every time you did something that caused an alert message to pop up.
The solution is quite simple: add one line in your statement, possibly right after the alert message line.

if (form == "OK") {
   document.form.submit();
}
else {
   alert("You have errors”);
   event.returnValue = false;}

Cheers!

Monday, June 18, 2012

JavaScript - how to reset a form, including dropdown lists (list boxes)

You have a really big form you want to clear. It contains with text boxes, text areas, dropdown lists (list boxes), check boxes, radio buttons. One way to do it is to fire the Javascript forms.reset function but it will not take care of the dropdown lists (list boxes). That's the way I did it (assuming you have all of your list boxes have similar prefix ID, like I do - lstbx)



function form_reset(){
     
      document.forms[0].reset();
     
      var element_names = new Array("01","02","03", "04", "05", "06");
     
      for(var i=0; i <=element_names.length; i++)
            {
                  clear_my_list_box(document.getElementById('lstbx_' + element_names[i]));
            }
}
function clear_my_list_box(lstbx) {

      var i;
      for (i = lstbx.options.length - 1; i >= 0; i--) {
            lstbx.remove(i);
      }

}



Cheers!

Javascript - Confirm Dialog

This one is short



<input type="button" class="btn_reset" value="" onclick="if(confirm('Reset form?')){form_reset_function();}">


Cheers!

Saturday, June 16, 2012

Thursday, June 14, 2012

Javascript - email address validation

Here's a simple way to validate email addresses. I prefer to set this on the onblur event.


<input type="text" id="tb_email" onblur="email_validation(this)">

function email_validation(input_txt) {
    if (input_txt.value == '')
        return true;
    var rex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    if (rex.test(input_txt.value)) {
        return true;
    }
    alert('Please provide a valid email address');
    input_txt.focus();
    input_txt.select();
    return false;
}



Cheers!

JavaScript - input validators alphanumeric

Here's a simple way to validate user input on fly, one is letters only + spacebar, the other one is numbers only


<input type="text" id="tb_name" onkeypress="return filter_alpha(this)"></td>

<input type="text" id="tb_number" onkeypress="return filter_numeric(this)"></td>


function filter_alpha(input_txt) {
      input_txt = (input_txt) ? input_txt : event;
      var charCode = (input_txt.which) ? input_txt.which : event.keyCode
    if (charCode > 32 && (charCode < 65 || charCode > 90) &&
       (charCode < 97 || charCode > 122)) {
       return false;
    }
    return true;
}

function filter_numeric(input_txt) {
    var charCode = (input_txt.which) ? input_txt.which : event.keyCode
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57))
               return false;

            return true;
}

Cheers!

Tuesday, June 5, 2012

CSS - Image alignment center

If you struggled with not working margin: 0 auto; of an image, there's one more thing you need to add in the CSS parameters: display:block.


Cheers!

Saturday, June 2, 2012

ASP.NET/C# - how to control HTML table rows, table data cells (tr, td) from code behind

This one is quite easy - you just need to declare the <td> or the <tr> element to run on server.


Example how to set HTML DataRow invisible from code behind:

HTML

<td runat="server" id="td_01">

C#

td_01.Visible = false;



Cheers!

Friday, June 1, 2012

ASP.NET/CSS - How to keep images aspect ratio

Uploaded images have different aspect ratios. That's the CSS way to avoid image stretching - constant width this example (change the values or set the width auto, height some value to keep the height constant). Simply add this to the img CSS:



.img_resize
{
    width:100px;
    height:auto;
}



Cheers!