Create an Animation Using Ajax

ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh.

Ajax is “the method of exchanging data with a server, and updating parts of a web page - without reloading the entire page.”

Let's have a look at Ajax,

Animation.aspx

1. <%@ Page Language="C#" %>  
2.     <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
3.         <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
4.             <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>  
5.                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
6.                 <html xmlns="http://www.w3.org/1999/xhtml">  
7.   
8.                 <head id="Head1" runat="server">  
9.                     <title>Control Toolkit</title>  
10.                     <style type="text/css">  
11.                     .panelClass {  
12.                         background-color: lime;  
13.                         width: 300px;  
14.                     }  
15.                     </style>  
16.                     <script type="text/javascript">  
17.                     function pageLoad()  
18.                     {  
19.                         var ae = $find("ae");  
20.                         var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';  
21.                         ae.set_OnClick(animation);  
22.                         ae.OnClick();  
23.                     }  
24.                     </script>  
25.                 </head>  
26.   
27.                 <body>  
28.                     <form id="form1" runat="server">  
29.                         <asp:ScriptManager ID="ae" runat="server"> </asp:ScriptManager>  
30.                         <div>  
31.                             <asp:Panel ID="Panel1" CssClass="panelClass" runat="server"> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.  
32.                                 <br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.  
33.                                 <br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.  
34.                                 <br /> </asp:Panel>  
35.                             <input type="button" id="Button1" runat="server" value="Launch Animation" />  
36.                             <cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Button1"> </cc1:AnimationExtender>  
37.                         </div>  
38.                     </form>  
39.                 </body>  
40.   
41.             </html>  

Guys, Please download Ajax Control Toolkit if you don't have already. 

Keep exploring. If you have any doubt, please feel free to ask me.

Read WhatsApp Web DOM Elements Using Chrome Extension

A Chrome extension gives Image Paths and Captions of Images which are posted in a WhatsApp Group.

Writing a Chrome extension can be a bit tricky initially, due to its API and the way you have to structure your code. 

In this post, I want to show how you can write a simple extension that reads the Dom Elements of the WhatsApp Web page once it’s loaded. The whole lot is in Javascript, which gives you easy access to the DOM.

Features of Chrome Extension (Information Display in Console)

• Image Paths are displayed.
• Image Captions are displayed.
• The Image who has no caption to display, for that "No Caption" Text is displayed.
• Image Paths and Captions are displayed in a consecutive manner. So that End User can easily find out the Caption with respect to the Image.

Architecture of an Extension

• Background page - not visible by the user. A long running script that handles the state of your extension. Communicates with other parts of the extension with messaging.
• Event page - the same as a background page, but only executes in response to events you define. Preferred to background pages as they are less resource intensive.
• Options page - UI page that allows a user to set options. An HTML page that references javascript files.
• Browser actions/page actions - an icon either in the extension bar or the Omnibox respectively. Clicking on the icon will show an UI tab which is an HTML page that can reference javascript. These pages cannot communicate with the website resources/DOM, it needs to message the content script to do that.
• Content scripts - javascript only. What is used to modify the page itself? The only part that can access and modify the DOM but not code loaded by the website. Files are run once for each page that matches the manifest. All the JS files in the list are loaded so you can use libraries just by including it. This is what we’ll use for our extension.

There are plenty more elements that can be used in an extension, but this list covers the core that will get most of your extension built and most other parts are for specific tasks.

Permissions

When users see ‘This extension can see and modify data on all pages’, they get nervous. So it’s best to limit where your extension will be active by explicitly setting permissions in the manifest.

You’ll also need to specify what pages your content scripts will match and run on. 

[manifest.json]

"permissions": [

    "tabs", "http://www.google.com/*"

  ],

Writing your own extension

Let’s start with the manifest. We need to state which version it is, if you’re uploading a new version to the web store, the version number must be greater than the existing one. Don’t confuse this with the manifest_version, which is always 2 and is not extension specific.

Create a new folder called ‘WhatsAppWeb’ then a new file called ‘manifest.json’ inside it and copy the following into it.

[manifest.json]

