in a user control to reference the parent

If you are in
a user control you have to reference the parent in
RegisterStartupScript.

ScriptManager.RegisterStartupScript(this.Parent.Page,
this.GetType(), “foo”, “document.getElementById(‘” +
this.ad_display.ClientID + “‘).innerHTML = (‘” +
DateTime.Now.ToString(“yyyyMMddhhmmss”) + “‘);”, true);

Advertisements

tool tip popup Javascript

<script type=”text/javascript”>
$(function ($) {
$(“.tooltip_trigger”).hover(function () {
$(this).next(“.tooltip_table”).css(“display”, “inline”);
}, function () {
$(this).next(“.tooltip_table”).css(“display”, “none”);
});
});
</script>
<style type=”text/css”>
.tooltip_table {
position: absolute;
display: none;
top: -8px;
margin-left: 5px;
}

.tooltip_table td {
padding: 0;
}

.tooltip_content {
background-color: #F4F4F3;
vertical-align: middle;
}

.tooltip_r1_c1 {
background-image: url(“/images/tooltip_r1_c1.gif”);
height: 7px;
width: 11px;
}

.tooltip_r1_c2 {
background-image: url(“/images/tooltip_r1_c2.gif”);
background-repeat: repeat-x;
height: 7px;
}

.tooltip_r1_c4 {
background-image: url(“/images/tooltip_r1_c4.gif”);
height: 7px;
width: 8px;
}

.tooltip_r2_c1 {
background-image: url(“/images/tooltip_r2_c1.gif”);
background-repeat: repeat-y;
vertical-align: middle !important;
width: 11px;
}

.tooltip_r2_c4 {
background-image: url(“/images/tooltip_r2_c4.gif”);
background-repeat: repeat-y;
vertical-align: middle !important;
width: 8px;
}

.tooltip_r5_c1 {
background-image: url(“/images/tooltip_r5_c1.gif”);
height: 7px;
width: 11px;
}

.tooltip_r5_c2 {
background-image: url(“/images/tooltip_r5_c2.gif”);
background-repeat: repeat-x;
height: 7px;
}

.tooltip_r5_c4 {
background-image: url(“/images/tooltip_r5_c4.gif”);
height: 7px;
width: 8px;
}

.tooltip_trigger {
cursor: pointer;
display: inline;
/*float: left;*/
}
</style>

<div style=”position: relative;” id=”header5″>
<h2>Hover Link </h2>
<table cellspacing=”0″>
<tbody>
<tr>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
</tr>
<tr>
<td>
<img src=”/images/tooltip_r3_c1.gif” alt=”” /></td>
<td><span id=”lblHelpText”>Click me</span></td>
<td></td>
</tr>
<tr>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
</tr>
</tbody>
</table>
</div>

Images:

tooltip_r1_c4 tooltip_r2_c1 tooltip_r2_c4 tooltip_r3_c1 tooltip_r3_c4 tooltip_r5_c1 tooltip_r5_c2 tooltip_r5_c4 none tooltip_r1_c1 tooltip_r1_c2

Animated Menus Using jQuery

ref: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

demo: http://www.shopdev.co.uk/blog/menuDemo.html

  <head>
    <style type=”text/css”>
/*<![CDATA[*/
        body {
                background-color:#333333;
                margin:0;
        }
        /* Firefox Dotted Outline Fix */
        a:active {
                outline: none;
        }
        /* Firefox Dotted Outline Fix */
        a:focus {
                -moz-outline-style: none;
        }
        /* Menu Body */
        ul#menu {
                width:80%;
                height:102px;
                background:url(bg.png) repeat-x;
                list-style:none;
                margin:0;
                padding:0;
                padding-top:20px;
                padding-left:20%;
        }
        /* Float LI Elements – horizontal display */
        ul#menu li {
                float:left;
        }
        /* Link – common attributes */
        ul#menu li a {
                background:url(sprite.png) no-repeat scroll top left;
                display:block;
                height:81px;
                position:relative;
        }
        /* Specify width and background position attributes specifically for the class: “home” */
        ul#menu li a.home {
                width:159px;
        }
        /* Specify width and background position attributes specifically for the class: “portfolio” */
        ul#menu li a.portfolio {
                width:157px;
                background-position:-159px 0px;
        }
        /* Span (on hover) – common attributes */
        ul#menu li a span {
                background:url(sprite.png) no-repeat scroll bottom left;
                display:block;
                position:absolute;
                top:0;
                left:0;
                height:100%;
                width:100%;
                z-index:100;
        }
        /* Span (on hover) – display pointer */
        ul#menu li a span:hover {
                cursor:pointer;
        }
        /* Shift background position on hover for the class: “home” */
        ul#menu li a.home span {
                background-position:0px -81px;
        }
        /* Shift background position on hover for the class: “portfolio” */
        ul#menu li a.portfolio span {
                background-position:-159px -81px;
        }
    /*]]>*/
    </style><!– Include jQuery Library –>
    <script src=”jquery-1.2.2.pack.js” type=”text/javascript”>
