Twitter Feed Popout byInfofru

Dynamically control the scroll amount of marquee

Having a marquee on a page is not a big deal but what if somebody wants user to adjust the speed of the moving text. So the idea is we have many marquee in one page and we want to adjust their speed using two javascript Buttons called "Speed Up" and "Speed Down"The logic is very simple, the marquee tags which you want to control with the help of buttons give them name in my case it is "Scrollers" (Remember it is name not id, so you can give same name to as many controls).Now call the following function on "Speed Up" and "Speed Down" button respectively.
   1: function speedUp()
   2: {
   3:     var obj = document.getElementByName("scrollers")
   5:     for (i=0;i<=obj.Length -1;i++)
   6:     {
   7:         obj[i].scrollAmount = obj[i].scrollAmount * 3 - obj[i].scrollAmount
   8:     }
   9: }
  11: function speedDown()
  12: {
  13:     var obj = document.getElementByName("scrollers")
  15:     for (i=0;i<=obj.Length -1;i++)
  16:     {
  17:         obj[i].scrollAmount = obj[i].scrollAmount * (10/7) - obj[i].scrollAmount
  18:     }
  19: }
That's it

Passing Parameter To User Control On A Modal Popup

This is the most demanded scenario for the one who are using AJAX Control Toolkit, I mean I have seen most of the people asking for this feature on forum.

Unfortunately, we have no such functionality provided in Modal Popup because the control get rendered once the page is loaded and the Modal Popup is just a JavaScript which work is just to display a div which is hidden.

Here is a little work around for those who wants to pass parameter to user control using Modal Popup. Basically, the idea is to keep the user control in a separate page and call that page using JavaScript and put the response on the a Modal Popup Div.

Remember, as this is only a JavaScript we need to set the parameter using JavaScript or we need to save the parameters on Page_Load in any Hidden field and access that later from JavaScript.

To start, I have created two pages and a user control following is the naming stuff for them

  1. Default.aspx (Contains Modal Popup)
  2. ControlCaller.aspx  (Contains User Control)
  3. Controls.ascx (User Control)

Default.aspx page html will look like as follows

   1: <form id="form1" runat="server">
   2:     <div>
   4:         <asp:ScriptManager ID="ScriptManager1" runat="server">
   5:         </asp:ScriptManager>
   6:         <asp:Button ID="Button1" runat="server" Text="Show Popup" OnClientClick="setupParam()" />
   8:     </div>
   9:     <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlControl" TargetControlID="Button1">
  10:     </cc1:ModalPopupExtender>
  11:     <asp:Panel ID="pnlControl" runat="server">
  13:     </asp:Panel>
  15:     <asp:HiddenField ID="hf_username" runat="server" />
  16:     <asp:HiddenField ID="hf_password" runat="server" />
  17:     <asp:HiddenField ID="hf_registredDate" runat="server" />
  19:     </form>

Keep in mind that the three hidden fields I have taken here are for the Parameters.

Now Let's see what we have in ControlCaller.aspx

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ControlCaller.aspx.cs" Inherits="LearnWebApp.ControlCaller" %>
   2: <%@ Register src="Controls/Control.ascx" tagname="Control" tagprefix="uc1" %>
   3:     <uc1:Control ID="Control1" runat="server" />

Just user control implementation and nothing else. Please make sure to remove all the head, html and form tags.

Following is the html of Control.ascx

   1: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Control.ascx.cs" Inherits="LearnWebApp.Controls.Control" %>
   2: User Name :
   3: <asp:Label ID="lblUserID" runat="server" Text="Label"></asp:Label>
   4: <br />
   5: Registered Date :
   6: <asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
   7: <br />
   8: Password:
   9: <asp:Label ID="lblPassword" runat="server" Text="Label"></asp:Label>