{   "manifest_version": 2,

     "name": "WhatsAppWeb",

    "description": "This extension gives Image Paths and Captions of Images which was Posted in a WhatsApp Group.",

    "version": "1.1",

    "icons": {

    "16": "daisy_16.png",

    "48": "daisy_48.png",

    "128": "daisy_128.png"

    },

    "content_scripts": [

        {"matches": ["https://web.whatsapp.com/*"],

            "js": ["jquery-2.2.0.min.js", "whatsappweb.js"],

            "run_at": "document_end" } ] 

}

You must supply 3 icons in sizes 16, 48 and 128 px. These are used on the extension page and the toolbar.

You can now load your extension into Chrome. Go to Window -> Extensions to open the extensions page. Tick developer mode on the top right which allows you to load your own extensions. Click the ‘Load unpacked extension’ button and then select the ‘WhatsAppWeb’ directory. You should now have something that looks like this:

To modify a page we need a content script. Now save a new file called whatsappweb.js and the following as the content:

[whatsappweb.js]

document.addEventListener("DOMNodeInserted", function (event) {

    var tempHTML = "<html>" + $("html").html() + "</html>";

    loadData();

});

function loadData() {

    var images = [];

    var caption = [];

    

    $("#main .message-list .msg .bubble-image img").each(function () {

        images.push($(this).attr('src'));

    })

    console.log(images);

    

    $("#main .message-list .msg .bubble-image").each(function (i) {

        if ($(this).children('.image-caption').length > 0 &&      $(this).children('.image-caption').length !== 'undefined') 

 {

         caption.push($(this).children('.image-caption').children('.emojitext').text());

        } 

        else {

          caption.push("No Caption");

        }

    })

    console.log(caption);

}

Go back to the extensions page and hit reload or press Ctrl + R (this is very important. If you ever wonder why nothing changed even though you updated the code this is probably the reason).

Go to a WhatsApp Web. Use WhatsApp on your phone to scan the code. Once you have done with it, your WhatsApp screen will be visible on your Desktop/Laptop Screen. 

Create a dummy group says for example "Test", add some participants in it. Now post a couple of images with captions as well as without captions in the same group. Ask Group Participants to post the same. 

Now press an F12 key, go to Console Tab. You get the following output.

Image Paths and Captions are displayed in a sequential manner. So that End User can easily find out the Caption with respect to the Image.

In this way, you can read WhatsApp Web Dom Elements Using Chrome Extension. I am attaching Source Code for your reference.

Source Code

Happy learning..:)

  

Implementation of Text Chat Using JaxterChat Control in ASP.NET

JaxterChat is an effective tool for nurturing online communities within your website. By combining the rapid response of ajax with the power and flexibility of ASP.NET, 

JaxterChat supports a rich designer interface for previewing the appearance of the control at design time. Display properties can be adjusted and the effects of these changes are reflected instantly in the Visual Studio designer view.

Now We are going to implement Text Chat using Jaxter Chat control in ASP.NET.

Textchat.aspx

1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  

1.   

1.     <%@ Register assembly="JaxterChat" namespace="WebFurbish" tagprefix="cc1" %>  

1.   

1.         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

1.   

1.         <html xmlns="http://www.w3.org/1999/xhtml">  

1.   

1.         <head runat="server">  

1.   

1.             <title></title>  

1.   

1.         </head>  

1.   

1.         <body style="height: 316px">  

1.   

1.             <form id="form1" runat="server">  

1.   

1.                 <div>  

1.   

1.   