</script>
    <!– Let’s do the animation –>
    <script type=”text/javascript”>
//<![CDATA[
        $(function() {
                // set opacity to nill on page load
                $(“ul#menu span”).css(“opacity”,”0″);
                // on mouse over
                $(“ul#menu span”).hover(function () {
                        // animate opacity to full
                        $(this).stop().animate({
                                opacity: 1
                        }, ‘slow’);
                },
                // on mouse out
                function () {
                        // animate opacity to nill
                        $(this).stop().animate({
                                opacity: 0
                        }, ‘slow’);
                });
        });
    //]]>
    </script>
  </head>
  <body>
    <ul id=”menu”>
      <li>
        <a href=”#”></a>
      </li>
      <li>
        <a href=”#”></a>
      </li>
    </ul>
  </body>
</html>

JavaScript Game Engine Comparision

Name Sprite.js Crafty gamecore.js (Playcraft) Impact
Size (KB)  45.2K 14.5KB
License
Type
Unit Tests
Docs
Repository
Collision  yes  yes
2D  yes  yes  yes
3D
Tile-based
Isometric  yes  yes
Sound  yes  yes
Physics  yes  no  yes
AI
Network
Optimized for Mobile  yes  yes
Canvas  yes  yes
DOM  yes  yes
WebGL
HTML5  yes  yes  yes
Price  free  $99
Input  Keyboard, mouse, touchscreen  Keyboard, mouse
Notes  It centered on animation making. It doesn’t provide all features other support. Detail sprite animation. A lightweight, modular JavaScript full game engine to easily produce high quality games. Support a great deal of features. Includes a large variety of components such as animation, event management, redraw regions, collision detection, sprites and more gamecore.js is a framework to help build high-performance (and large) games.  avascript / HTML5 Game Engine with world editor.
Explosion  component system (modular)
time tracking ( track object)
layers
 dynamic background support
 Good for simple game or animation  good for complex game with large amount of code

ref:
https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix
https://github.com/bebraw/jswiki/wiki/Game-Engines
http://www.slideshare.net/JosVillegas1/sprite-js-vs-craftyjs

Private and Public Members in JavaScript

Ref:
http://www.crockford.com/javascript/private.html
http://msdn.microsoft.com/en-us/magazine/cc163419.aspx

JavaScript is the world’s most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members. Here’s how.

Objects

JavaScript is fundamentally about objects. Arrays are objects. Functions are objects. Objects are objects. So what are objects? Objects are collections of name-value pairs. The names are strings, and the values are strings, numbers, booleans, and objects (including arrays and functions). Objects are usually implemented as hashtables so values can be retrieved quickly.

If a value is a function, we can consider it a method. When a method of an object is invoked, the this variable is set to the object. The method can then access the instance variables through the this variable.

Objects can be produced by constructors, which are functions which initialize objects. Constructors provide the features that classes provide in other languages, including static variables and methods.

Public

The members of an object are all public members. Any function can access, modify, or delete those members, or add new members. There are two main ways of putting members in a new object:

In the constructor

This technique is usually used to initialize public instance variables. The constructor’s this variable is used to add members to the object.

function Container(param) {
    this.member = param;
}

So, if we construct a new object

var myContainer = new Container('abc');

then myContainer.member contains 'abc'.

In the prototype

This technique is usually used to add public methods. When a member is sought and it isn’t found in the object itself, then it is taken from the object’s constructor’s prototype member. The prototype mechanism is used for inheritance. It also conserves memory. To add a method to all objects made by a constructor, add a function to the constructor’s prototype:

Container.prototype.stamp = function (string) {
    return this.member + string;
}

So, we can invoke the method

myContainer.stamp('def')

