You can detect Chrome by using the following bit of JavaScript:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
The following string represents Chrome's full user agent:
User-agent header sent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.112 Safari/534.30
Thursday, 30 June 2011
Tuesday, 28 June 2011
Friday, 24 June 2011
CSS3 overflow-y Property
This can be used to clip the contents of a DIV element when the content overflows the element's content area.
Example
div
{
overflow-y:scroll;
}
The overflow-y property specifies whether or not to clip the top/bottom edges of the content - if it overflows the element's content area.
Tip: Use the overflow-x property to determine clipping at the left and right edges.
Default value: visible
JavaScript syntax: object.style.overflowY="scroll"
Syntax
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
Click here to play with it using W3Schools Try it editor
Example
div
{
overflow-y:scroll;
}
The overflow-y property specifies whether or not to clip the top/bottom edges of the content - if it overflows the element's content area.
Tip: Use the overflow-x property to determine clipping at the left and right edges.
Default value: visible
JavaScript syntax: object.style.overflowY="scroll"
Syntax
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
Click here to play with it using W3Schools Try it editor
Shelve and Unshelve Pending Changes in TFS
Shelving enables you to set aside the pending changes in your workspace to work on a higher priority task or to share your code with another user for code review.
Perform a Get Latest operation to synchronize your workspace with the latest server version and then build your application to ensure that it compiles prior to shelving or checking in. Doing so gives you an opportunity to incorporate changes to source files that have been made outside of your workspace.
To shelve folders and files from Source Control Explorer
1. In Source Control Explorer, right-click, and click Shelve Pending Changes.
2. In the Shelve - Source Files dialog box, type the shelveset name, for example shelvetest in the Shelveset name box.
3. In the Comment box, type Testing my shelveset, and then click Shelve.
The files and folders are copied to the source control server and are available for other team members to unshelve.
To shelve folders and files from Solution Explorer
1.In Solution Explorer, right-click, and click Shelve Pending Changes.
2.In the Shelve - Source Files dialog box, type the shelveset name, for example shelvetest in the Shelveset name box.
3.In the Comment box, type Testing my shelveset and then click Shelve.
The files and folders are copied to the source control server and are available for other team members to unshelve.
To shelve pending changes from the Pending Changes window
1.In the Visual Studio 2005 Team System integrated development environment (IDE), click View, Other Windows, and then click Pending Changes.
2.In the Pending Changes window, click Source Files, and then select the files you want to shelve.
3.Click Work Items, and then add or remove work items.
4.Select or clear the Preserve Pending Changes Locally box.
When you unshelve a shelveset, Team Foundation restores each shelved revision into the destination workspace as a pending change as long as the revision does not conflict with a change that is already pending in the workspace.
You can use the unshelve command to restore individual file revisions from a shelveset to your workspace, but unshelving does not restore your entire workspace to the base workspace version, which is the server version upon which a shelved revision is based. After unshelving, perform one of the following operations to guard against the introduction of chronological inconsistencies in your code.
To unshelve a set of pending changes
1.In Visual Studio 2005 Team System, click File, point to Source Control, and then click Unshelve.
2.In the Owner name box, type the shelveset creator's name (for example, ADVENTUREWORKS\JuanGo or simply juango) and then click Find.
3.In the Results pane, select the shelveset you want to unshelve into your workspace, and then click Details.
4.If you want to delete the shelveset from the Team Foundation source control server, deselect the Preserve shelveset on server option.
5.Optionally deselect the Restore work items and check-in notes option if you do not want to have the work items and check-in notes associated with the shelveset restored.
6.When the Details dialog box appears, select the shelveset or shelveset items you want to unshelve into your workspace, and then click Unshelve.
Unlike the Get operation, which merges reconcilable differences between two versions of a file automatically and helps you merge conflicts manually, the unshelve operation does not support merges. By removing shelved pending changes from your workspace at the commencement of the code review, you can be assured that any changes your reviewer makes to the shelveset, such as adding comments to a file, do not create merge conflicts during the unshelve process.
source: MSDN
Perform a Get Latest operation to synchronize your workspace with the latest server version and then build your application to ensure that it compiles prior to shelving or checking in. Doing so gives you an opportunity to incorporate changes to source files that have been made outside of your workspace.
To shelve folders and files from Source Control Explorer
1. In Source Control Explorer, right-click, and click Shelve Pending Changes.
2. In the Shelve - Source Files dialog box, type the shelveset name, for example shelvetest in the Shelveset name box.
3. In the Comment box, type Testing my shelveset, and then click Shelve.
The files and folders are copied to the source control server and are available for other team members to unshelve.
To shelve folders and files from Solution Explorer
1.In Solution Explorer, right-click, and click Shelve Pending Changes.
2.In the Shelve - Source Files dialog box, type the shelveset name, for example shelvetest in the Shelveset name box.
3.In the Comment box, type Testing my shelveset and then click Shelve.
The files and folders are copied to the source control server and are available for other team members to unshelve.
To shelve pending changes from the Pending Changes window
1.In the Visual Studio 2005 Team System integrated development environment (IDE), click View, Other Windows, and then click Pending Changes.
2.In the Pending Changes window, click Source Files, and then select the files you want to shelve.
3.Click Work Items, and then add or remove work items.
4.Select or clear the Preserve Pending Changes Locally box.
Unshelving
When you unshelve a shelveset, Team Foundation restores each shelved revision into the destination workspace as a pending change as long as the revision does not conflict with a change that is already pending in the workspace.
You can use the unshelve command to restore individual file revisions from a shelveset to your workspace, but unshelving does not restore your entire workspace to the base workspace version, which is the server version upon which a shelved revision is based. After unshelving, perform one of the following operations to guard against the introduction of chronological inconsistencies in your code.
To unshelve a set of pending changes
1.In Visual Studio 2005 Team System, click File, point to Source Control, and then click Unshelve.
2.In the Owner name box, type the shelveset creator's name (for example, ADVENTUREWORKS\JuanGo or simply juango) and then click Find.
3.In the Results pane, select the shelveset you want to unshelve into your workspace, and then click Details.
4.If you want to delete the shelveset from the Team Foundation source control server, deselect the Preserve shelveset on server option.
5.Optionally deselect the Restore work items and check-in notes option if you do not want to have the work items and check-in notes associated with the shelveset restored.
6.When the Details dialog box appears, select the shelveset or shelveset items you want to unshelve into your workspace, and then click Unshelve.
Unlike the Get operation, which merges reconcilable differences between two versions of a file automatically and helps you merge conflicts manually, the unshelve operation does not support merges. By removing shelved pending changes from your workspace at the commencement of the code review, you can be assured that any changes your reviewer makes to the shelveset, such as adding comments to a file, do not create merge conflicts during the unshelve process.
source: MSDN
Thursday, 23 June 2011
What is Denial-of-service (DoS) attack?
A denial-of-service attack (DoS attack) or distributed denial-of-service attack (DDoS attack) is an attempt to make a computer resource unavailable to its intended users. Although the means to carry out, motives for, and targets of a DoS attack may vary, it generally consists of the concerted efforts of person or persons to prevent an Internet site or service from functioning efficiently or at all, temporarily or indefinitely. Perpetrators of DoS attacks typically target sites or services hosted on high-profile web servers such as banks, credit card payment gateways, and even root nameservers. The term is generally used with regards to computer networks, but is not limited to this field; for example, it is also used in reference to CPU resource management.
One common method of attack involves saturating the target machine with external communications requests, such that it cannot respond to legitimate traffic, or responds so slowly as to be rendered effectively unavailable. In general terms, DoS attacks are implemented by either forcing the targeted computer(s) to reset, or consuming its resources so that it can no longer provide its intended service or obstructing the communication media between the intended users and the victim so that they can no longer communicate adequately.
Denial-of-service attacks are considered violations of the IAB's (Internet Architecture Board) Internet proper use policy, and also violate the acceptable use policies of virtually all Internet service providers. They also commonly constitute violations of the laws of individual nations.
The United States Computer Emergency Readiness Team (US-CERT) defines symptoms of denial-of-service attacks to include:
* Unusually slow network performance (opening files or accessing web sites)
* Unavailability of a particular web site
* Inability to access any web site
* Dramatic increase in the number of spam emails received—(this type of DoS attack is considered an e-mail bomb)
Denial-of-service attacks can also lead to problems in the network 'branches' around the actual computer being attacked. For example, the bandwidth of a router between the Internet and a LAN may be consumed by an attack, compromising not only the intended computer, but also the entire network.
If the attack is conducted on a sufficiently large scale, entire geographical regions of Internet connectivity can be compromised without the attacker's knowledge or intent by incorrectly configured or flimsy network infrastructure equipment.
A "denial-of-service" attack is characterized by an explicit attempt by attackers to prevent legitimate users of a service from using that service. There are two general forms of DoS attacks: those that crash services and those that flood services.[3] Attacks can be directed at any network device, including attacks on routing devices and web, electronic mail, or Domain Name System servers.
A DoS attack can be perpetrated in a number of ways. The five basic types of attack are:
1. Consumption of computational resources, such as bandwidth, disk space, or processor time.
2. Disruption of configuration information, such as routing information.
3. Disruption of state information, such as unsolicited resetting of TCP sessions.
4. Disruption of physical network components.
5. Obstructing the communication media between the intended users and the victim so that they can no longer communicate adequately.
A DoS attack may include execution of malware intended to:
* Max out the processor's usage, preventing any work from occurring.
* Trigger errors in the microcode of the machine.
* Trigger errors in the sequencing of instructions, so as to force the computer into an unstable state or lock-up.
* Exploit errors in the operating system, causing resource starvation and/or thrashing, i.e. to use up all available facilities so no real work can be accomplished.
* Crash the operating system itself.
source: wikipedia
Click here to read more.
One common method of attack involves saturating the target machine with external communications requests, such that it cannot respond to legitimate traffic, or responds so slowly as to be rendered effectively unavailable. In general terms, DoS attacks are implemented by either forcing the targeted computer(s) to reset, or consuming its resources so that it can no longer provide its intended service or obstructing the communication media between the intended users and the victim so that they can no longer communicate adequately.
Denial-of-service attacks are considered violations of the IAB's (Internet Architecture Board) Internet proper use policy, and also violate the acceptable use policies of virtually all Internet service providers. They also commonly constitute violations of the laws of individual nations.
Symptoms and manifestations
The United States Computer Emergency Readiness Team (US-CERT) defines symptoms of denial-of-service attacks to include:
* Unusually slow network performance (opening files or accessing web sites)
* Unavailability of a particular web site
* Inability to access any web site
* Dramatic increase in the number of spam emails received—(this type of DoS attack is considered an e-mail bomb)
Denial-of-service attacks can also lead to problems in the network 'branches' around the actual computer being attacked. For example, the bandwidth of a router between the Internet and a LAN may be consumed by an attack, compromising not only the intended computer, but also the entire network.
If the attack is conducted on a sufficiently large scale, entire geographical regions of Internet connectivity can be compromised without the attacker's knowledge or intent by incorrectly configured or flimsy network infrastructure equipment.
Methods of attack
A "denial-of-service" attack is characterized by an explicit attempt by attackers to prevent legitimate users of a service from using that service. There are two general forms of DoS attacks: those that crash services and those that flood services.[3] Attacks can be directed at any network device, including attacks on routing devices and web, electronic mail, or Domain Name System servers.
A DoS attack can be perpetrated in a number of ways. The five basic types of attack are:
1. Consumption of computational resources, such as bandwidth, disk space, or processor time.
2. Disruption of configuration information, such as routing information.
3. Disruption of state information, such as unsolicited resetting of TCP sessions.
4. Disruption of physical network components.
5. Obstructing the communication media between the intended users and the victim so that they can no longer communicate adequately.
A DoS attack may include execution of malware intended to:
* Max out the processor's usage, preventing any work from occurring.
* Trigger errors in the microcode of the machine.
* Trigger errors in the sequencing of instructions, so as to force the computer into an unstable state or lock-up.
* Exploit errors in the operating system, causing resource starvation and/or thrashing, i.e. to use up all available facilities so no real work can be accomplished.
* Crash the operating system itself.
source: wikipedia
Click here to read more.
Monday, 20 June 2011
Open up hidden HTML DIV using jQuery
On of the Web UIs which I have worked on recenlty had a requirement to open-up a DIV when it is hidden and show a message to the user in response to a button click (it can be any other user action). I did it using the following code
if ($("#div").is(":hidden")) {
$("#div").slideDown('slow', function () {
alert("Your message goes here");
}
);
$("#div").is(":hidden") returns true or false depending on the DIVs visibility.
if ($("#div").is(":hidden")) {
$("#div").slideDown('slow', function () {
alert("Your message goes here");
}
);
$("#div").is(":hidden") returns true or false depending on the DIVs visibility.
Handling WCF Exceptions from ASPX page
If a WCF method fails when you call it from your ASPX page you might want to save the exception details somewhere, in a database table or in a text/xml file, or output it in the browser. But how will you get the details of the WCF exception in your ASP.NET code-behind class? You may find the following code snippet useful.
string serviceStackTrace = "";
try
{
//WCF method call
}
catch(Exception ex)
{
if (ex is FaultException)
serviceStackTrace = ((System.ServiceModel.FaultException)(ex)).Detail.StackTrace;
else if (ex is System.ServiceModel.CommunicationException)
serviceStackTrace = ex.StackTrace;
}
//Do whatever you want to do with serviceStackTrace
string serviceStackTrace = "";
try
{
//WCF method call
}
catch(Exception ex)
{
if (ex is FaultException
serviceStackTrace = ((System.ServiceModel.FaultException
else if (ex is System.ServiceModel.CommunicationException)
serviceStackTrace = ex.StackTrace;
}
//Do whatever you want to do with serviceStackTrace
Thursday, 16 June 2011
CSS Sprites: What, Why and How?
- A sprite image is a collection of images put into a single image.
- A web page with many images can take a long time to load and generates multiple server requests.
- Using image sprites will reduce the number of server requests and save bandwidth.
The name "sprite" might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the "on" and "off" states of a button are contained within the same image and are activated by shifting the background-position?
Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.
Why combine all those images? Isn't it quicker to have smaller images?
Nope, it's not. Back in the day, everybody and their brothers were "slicing" images to make pages load faster. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.
The impact of having many components((i.e. images, scripts, and stylesheets) in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user's browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
Every single image, whether it's an
Here is an example from w3schools.com which creates a navigation list using the below sprite image
CSS
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;background:url('img_navsprites.gif') -91px 0;}
</style>
HTML
<ul id="navlist">
<li id="home">
<li id="prev">
<li id="next">
</ul>
Example explained:
* #navlist{position:relative;} - position is set to relative to allow absolute positioning inside it
* #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding is set to 0, list-style is removed, and all list items are absolute positioned
* #navlist li, #navlist a{height:44px;display:block;} - the height of all the images are 44px
* #home{left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px
* #home{background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
* #prev{left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px.
* #prev{background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider)
* #next{left:129px;width:43px;}- Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px.
* #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
See it working on w3schools.com
Wednesday, 15 June 2011
Rounded corners in CSS
As a Web Developer you might have come across a requirement where you have to display the content in a box with rounded corners instead of showing it in a square box. If yes here is an example which allows you do it using CSS and few images.
In the spot where you want the rounded box to show up create a container div to hold the box, a div for the top row and a div for the bottom row. Between the top and bottom rows add your content. In the top and bottom row divs, I add the left corner image and set the inline style to display: none;. This makes the image invisible unless you make it visible through the stylesheet. That way you can hide the effect from incompatible browsers by not showing them the stylesheet.
<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
<p>Your content gos here</p>
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
The CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn’t sit right up against the edge of the box.
Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block;
}
if you want you can also set the width of "roundcont" to 100%.
Also if you are more concerned about the number of images(I mean performance optimisation or something like that) you can combine the corner images into a CSS sprite and modify CSS accordingly.
Click here to download the corner images and read the whole article
In the spot where you want the rounded box to show up create a container div to hold the box, a div for the top row and a div for the bottom row. Between the top and bottom rows add your content. In the top and bottom row divs, I add the left corner image and set the inline style to display: none;. This makes the image invisible unless you make it visible through the stylesheet. That way you can hide the effect from incompatible browsers by not showing them the stylesheet.
<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
<p>Your content gos here</p>
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
The CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn’t sit right up against the edge of the box.
Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block;
}
if you want you can also set the width of "roundcont" to 100%.
Corner images : 
Also if you are more concerned about the number of images(I mean performance optimisation or something like that) you can combine the corner images into a CSS sprite and modify CSS accordingly.
Click here to download the corner images and read the whole article
CSS z-index - how it works?
z-index goes hand-in-hand with the local stacking context. What is a stacking context? Whenever you specify a z-index, you create a new stacking context. Here's an example:
CSS:
body {
margin: 0;
padding: 0;
}
/* generic style */
div.tile {
position: absolute;
border: 1px solid black;
background: white;
width: 4em;
height: 4em;
}
/* box One */
.a {
top: 0;
left: 0;
}
/* box Two */
.b {
top: 1em;
left: 1em;
}
/* box Three */
.c {
top: 2em;
left: 2em;
z-index: -1;
}
/* box Four */
.d {
top: 3em;
left: 3em;
}
/* box Five */
.e {
top: 4em;
left: 4em;
}
HTML
<div style="position: absolute; z-index: 0;">
<div class="tile a">One</div>
<div class="tile b">Two</div>
<div class="tile c">Three</div>
<div class="tile d">Four</div>
</div>
<div class="tile e">Five</div>
So here we have three stacking contexts, the root of the document (<html>), the plain div, and box Three (.c).
When you specify a z-index, that z-index is the offset relative to the current stacking level.
When the z-index on the plain div is 0, boxes One, Two, Four, and Five stack on top of each other sucessively. Since box Three has a negative z-index it is rendered behind boxes One, Two, and Four, and Five. The stacking order from bottom to top is: 3, 1, 2, 4, 5
If you give the z-index on the plain div a 1, boxes One, Two, Three and Four are rendered in front of box Five (change the position and size of box five, go ahead), but box Three is rendered behind boxes One, Two, and Four, due to its negative z-index. The stacking order from back to front is: 5, 3, 1, 2, 4
If you remove the z-index on the plain div, boxes One, Two, Four, and Five are rendered sucessively on top of each other, and box Three is rendered behind the root stacking context (the html element) and cannot be seen. The stacking order from bottom to top is: 3, root, 1, 2, 4, 5)
CSS Version: CSS2
JavaScript syntax: object.style.zIndex="1"
click here to read the original document.
Read about z-index on wwww.w3schools.com
wwww.w3schools.com example
You can also copy the above CSS and HTML to wwww.w3schools.com "Try It" editor and play with it.
CSS:
body {
margin: 0;
padding: 0;
}
/* generic style */
div.tile {
position: absolute;
border: 1px solid black;
background: white;
width: 4em;
height: 4em;
}
/* box One */
.a {
top: 0;
left: 0;
}
/* box Two */
.b {
top: 1em;
left: 1em;
}
/* box Three */
.c {
top: 2em;
left: 2em;
z-index: -1;
}
/* box Four */
.d {
top: 3em;
left: 3em;
}
/* box Five */
.e {
top: 4em;
left: 4em;
}
HTML
<div style="position: absolute; z-index: 0;">
<div class="tile a">One</div>
<div class="tile b">Two</div>
<div class="tile c">Three</div>
<div class="tile d">Four</div>
</div>
<div class="tile e">Five</div>
So here we have three stacking contexts, the root of the document (<html>), the plain div, and box Three (.c).
When you specify a z-index, that z-index is the offset relative to the current stacking level.
When the z-index on the plain div is 0, boxes One, Two, Four, and Five stack on top of each other sucessively. Since box Three has a negative z-index it is rendered behind boxes One, Two, and Four, and Five. The stacking order from bottom to top is: 3, 1, 2, 4, 5
If you give the z-index on the plain div a 1, boxes One, Two, Three and Four are rendered in front of box Five (change the position and size of box five, go ahead), but box Three is rendered behind boxes One, Two, and Four, due to its negative z-index. The stacking order from back to front is: 5, 3, 1, 2, 4
If you remove the z-index on the plain div, boxes One, Two, Four, and Five are rendered sucessively on top of each other, and box Three is rendered behind the root stacking context (the html element) and cannot be seen. The stacking order from bottom to top is: 3, root, 1, 2, 4, 5)
CSS Version: CSS2
JavaScript syntax: object.style.zIndex="1"
click here to read the original document.
Read about z-index on wwww.w3schools.com
wwww.w3schools.com example
You can also copy the above CSS and HTML to wwww.w3schools.com "Try It" editor and play with it.
Friday, 10 June 2011
Liquid Canvas - jQuery plugin to create rounded corners
Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.
It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop.
Click here to see the Demo page
The demo is a good way to find out what Liquid Canvas can do for you.
Features
* Automatic generation of HTML canvas elements which scale with their HTML container, e.g. a floating DIV
* Abstraction of canvas - each HTML element gets a "paint" method
* Works with plugins for rendering
* Loads of plugins already exist
* Own plugins are possible
* Simplified render language for plugin-based rendering
* Rendering language uses a CSS-like syntax for plugin styles
* Based on HTML Canvas, jQuery, ExplorerCanvas
* Tested on Firefox, Internet Explorer, Safari, Chrome
It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop.
Click here to see the Demo page
The demo is a good way to find out what Liquid Canvas can do for you.
Features
* Automatic generation of HTML canvas elements which scale with their HTML container, e.g. a floating DIV
* Abstraction of canvas - each HTML element gets a "paint" method
* Works with plugins for rendering
* Loads of plugins already exist
* Own plugins are possible
* Simplified render language for plugin-based rendering
* Rendering language uses a CSS-like syntax for plugin styles
* Based on HTML Canvas, jQuery, ExplorerCanvas
* Tested on Firefox, Internet Explorer, Safari, Chrome
Wednesday, 8 June 2011
Simple JavaScript function to create TimeStamp from Date()
function dateTimeStamp()
{
return (new Date().toLocaleString()+':'+new Date().getMilliseconds());
}
if you call the above method output will be something like
08 June 2011 17:29:04:605
toLocaleString()
Converts a Date object to a string, using locale conventions
getMilliseconds()
Returns the milliseconds (from 0-999)
If you are looking for a milliseconds version of the Date objects then you have to use Date.getTime() which returns the number of milliseconds since midnight Jan 1, 1970.
Click here for a complete list of JavaScript Date Object Methods
{
return (new Date().toLocaleString()+':'+new Date().getMilliseconds());
}
if you call the above method output will be something like
08 June 2011 17:29:04:605
toLocaleString()
Converts a Date object to a string, using locale conventions
getMilliseconds()
Returns the milliseconds (from 0-999)
If you are looking for a milliseconds version of the Date objects then you have to use Date.getTime() which returns the number of milliseconds since midnight Jan 1, 1970.
Click here for a complete list of JavaScript Date Object Methods
Friday, 3 June 2011
Generic jQuery method to attach a querystring value to all the links in a page
Ever wondered how to attach a querystring, which exist in the original request, to all the requests made by hypertext link (<a> tag) clicks in an ASPX page. See below script.
$(document).ready(function () {
$('a').click(function (event) {
var $a = $(this);
//Add quesrystring if it is a relative URL and the querystring is not part of the href value already
var appendqstring = $a.attr("href").toLowerCase().indexOf("http://") == -1 && $a.attr("href").toLowerCase().indexOf("https://") == -1 &&
$a.attr("href").toLowerCase().indexOf(".aspx") != -1 && $a.attr("href").toLowerCase().indexOf("qs=") == -1;
if (appendqstring ) {
event.preventDefault();
location.href = $a.attr("href") + "?qs=" + GetQStringVal("qs");
}
});
});
/* function to read value of the given key, x, from querystring */
function GetQStringVal(x) {
var a = location.search.substring(1); var b = a.split("&");
for (var i = 0; i < b.length; i++) {
var c = b[i].split("=");
if (c[0].toLowerCase() == x.toLowerCase()) { return c[1]; }
}
return "";
}
$(document).ready(function () {
$('a').click(function (event) {
var $a = $(this);
//Add quesrystring if it is a relative URL and the querystring is not part of the href value already
var appendqstring = $a.attr("href").toLowerCase().indexOf("http://") == -1 && $a.attr("href").toLowerCase().indexOf("https://") == -1 &&
$a.attr("href").toLowerCase().indexOf(".aspx") != -1 && $a.attr("href").toLowerCase().indexOf("qs=") == -1;
if (appendqstring ) {
event.preventDefault();
location.href = $a.attr("href") + "?qs=" + GetQStringVal("qs");
}
});
});
/* function to read value of the given key, x, from querystring */
function GetQStringVal(x) {
var a = location.search.substring(1); var b = a.split("&");
for (var i = 0; i < b.length; i++) {
var c = b[i].split("=");
if (c[0].toLowerCase() == x.toLowerCase()) { return c[1]; }
}
return "";
}
Resizing JavaScript pop-up windows to make use of the whole screen width and height
In theory the following line has to do it.
window.resizeTo(screen.width, screen.height);
But for some reason this does not work in IE. If you call window.moveTo(0,0) before calling resizeTo() it works.
I.e. if you add the following JavaScript lines in your page which is opened in a pop-up it will be resized to the screen width and height when the page is loaded.
window.moveTo(0,0);
window.resizeTo(screen.width, screen.height);
window.resizeTo(screen.width, screen.height);
But for some reason this does not work in IE. If you call window.moveTo(0,0) before calling resizeTo() it works.
I.e. if you add the following JavaScript lines in your page which is opened in a pop-up it will be resized to the screen width and height when the page is loaded.
window.moveTo(0,0);
window.resizeTo(screen.width, screen.height);
Subscribe to:
Posts (Atom)