1.                     <cc1:JaxterChat ID="JaxterChat1" runat="server" BackColor="#A0AB9D" BackImageUrl="JaxterChat/Themes/Googleish/back_strip_4.jpg" ClearPageButtonImageUrl="JaxterChat/Images/clear_page.gif" EmoticonsButtonImageUrl="JaxterChat/Images/emoticons.gif" FontColor="MidnightBlue" FontFace="Arial, Verdana" FontSizePixels="12" FooterPanelHeightPixels="0" HeaderPanelHeightPixels="23" Height="300px" MessageInputBackColor="White" MessageInputBorderColor="DarkGray" MessageInputBorderWidthPixels="1" MessageInputFontColor="Black" MessageInputFontFace="Arial, Verdana" MessageInputFontSizePixels="12" MessageInputHeightPixels="38" MessageInputPaddingBottomPixels="1" MessageInputPaddingLeftPixels="1" MessageInputPaddingRightPixels="1" MessageInputPaddingTopPixels="1" MessageOutputBackColor="White" MessageOutputBorderColor="DarkGray" MessageOutputBorderWidthPixels="1" MessageOutputFontColor="Black" MessageOutputFontFace="Arial, Verdana" MessageOutputFontSizePixels="12" MessageOutputLinkColor="90, 128, 198" MessageOutputPaddingBottomPixels="1" MessageOutputPaddingLeftPixels="8" MessageOutputPaddingRightPixels="1" MessageOutputPaddingTopPixels="2" MessageOutputPostIconUrl="JaxterChat/Themes/Googleish/icon.gif" MessageOutputUserNameFontColor="Black" PaddingBottomPixels="5" PaddingLeftPixels="4" PaddingRightPixels="4" PaddingTopPixels="3" PopupCloseButtonImageUrl="JaxterChat/Images/popup_close.gif" PopupWindowBackColor="Gainsboro" PopupWindowContentFontColor="Black" PopupWindowContentFontFace="Arial, Verdana" PopupWindowContentFontSizePixels="10" PopupWindowTitleFontColor="Black" PopupWindowTitleFontFace="Arial, Verdana" PopupWindowTitleFontSizePixels="12" ScrollBarIE3DLightColor="White" ScrollBarIEArrowColor="LightGray" ScrollBarIEBaseColor="Silver" ScrollBarIEDarkShadowColor="Silver" ScrollBarIEFaceColor="White" ScrollBarIEHighlightColor="AliceBlue" ScrollBarIEShadowColor="Silver" ScrollBarIETrackColor="Gainsboro" SendButtonImageUrl="JaxterChat/Images/send_button.gif" ShowSendButton="False" ToggleSoundOffButtonImageUrl="JaxterChat/Images/sound_off.gif" ToggleSoundOnButtonImageUrl="JaxterChat/Images/sound_on.gif" ToolbarPanelHeightPixels="21" UserListButtonImageUrl="JaxterChat/Images/users.gif" Width="359px">  

1.   

1.                     </cc1:JaxterChat>  

1.   

1.                     <br />  

1.   

1.                     <br />  

1.   

1.   

1.                 </div>  

1.   

1.             </form>  

1.   

1.         </body>  

1.   

1.         </html>  

Guys, I have attached source code with JaxterChat Package. Keep exploring. If you have any doubt, please feel free to ask me.

Source Code

Set Background Image throughout Webpage Using HTML5 and CSS3

In HTML,

Let me explain the steps first:

• Create a container such as <Div> tag.
• Take an <img> tag in Div (Specify appropriate 'src' attribute of <img> tag).
• Take another <Div> tag inside the outer container.
• Close the outer container.
  
  So, your code will look like the following code snippet:
  

In CSS,

Let me explain some steps:

• Define Position, Height and Width of Outer Container.
• Define Background Position, Background Repeat, Background Size, Height and Width of <img> tag.
• Define Position, Top, Left, Width, Z-Index for inner <div> tag. (Define Color, Font-family, Font-size, Text-align for displaying textual information if require.).

So, your CSS file will look like the following code snippet:

Key Points:

• Always define Height and Width of Container and Image in Percentage (%) rather than defining in Pixels. It really decreases your efforts for making your site responsive.
• Two important properties of <img> tag which you have to specify such as Background-Position and Background-Size.
• Background Position specifies at which position image should display.
• Background Size: Cover specified image should display throughout the page means it covers a particular area of a page. Image scales according to page size changes.

So, at last, you will get one page having a background image which can be automatically resized according to resolution (Responsive Web Design comes in the picture).

This type of solution is helpful when you make your page for various Mobile (320,360,480,640), I phone(375/376,667), I pad (1024) as well as Desktop (1024,1366,1600) Resolutions.

Demo Example (Source Code)