jQuery $(document).ready()

We all know that anything inside the $(document).ready() function will execute in between loading the DOM and content. Here is a syntax alternative for those who want to save a few characters:

$(function(){
    // Do something.
});

Vs

$(document).ready(function() {
    // Do something.
});

Equals, Equals Equals or Equals Equals Equals?

In JavaScript, you often see conditional statements with 3 equals signs (===). I always thought it was a typo but it turns out to have a significant advantage over the traditional 2 equals signs (==). This post shows how to use 1, 2 or 3 equals signs effectively.


Assign and evaluate

 if ( x = y + z ) { alert( "true" ); }

Assigns x to the sum of y and z and evaluates the result.


Compare (irrespective of data type)

 if ( x == y + z ) { alert( "true" ); }

The result of the sum of y and z is compared to x where both sides must have the same value.

Example:
x = "5"
y = 10
z = -5

y + z = 5

Using the above values, the condition will be considered to be true because the sum of y and z is converted to a string prior to the comparison.


Compare and match data types

 if ( x === y + z ) { alert( "true" ); }

The result of the sum of y and z is compared to x where both sides must have the same value and be of the same data type.


To summarise, always use === when doing conditional statements unless you want to compare values of different data types.


* zero and an empty string are considered to be false and all other numbers and strings are considered to be true.

JavaScript - Anchor popups

If JavaScript is disabled, the user will be redirected to whatever is in the href attribute in a new frame. If JavaScript is enabled, a new window will open with the same content but the parent window will stay at it's current location.

JavaScript:

function Popup( url, height, width )
{
    var windowProperties = "toolbar = 0, scrollbars = 1, location = 0, statusbar = 0, menubar = 0, resizable = 1, width = " + width + ", height = " + height + ", left = 50, top = 50";
 
    return window.open( url, "", windowProperties );
}

HTML:

<a href="http://www.google.com/" onclick="javascript:Popup( 'http://www.google.com/', 600, 600 ); return false;" target="_blank">Test</a>

The morale of the story is always have a backup for users with JavaScript disabled.

ASP.NET LinkButton without JavaScript

If you use ASP.NET LinkButton controls, the client browser must have JavaScript enabled. If JavsScript is disabled, clicking on the link won't cause a postback. To avoid this scenario, use standard Button controls and style them to look like hyperlinks.

Example:

<asp:Button runat="server" CssClass="HyperlinkButton" Text="Submit" />

CSS:

.HyperlinkButton
{
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
 
.HyperlinkButton:hover
{
    text-decoration: underline;
}

JavaScript - Popup windows

function Popup( url, height, width )
{
    var windowProperties = "toolbar = 0, scrollbars = 1, location = 0, statusbar = 0, menubar = 0, resizable = 1, width = " + width + ", height = " + height + ", left = 50, top = 50";
 
    return window.open( url, "", windowProperties );
}
 
function PopupScale( url, scale )
{
    // Default sizes.
    var height = 800;
    var width = 800;
    
    if ( window.screen ) 
    {
        height = window.screen.availHeight * scale / 100;
        width = window.screen.availWidth * scale / 100;
    }
 
    Popup( url, height, width );
}

Example:

JavaScript - Hover effect

var _elementID;
var _xOffset = 15;
var _yOffset = 15;
 
function GetMouseX( event )
{
    if ( !event )
    {
        event = window.event;
    }
      
    if ( event.pageX )
    {
        return event.pageX;
    }
    else if ( event.clientX )
    {
        return event.clientX + ( document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft );
    }
    else
    {
        return 0;
    }
}
 
function GetMouseY( event ) 
{
    if ( !event ) 
    {
        event = window.event;
    }
      
    if ( event.pageY )
    {
        return event.pageY; 
    }
    else if ( event.clientY )
    {
        return event.clientY + ( document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop );
    }
    else
    {
        return 0;
    }
}
 
function Follow( event )
{
    if ( document.getElementById )
    {                  
        var element = document.getElementById( _elementID );
        
        if ( element != null )
        {
            var style = element.style; 
            style.left = ( parseInt( GetMouseX( event ) ) + _xOffset ) + 'px';
            style.top = ( parseInt( GetMouseY( event ) ) + _yOffset ) + 'px'; 
            style.visibility = 'visible';
        }
    }
}
 
function Show( elementID )
{
    if ( document.getElementById )
    {     
        _elementID = elementID;
            
        document.onmousemove = Follow;
    }
}
 
function Hide( elementID )
{
    if ( document.getElementById )
    {     
        _elementID = elementID;
            
        var divStyle = document.getElementById( _elementID ).style;
        divStyle.visibility = 'hidden';
      
        document.onmousemove = '';
    }
}

Example:

Test

<div id="Hover" style="background-color: White; color: Black; padding: 5px; position: absolute; visibility: hidden;">Test</div>
<div onmouseover="javascript:Show( 'Hover' )" onmouseout="javascript:Hide( 'Hover' )" style="background-color: Red; height: 100px; width: 100px;"></div>

JavaScript - Toggle element visibility

Here are 2 functions for showing/hiding an element. The first will simply invert it's visibility relative to the current state. The second has an extra parameter indicating the visibility:

function ToggleElementVisibility( elementID )
{
    var element = document.getElementById( elementID );
                 
    if ( element != null )
    {
        if ( element.style.display == 'none' )
        {            
            element.style.display = '';        
        }
        else
        {    
            element.style.display = 'none';
        }
    }
}
 
function ShowHideElement( elementID, isVisible )
{
    var element = document.getElementById( elementID );
                 
    if ( element != null )
    {
        if ( isVisible == true )
        {            
            element.style.display = '';        
        }
        else
        {    
            element.style.display = 'none';
        }
    }
}

Example:

<div id="ToggleShowHide" onclick="ShowHideElement( this.id, false )" style="background-color: Red; height: 100px; margin: 0 0 10px 0; width: 100px;"></div> 
<input type="Submit" value="Toggle" onclick="ToggleElementVisibility( 'ToggleShowHide' )" />
<input type="Submit" value="Show" onclick="ShowHideElement( 'ToggleShowHide', true )" />
<input type="Submit" value="Hide" onclick="ShowHideElement( 'ToggleShowHide', false )" />

Ghost button alternative

Following on from my previous post about Ghost Buttons, I've now found a much easier and efficient alternative.

ASP.NET 1.x:

btnTest.Attributes.Add( "onclick", "javascript:this.disabled = true; " + GetPostBackEventReference( btnTest ) );

ASP.NET 2.0:

btnTest.Attributes.Add( "onclick", string.Format( "javascript:this.disabled = true; {0}", ClientScript.GetPostBackEventReference( btnTest, "" ) ) );

Advantages:

• You only need a handle to the control instead of the ID - sometimes these can get complicated if controls are placed inside other controls


• There is less code


• Only a single control is ouputted - this could mean a performance increase compared to using Ghost Buttons

Disadvantages:

• The code will need to be recompiled to make any changes to the click event