dotnetrandz: javascript

Showing posts with label javascript. Show all posts

Friday, January 18, 2008

"Blog This" embedded blog editor

This post was created using Blog This - simple editor using the Blogger JavaScript API from Google Code. This functionality allows site visitors to create an entry on their blog wihtout leaving the page. Can't wait to embed this.

Thursday, January 10, 2008

Cool Javascript Trick

Here's an old Javascript trick that I found. I thought I'd share this with you. This works on any page with images on it. I have tried this on both Firefox and IE.

To test:

Go to a search engine (e.g. Google). Then search for images. Or click here to launch Google Image Search. After the search engine has returned results, copy the text below and paste it on the address bar.

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3= 1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI= document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos (R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0)

Hit enter, and there you go. Enjoy.

Wednesday, November 14, 2007

window.location.search Property

window.location.search Property

One of the not so commonly-used properties of window.location object in javascript is the window.location.searchproperty.

For example, in a web address like

http://www.my.org/pg.htm?user=2&role=admin

the window.location.search property will have all the characters after the "?" including it(?user=2&role=admin).
How can this information be useful? Well, for starter, we can access all the request parameters at client-side (using javascript) instead of processing it at server-side using codebehind. Since we have access to the request parameters,
we can do manipulations on its value or use the values contained in the request parameters to populate the value of the controls on the current page. For example, we have a web address like:

http://www.sample.org/login.htm?username=gotwald

if login.html contains usename and password input textboxes, we can automatically populate the username field with the value from the request parameters. See the screenshot below:

Here's the complete source of the sample:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
                window.onload = function()
               {
                    if(window.location != null && window.location.search.length > 1  )
                   {
                               var urlParameters = window.location.search.substring(1);
                       var parameterPair = urlParameters.split('&');
                       var pos = parameterPair[0].indexOf('=');
                       var argName = parameterPair[0].substring(0, pos);
                       var argVal = parameterPair[0].substring(pos + 1);
                       if(argName == 'username' )
                       {
                            document.getElementById('user').innerText = argVal;
                       }
                   }
               }
            </script>
        </head>
    <body>
        <table cellpadding="4" cellspacing="0">
           <tr>
               <td colspan="2">Enter login information</td>
            </tr>
            <tr>
               <td align="right">username:</td>
               <td><input type="text" size="25" id="user" name="user" /></td>
            </tr>
           <tr>
               <td align="right">password:</td><td><input type="text" size="25" id="pass" name="pass" /></td>
            </tr>
            lt;tr>
               <td align="right"></td>
               <td><input type="button" value="login" /></td>
            </tr>
        </table>
   </body>
</html>

Still you need to add input validation and error-handling in your code should you
need to adopt this sample code but the code itself is running on a "happy scenario",
if you know what I mean.

I thought You'd Like to Know

Difference between RegisterClientScriptBlock and RegisterStartupScript

Page.RegisterStartupScript (System.Web.UI)
Emits a client-side script block in the page response.
This method is now obsolete. Use ClientScript.RegisterStartupScript instead.

Page.RegisterClientScriptBlock (System.Web.UI)
Emits client-side script blocks to the response.
This method is now obsolete. Use ClientScript.RegisterClientScriptBlock instead.

A control can place a startup script on a page via the RegisterStartupScript method. You can also place a script block that needs to be explicitly called by other script code on the same page using the RegisterClientScriptBlock method.

The difference between the two methods is that that the latter goes in the top of the page (immediately below the opening tag of the Page's <form runat='server' /> element) and the former goes at the bottom (just before the closing tag of the Page's <form runat='server' /> element). This is important because inline script generally needs to go at the bottom so that the page objects exist before it executes. However, regular script (script methods that will be called based on other control's events) must go at the top in case a control is referencing it. For example, in an onClick event of a button, you would like to reference function foo(), and foo() was emitted via codebehind. The correct way of registering foo() is by using RegisterClientScriptBlock.