which produces 'abcdef'.

Private

Private members are made by the constructor. Ordinary vars and parameters of the constructor becomes the private members.

function Container(param) {
    this.member = param;
    var secret = 3;
    var that = this;
}

This constructor makes three private instance variables: param, secret, and that. They are attached to the object, but they are not accessible to the outside, nor are they accessible to the object’s own public methods. They are accessible to private methods. Private methods are inner functions of the constructor.

function Container(param) {

    function dec() {
        if (secret > 0) {
            secret -= 1;
            return true;
        } else {
            return false;
        }
    }

    this.member = param;
    var secret = 3;
    var that = this;
}

The private method dec examines the secret instance variable. If it is greater than zero, it decrements secret and returns true. Otherwise it returns false. It can be used to make this object limited to three uses.

By convention, we make a private that variable. This is used to make the object available to the private methods. This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.

Private methods cannot be called by public methods. To make private methods useful, we need to introduce a privileged method.

Privileged

A privileged method is able to access the private variables and methods, and is itself accessible to the public methods and the outside. It is possible to delete or replace a privileged method, but it is not possible to alter it, or to force it to give up its secrets.

Privileged methods are assigned with this within the constructor.

function Container(param) {

    function dec() {
        if (secret > 0) {
            secret -= 1;
            return true;
        } else {
            return false;
        }
    }

    this.member = param;
    var secret = 3;
    var that = this;

    this.service = function () {
        return dec() ? that.member : null;
    };
}

service is a privileged method. Calling myContainer.service() will return 'abc' the first three times it is called. After that, it will return null. service calls the private dec method which accesses the private secret variable. service is available to other objects and methods, but it does not allow direct access to the private members.

Closures

This pattern of public, private, and privileged members is possible because JavaScript has closures. What this means is that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. This is an extremely powerful property of the language. There is no book currently available on JavaScript programming that shows how to exploit it. Most don’t even mention it.

Private and privileged members can only be made when an object is constructed. Public members can be added at any time.

Patterns

Public

function Constructor() {

this.membername = value;

}
Constructor.prototype.membername = value;

Private

function Constructor() {

var that = this;
var
membername = value;function membername() {}

}

Note: The function statement

function membername() {}

is shorthand for

var membername = function membername() {};

Privileged

function Constructor() {

this.membername = function () {};

}

Example

// class Pet
var NamespaceAnimal = {};

//constructor
NamespaceAnimal.Pet = function (name) {

//or function Pet(name) {
this.getName = function () { return name; };

this.setName = function (newName) { name = newName; };

this.getAge = function () { return age; };

this.setAge = function (newAge) { age = newAge; };

this.height;

var weight;

}

//public
NamespaceAnimal.Pet.prototype.toString = function () {

return “This pet’s name is: ” + this.getName();

};

// end of class Pet

var parrotty = new NamespaceAnimal.Pet(“Parrotty the Parrot”);

// class Dog : Pet

// public Dog(string name, string breed)

NamespaceAnimal.Dog = function (name, breed) {

// think Dog : base(name)
this.breed = breed
NamespaceAnimal.Pet.call(this, name);

//privilaged method
//in JavaScript, the private members are accessible only through
//methods that have these private members within their closures
//(these methods are usually called privileged methods, since
//they are different from ordinary public methods).
this.getBreed = function () { return this.breed; }; //breed is a private member

//private method
function checkBreed(breedType) {
if (this.getBreed == breedType) {
return 1;
} else {
return 0;
}
}

}

// this makes Dog.prototype inherits

// from Pet.prototype

NamespaceAnimal.Dog.prototype = new NamespaceAnimal.Pet();

// remember that Pet.prototype.constructor

// points to Pet. We want our Dog instances’

// constructor to point to Dog.

NamespaceAnimal.Dog.prototype.constructor = NamespaceAnimal.Dog;

// Now we override Pet.prototype.toString

NamespaceAnimal.Dog.prototype.toString = function () {

return “This dog’s name is: ” + this.getName() +

“, and its breed is: ” + this.getBreed(); //can’t call doggy.breed

};

// end of class Dog

var doggy = new NamespaceAnimal.Dog(“Buddy”, “Great Dane”);

// test the new toString()
jQuery(function ($) {

$(“.displayspan”).html(parrotty.toString());
$(“.displayspan”).append(”
” + doggy.toString());

});