And here is the code behind of the Control

   1: private string _userName;
   2:         private string _RegisteredDate;
   3:         private string _Password;
   5:         public string userName
   6:         {
   7:             get { return _userName; }
   8:             set { _userName = value; }
   9:         }
  10:         public string RegisteredDate
  11:         {
  12:             get { return _RegisteredDate; }
  13:             set { _RegisteredDate = value; }
  14:         }
  15:         public string Password
  16:         {
  17:             get { return _Password; }
  18:             set { _Password = value; }
  19:         }
  20:         protected void Page_Load(object sender, EventArgs e)
  21:         {
  22:             if (!Page.IsPostBack) 
  23:             {
  24:                 lblDate.Text = _RegisteredDate;
  25:                 lblPassword.Text = _Password;
  26:                 lblUserID.Text = _userName;
  27:             }
  28:         }

Please bear in mind, that the properties we have taken here are for the parameters as you can see I am also setting these properties on label at Page_Load.

and here we have the script which we need to add on the default.aspx head section

   1: <script language="javascript">
   2:     var request = false;
   3:        try {
   4:          request = new XMLHttpRequest();
   5:        } catch (trymicrosoft) {
   6:          try {
   7:            request = new ActiveXObject("Msxml2.XMLHTTP");
   8:          } catch (othermicrosoft) {
   9:            try {
  10:              request = new ActiveXObject("Microsoft.XMLHTTP");
  11:            } catch (failed) {
  12:              request = false;
  13:            }  
  14:          }
  15:        }
  17:       function GetResult() {
  18:         var divComm = document.getElementById('pnlControl');
  19:         divComm.innerHTML = "Please wait processing your request!!!";
  20:         var rnd = Math.random() * 1000000;
  21:         var url = 'ControlCaller.aspx?userName=' +document.getElementById("hf_username").value + "&password=" + document.getElementById("hf_password").value  + "&Date="+ document.getElementById("hf_registredDate").value  +'&rnd=' + rnd;
  22:"GET", url, true);
  23:         request.onreadystatechange = GetResultComplete;
  24:         request.send(null);
  25:     }
  26:     function GetResultComplete() {
  27:         if (request.readyState == 4) {
  28:             //alert(request.responseText);
  29:             if (request.status == 200) {
  30:                 var divComm = document.getElementById('pnlControl');
  31:                 if (divComm) {
  32:                     divComm.innerHTML = request.responseText;
  33:                 }
  34:             }
  35:         }
  36:     }
  37:     function setupParam()
  38:         {
  39:             document.getElementById("hf_username").value = "User is for test !!!";
  40:             document.getElementById("hf_password").value  = "testing.....";
  41:             document.getElementById("hf_registredDate").value  = "10/04/84";
  42:             GetResult();
  44:         }
  45:     </script>

Notice the setupParam() function, we are setting our parameter here and then call the GetResult function which is making an AJAX call to the page we have created. That's it by using this method we can have parameterized user control inside Modal Popup.

You can download the full Visual Studio 2008 Project from here.

Disable Control When AJAX is in progress

If the AJAX call to the server take too much time, then there is a possibility that user might press some other buttons or some other event occurred which will cause your AJAX call to stop and make a new request.

To overcome this situation, I decided to have div on the top of the page so that while AJAX call is in progress user cannot do any thing else.

So I simply Drag and Drop a Update Progress Control and write the following stuff.

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <div id="Progress">Please wait ......</div>
       <div id="bgDiv"></div> 

And add the following style on head section of the page.

   1: <style>
   2:     #bgDiv {
   3:       position:absolute;
   4:       top:0px;
   5:       bottom:0px;
   6:       left:0px;
   7:       right:0px;
   8:       overflow:hidden;
   9:       padding:0;
  10:       margin:0;
  11:       background-color:black; 
  12:       filter:alpha(opacity=50);
  13:       opacity:0.5;
  14:       z-index:500;
  15:     }
  16:     #Progress
  17:     {
  18:         position: absolute;
  19:         background-color:Red;
  20:         width: 300px;
  21:         z-index: 600;
  22:     }
  25:     </style>

There we go whenever AJAX call made, a background div will appear and on top of that we have our message "Please wait"

Here is the snapshot


Event Bubbling in Javascript

Today, while creating some javascript popup I had a condition in which I place onclick function on body tag. I had an other button which also implement onclick. So the code looks like as follows

   1: <body onclick="disappearPopup()">
   2: <a href="#" onclick="ShowPopup()">Show me</a>
   3: </body>

