Category Archives: HTML & CSS

It contains html tags and css properties that I learn newly.

How to submit a form to a new window in post method using javascript?

HTML & CSS, Java Scripts, jQuery, ,

To submit a form to a new window in post method,

HTML

<form name="form_message_center_popup" id="form_message_center_popup" method="post" action="/folder/file.ext">
    <input type="text" name="user_name" id="user_name" value="abc"/>
    <input type="text" name="clientid" id="clientid" value="efg"/>
    <input type="button" onclick="form_submiter()" value="submit"/>
</form>

JavaScript

function customer_support_msg() {
    var customer_support = window.open("about:blank", "_form", "location=no, menubar=no, toolbar=no, fullscreen=yes, scrollbars=yes, resizable=yes, width=800, height=600, replace=true");
    document.forms["form_message_center_popup"].target='_form';
    document.forms["form_message_center_popup"].submit();
    return false;
}

Set custom validation message for HTML5 form required attribute.

HTML & CSS, Java Scripts,

Hi,
Set custom validation message for HTML5 form required attribute using the DOM function setCustomValidity . Please go through following example.

<input type="text" name="Username" id="Username" required="required" oninvalid="this.setCustomValidity('Username cannot be empty.')" />

Screenshot :

manukeerampanal

How to set a div fixed horizontally but not vertically?

HTML & CSS, Java Scripts, Uncategorized,

To set the divs’ position horizontally fixed but not vertically, use the following code :

HTML

<div id="container">
    <div id="manu"></div>
</div>

CSS

<style type="text/css">
#container {
 position:relative;
    width:700px;
 height:1000px;
    top:50px;
    left:50px;
 background-color:yellow;

}

#manu{
    position:fixed;
    width:100px;
    height:100px;
    background-color:blue;
    margin-top:20px;
    margin-left:400px;
}
</style>

Jquery

<script type="text/javascript">
$(window).scroll(function(event) {
   $("#manu").css("margin-left", 400-$(document).scrollLeft());
});
</script>

To see demo please click the link below :

http://jsfiddle.net/kL33K/

Javascript to check the maxlength.

HTML & CSS, Java Scripts, Uncategorized,

Since IE 8 doesn’t support the attribute maxlength, we need to use java script to workout this functionality. We can write the script as follows.

<textarea id="clm_add_lin_dta" maxlength="80" name="clm_add_lin_dta" style="resize:none;" onchange="testLength(this,80)" onkeyup="testLength(this,80)" onpaste="testLength(this,80)"></textarea>

<script>
   function testLength(ta,maxLength ) {
        if (ta.value.length > maxLength) {
            ta.value = ta.value.substring(0, maxLength);
        }
    }
</script>

how to Select All / Deselect All options in multiple select box using java script?

HTML & CSS, Java Scripts, Perl Scripts, PHP Scripts, Uncategorized

It’s as follows :

 

function listbox_selectall(listID, isSelect) {
        var listbox = document.getElementById(listID);
        for(var count=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = isSelect;
    }
}

 

onclick="listbox_selectall('countryList', true)" //select all the options

(or)

onclick="listbox_selectall('countryList', false)" //deselect all the options