Wednesday, October 1, 2008

CSS Tips n Tricks

1) Change nested element style with ID (#) and Class (.)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Tricks Page</title>
    <style type="text/css">
        span                            {   font-weight: bold;  }        
        td > span:first-child           {   color: Green;   }
        td#tdID > span:first-child      {   color: Green;   }
        td.tdClass > span:first-child   {   color: Green;   }
        td#tdID span                    {   font-size :large;}
        td.tdClass span.spanClass2      {   color: Blue;    }
        td.tdClass span#spanID3         {   color: Red; }
        td#tdID span.spanClass4         {   color: Aqua;    }
        td#tdID span#spanID5            {   color: Maroon;  }
    </style>
</head>
<body>
    <table>
        <tr>
            <td id="tdID" class="tdClass">
                <span id="spanID1" class="spanClass1">First</span><br />
                <span id="spanID2" class="spanClass2">Second</span><br />
                <span id="spanID3" class="spanClass3">Third</span><br />
                <span id="spanID4" class="spanClass4">Fourth</span><br />
                <span id="spanID5" class="spanClass5">Fifth</span><br />
            </td>
        </tr>
    </table>
</body>
</html>





Above code snippet displays various ways to change nested element styles.

a) span : To change style of a particular html element (span).

b) td > span:first-child : To change style of first child element (span) of an html elemenet (td).

c) td#tdID > span:first-child : To change style of first child element (span) of an html elemenet with ID (td#tdID).

d) td.tdClass > span:first-child : To change style of first child element (span) of an html elemenet with class (td.tdClass).

e) td#tdID span : To change style of a particular child element (span) of an html element with ID (td#tdID).

f) td.tdClass span.spanClass2 : To change style of a child element with class (span.spanClass2) of an html element with class (td.tdClass).

g) td.tdClass span#spanID3 : To change style of a child element with ID (span#spanID3) of an html element with class (td.tdClass).

h) td#tdID span.spanClass4 : To change style of a child element with class (span.spanClass4) of an html element with ID (td#tdID).

i) td#tdID span#spanID5 : To change style of a child element with ID (span#spanID5) of an html element with ID (td#tdID).

Posted by Avinash at 2:44 AM 0 comments

Labels: ,

JavaScripts Tips n Tricks

1) ClientID usage :

If you want to access the a Server side TextBox / Control written in ASP.Net from JavaScript code, then first you have get the clientID of that server control and then you can change access it.



<asp:TextBox ID="textBox1" Wrap="true" TextMode="MultiLine" runat="server" Width="215px"></asp:TextBox>

<script type="text/javascript">
var txtID = '<%= textBox1.ClientID %>';

document.getElementById(txtID).innerText = '';
</script>



Note: If an external JavaScript file is referenced in ASPX page, then ASP.NET won't be preprocessing it for server tags (<%...%>), as it isn't part of a ASPX file. You probably need to include the JavaScript code directly in the ASPX file (inline JavaScript code), or set up a global variable in there that is accessed by the JS file when it needs the clientID.



2) String to Number conversion :


var num = Number("11");




3) Case-Insensitive search :


//To make case-insensitive search, used SEARCH instead of INDEXOF.
var sampleString = 'Search case-insensitive based on InputString';
var index = sampleString.search(/InputString/i);




4) unescape() function :


//The unescape() function decodes a string encoded with escape().
var sURL = unescape(window.location.href);


Reference:
JavaScript unescape() Function



5) Trim string :


str = str.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');




6) Encode string :


str = encodeURIComponent(str);




8) Date Validation : 



function isValidDate(strNewDate) 
{
    var newDate = new Date(strNewDate);   
    
    if (newDate.toString() == "NaN" || newDate.toString() == "Invalid Date") 
        return false;
    else 
    {
        var currentDate = new Date();
 
       //Check whether new date is greater than current date.
       if( newDate.getTime() < currentDate.getTime() )
           return false;
       else
           return true;         
    }
}





9) Number/Numeric Validation : 



function isValidNumber(strInput) 
{
    var validChars = "0123456789.";
    var isNumber=true;
    var char;  
   
    for (i = 0; i < strInput.length && isNumber == true; i++) 
    { 
        char = strInput.charAt(i); 
        if (validChars.indexOf(char) == -1) 
            isNumber = false; 
    }
     
    return isNumber;
}




Following code checks whether there are any number in a given string :


var regExp = /[0-9]+/g
var strNumber = new String("93932")

if(regExp.test(strNumber)) 
{
    //There are numbers in strNumber.
}
else
{
    //There are no numbers in strNumber.
}





10) String Validation : 



function isValidString(strInput)
{
    strInput = strInput.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
    
    if(strInput == '')
        return false;
    else 
        return true;
}





11) Cancel an event : 



function onClick()
{
    window.event.returnValue = false;
    return false;
}





12) Do postback or call server side function :


HTML code :


<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClientClick="onUpdateClick();">



JavaScript code :


function onUpdateClick()
{
    var evenArgs = "Server Call";
    __doPostBack('<%= btnUpdate.ClientID %>',evenArgs);
}



CSharp (C#) code :


protected void Page_Load(object sender, EventArgs e)
{
    string controlName = Request.Params.Get("__EVENTTARGET");
    if (!string.IsNullOrEmpty(controlName))
    {
        if (controlName.Contains("btnUpdate"))
            update();
    }
}


void updateIssue()
{
    string eventArgument = Request.Params.Get("__EVENTARGUMENT");
    //do other operations
}





13) Get html element's top/left position : 



function getPosition(elementID)
{
    var obj = document.getElementById(elementID);            
    var top  = obj.offsetTop;
    var left = obj.offsetLeft;      
      
    while(obj.offsetParent != null)
    {
        obj = obj.offsetParent;        
        top  += obj.offsetTop;
        left += obj.offsetLeft;
    }

    alert("Top : " + top + "  Left : " + left);
}





14) Types of dialog boxes in JavaScript :


alert


alert("Alert dialog box");



confirm


var response = confirm("Do you want to continue?");
if (response) 
{
    //true if OK is pressed
}
else
{
    //false if Cancel is pressed
}



prompt


var response = prompt('Enter your name : ', 'Avi');
if (response) //Equivalent to --- if( (response != null) && (response != '') )
{
    alert("You entered : " + response);
}
else
{
    alert("You pressed Cancel or no value was entered.");
}


Reference :
Three Types of Dialog Boxes in JavaScript

Posted by Avinash at 1:26 AM 0 comments

Labels: ,

Subscribe to: Posts (Atom)
Google