So, what happen is whenever link is click the body clicked even called automatically. Practically speaking, we need to cancel the body onclick even each time we click the link click.

And for that I write the following code on click of the link

   1: if (window.event) {
   2:     window.event.cancelBubble = true;
   3: }
   4: else {
   5:     e.stopPropagation();
   6: }

And it works ....

Different Style for IE7 and Firefox in CSS

Well, I with my designer Atiq was trying to set the a div which is working fine in IE7 but when it comes to Firefox, it was asking us to give the margin-top:10px. when we put that, the div comes down in IE7. So, in this situation we need to specify two different styles for these two browsers.

I don't want to use that, which can also be done using the following HTML.

   1: <!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]--> 

But I don't want to create two css files for this work. Somehow, I want to mage it in the name same CSS. So what I did is so I use Child Selector Command and Star HTML Hack.

Child Selector Command is not understandable by IE, hence whenever it gets something like this .... IE Ignores the style. So I decided to specify Firefox stuff here. it looks like as follows

   1: html>body #ContainerCodeQuestionAnser
   2: {
   3:     position:absolute; z-index:50;background-color:#FFFFFF;width:auto;
   4:     height:20px;margin-left:10px;overflow:hidden;top:10px; /*top is for firefox*/
   5:     }

In contrast, Star HTML Hack is not understandable by any other browser except IE. So IE Stuff Goes here.

   1: * #ContainerCodeQuestionAnser
   2: {
   3:     position:absolute; z-index:50;background-color:#FFFFFF;width:auto;
   4:     height:20px;margin-left:10px;overflow:hidden;
   5:     }

That's it ... the design looks really good.......

Get Current Time Using JavaScript

Here is the quick code to get the current time in 12 hours format using JavaScript.

   1: <script language="javascript">
   2: function getTime() {
   3:     var dTime = new Date();
   4:     var hours = dTime.getHours();
   5:     var minute = dTime.getMinutes();
   6:     var period = "AM";
   7:     if (hours > 12) {
   8:         period = "PM"
   9:     }
  10:     else {
  11:         period = "AM";
  12:     }
  13:     hours = ((hours > 12) ? hours - 12 : hours)
  14:     return hours + ":" + minute + " " + period
  15: }
  16: </script>

Z-Index Problem with Flash Object

From this morning I have been snatching my hairs over a very strange problem with Flash Object. Actually I am not a Flash Guru, but I just want to place a flash animation on the home page of the web site which is unfortunately using the Asp Horizontal Menu. The problem lies when the menu drops down and it goes behind the flash object. I thought it is z-index issues, that’s why I put style tag on object tag and give z-index but it didn’t tricked. After full one day of working over it as there is no comprehensive post on the Internet for this sick problem. Here is the snippet which works like a charm for me. 
   1: <div id="Container">
   2:  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,28,0" width="960" height="370">
   3:   <param name="wmode" value="transparent">
   4:   <param name="movie" value="../banner/banner.swf"/>
   5:   <param name="quality" value="high" />
   6:   <embed src="../banner/banner.swf" quality="high" pluginspage="" type="application/x-shockwave-flash" width="960" height="370" wmode="transparent"></embed>
   7:   </object>
   8:   </div>
I create new param called “wmode” and set its value to “transparent”. In embed tag I specify wmode="transparent" I take the flash object in a div and here is the style for that div.
   1: <style type="text/css">
   2:     #Container
   3:     {
   4:         position: relative; /*or absolute*/
   5:         z-index: 1;
   6:     }
   7: </style>
Now take the Asp Menu in a div and give z-index value higher then we have one in object container div. Also, it is worth to mention here that the flash script generated from Dreamweaver usually contain the following installation script as well which is not compatible to work with this.
   1: <script type="text/javascript">
   2: AC_FL_RunContent( 'codebase',',0,28,0','width','960','height','370','src','file://Path','quality','high','pluginspage','','movie','file:///Path' ); //end AC code
As I said I am not a flash champ, but at least in my case this code was creating problem. So I preferred to delete this ;)