LanceZhang’s Blog

Dear friends, Welcome to my blog.

Preview and check Image info before upload

That will only work in IE:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>validate before upload by Lance Zhang</title>
</head>
<body style=”font-family:Calibri”>
    <form name=”Myform”>
    <p>
        <font color=”red” size=”6″>File type :gif,jpg,jpeg,png,bmp</font></p>
    <p>
        File Size limit:
        <input type=”text” size=”4″ value=”100″ name=”fileSizeLimit” id=”fileSizeLimit” />
        K</p>
    <p>
        Image Height Limit: <input type=”text” size=”4″ value=”100″ name=”heightLimit” id=”heightLimit” />
    </p>
    <p>
        Image Width Limit: <input type=”text” size=”4″ value=”100″ name=”widthLimit” id=”widthLimit” />
    </p>
    <p>
        <input type=”file” name=”photo” onchange=”changeSrc(this)” />
        Image Preview<img src=”about:blank” id=”fileChecker” name=”fileChecker” alt=”test” />
    </p>
    <p>
        <input type=”submit” value=”submit”>
    </p>
    </form>

    <script type=”text/javascript”>
      function   CheckFileSize()   
      { 
        var limit = document.getElementById(“fileSizeLimit“).value * 1024;
        var width = document.getElementById(“widthLimit“).value ;
        var height = document.getElementById(“heightLimit“).value;
     
        if (oFileChecker.fileSize > limit)
        {
            alert(“FileSize :“+oFileChecker.fileSize+“byte–too large!“);
        }
        else
        {
            alert(“FileSize :“+oFileChecker.fileSize+“byte–ok“);
        }
     
        if(  oFileChecker.height> height)
        {
            alert(“ImageHeight :“+oFileChecker.height+“–too height!“);
        }
        else
        {
            alert(“ImageHeight :“+oFileChecker.height+“–ok“);
        }
        if(oFileChecker.width> width)
        {
            alert(“ImageWidth :“+oFileChecker.width+“–too width!“);
        }
        else
        {
            alert(“ImageWidth :“+oFileChecker.width+“–ok“);
        }
            return false;   
      } 
      
      var right_type=new Array(“.gif“,“.jpg“,“.jpeg“,“.png“,“.bmp“);

      var oFileChecker = document.getElementById(“fileChecker“);

     function changeSrc(filePicker)
     { 
        if(!checkImgType(filePicker.value))
        {
            alert(“the file type is not correct“);
            return;
        }
        oFileChecker.src = filePicker.value;
     }

    oFileChecker.onreadystatechange = function ()
    { 
        if (oFileChecker.readyState == “complete“)
        {
            CheckFileSize();
        }
    }

    function checkImgType(fileURL)
    {
        var right_typeLen=right_type.length;
        var imgUrl=fileURL.toLowerCase();
        var postfixLen=imgUrl.length;
        var len4=imgUrl.substring(postfixLen-4,postfixLen);
        var len5=imgUrl.substring(postfixLen-5,postfixLen);
        for (i=0;i<right_typeLen;i++)
        {
            if((len4==right_type[i])||(len5==right_type[i]))
            {
                return true;
            }
        }
    }

</script>

</body>
</html>

February 16, 2009 Posted by Lance Zhang | Code and Solution, JavaScript | | 4 Comments

TinyMCE Editor and Ajax Control Toolkit Tab Control

As we know, the ASP.NET forum’s add post page contains a TabContainer control in one TabPanel there is a TinyMCE Editor for edit the post, another TabPanel is use for preview the post.

In this case, I have created a demo like that:

<%@ Page Language=”C#” ValidateRequest=”false” %>

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

<script runat=“server”>

</script>

<html xmlns=“http://www.w3.org/1999/xhtml”>
<head id=“Head1″ runat=“server”>
    <title></title>
    <!– TinyMCE –>

    <script src=“tiny_mce/tiny_mce.js” type=“text/javascript”></script>

    <script type=“text/javascript”>
        tinyMCE.init({
            // General options
            mode: “textareas”,
            theme: “advanced”,
            plugins: “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,

insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,

            // Theme options
            theme_advanced_buttons1: “save,newdocument,|,bold,italic,underline,strikethrough,|

,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
            theme_advanced_buttons2: “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|

,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
            theme_advanced_buttons3: “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|

,print,|,ltr,rtl,|,fullscreen”,
            theme_advanced_buttons4: “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,

|,visualchars,nonbreaking,template,pagebreak”,
            theme_advanced_toolbar_location: “top”,
            theme_advanced_toolbar_align: “left”,
            theme_advanced_statusbar_location: “bottom”,
            theme_advanced_resizing: true,

            // Example content CSS (should be your site CSS)
            content_css: “css/content.css”,

            // Drop lists for link/image/media/template dialogs
            template_external_list_url: “lists/template_list.js”,
            external_link_list_url: “lists/link_list.js”,
            external_image_list_url: “lists/image_list.js”,
            media_external_list_url: “lists/media_list.js”,

            // Replace values for the template plugin
            template_replace_values: {
                username: “Some User”,
                staffid: “991234″
            }
        });
    </script>

    <!– /TinyMCE –>
</head>
<body>
    <form id=“form1″ runat=“server”>
    <div>
        <asp:ScriptManager ID=“ScriptManager1″ runat=“server”>
        </asp:ScriptManager>
        <ajaxToolkit:TabContainer ID=“TabContainer1″ runat=“server” ActiveTabIndex=“0″ Height=“300px”
            Width=“100%” OnClientActiveTabChanged=“preview”>
            <ajaxToolkit:TabPanel runat=“server” HeaderText=“Edit Post” ID=“TabPanel1″>
                <ContentTemplate>
                    <!– Gets replaced with TinyMCE, remember HTML in a textarea should be encoded –>
                    <textarea id=“elm1″ name=“elm1″ rows=“15″ cols=“80″ style=“width: 99%; height: 280px;”>
        <p>
        <img src=“media/logo.jpg” alt=” “ hspace=“5″ vspace=“5″ width=“250″ height=“48″ align=“right” />    TinyMCE is a platform independent web based Javascript HTML <strong>WYSIWYG</strong> editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.
        </p>
        <p>
        We recommend <a href=“http://www.getfirefox.com” target=“_blank”>Firefox</a> and <a href=“http://www.google.com” target=“_blank”>Google</a> <br />
        </p>
    </textarea>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat=“server” HeaderText=“Preview” ID=“TabPanel2″>
                <ContentTemplate>
                    <asp:Label ID=“Label1″ runat=“server” Text=“Label”></asp:Label>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat=“server” HeaderText=“TabPanel3″ ID=“TabPanel3″>
                <ContentTemplate>
                    Other
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
        <asp:Button ID=“Button1″ runat=“server” Text=“Button” OnClientClick=“document.write(tinyMCE.get(‘elm1′).getContent());return false;” />
    </div>

    <script type=“text/javascript”>

        function preview() {
            if ($find(“TabContainer1″).get_activeTabIndex() == 1) {
                $get(“<%=Label1.ClientID %>”).innerHTML = tinyMCE.get(‘elm1′).getContent();
            }
        }
    </script>

    </form>
</body>
</html>

January 20, 2009 Posted by Lance Zhang | ASP.NET AJAX, ASP.NET AJAX Advance Tips & Tricks, Code and Solution, JavaScript | , , | No Comments Yet

Create Tooltip dynamically by AJAX PageMethod

Use Pop up div by JavaScript or AJAX Control Toolkit’s Hover Menu control can create a Tooltip easily.

However, if we need to create the content of tooltip dynamically by the Server-Side code, we can use the ICallbackEventHandler to achieve the faing goal, just like the solution in following link:

http://lancezhang.wordpress.com/2008/12/04/create-tooltip-dynamically

When you move the mouse on the text, the related image and text which will be created on the code-behind show up in the tooltip after 1 second. during the loading process, a “loading” gif picture will display in the tooltip box.

If we are using ASP.NET AJAX, the same effect can be achieve by AJAX Page Method easily.

Ok, here we go:

Step 1:

we need to set the EnablePageMethods=”true” for our ScriptManager or ToolkitScriptManager:

<asp:ScriptManager ID=“ScriptManager1″ runat=“server” EnablePageMethods=“true”>
</asp:ScriptManager>

Step 2:

Let’s create the Server-side method for create tooltip message, please notice the using references and attribute:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

[ScriptService]
public partial class tooltiptest2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetTooltip(string imagename)
    {
        System.Threading.Thread.Sleep(1000);
        return @”this is just a demo: <br><img src=’” + imagename + “‘/>”;
    }
}

 

Step 3:

Complete the JavaScript code to invoke the page method:

<script type=“text/javascript”>
    var positionX;
    var positionY;

    function onSuccess(value, ctx, methodName) {
        document.getElementById(‘tooltipDiv’).innerHTML = value;
    }

    function onFailed(ex, ctx, methodName) {
        alert(ex.get_exceptionType());
    }

    function HandleMouseOut() {
        document.getElementById(‘tooltipDiv’).style.display = ‘none’;
        document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”;
    }

    function HandleMouseOver(Label) {

        PageMethods.GetTooltip(Label.innerText, onSuccess, onFailed);

        positionX = event.clientX;
        positionY = event.clientY;
        document.getElementById(‘tooltipDiv’).style.left = positionX;
        document.getElementById(‘tooltipDiv’).style.top = positionY;
        document.getElementById(‘tooltipDiv’).style.display = ‘block’;
    }
  
</script>

OK, the full code is following:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”tooltiptest2.aspx.cs” Inherits=”tooltiptest2″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head id=“Head1″ runat=“server”>

    <script type=“text/javascript”>
        var positionX;
        var positionY;

        function onSuccess(value, ctx, methodName) {
            document.getElementById(‘tooltipDiv’).innerHTML = value;
        }

        function onFailed(ex, ctx, methodName) {
            alert(ex.get_exceptionType());
        }

        function HandleMouseOut() {
            document.getElementById(‘tooltipDiv’).style.display = ‘none’;
            document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”;
        }

        function HandleMouseOver(Label) {

            PageMethods.GetTooltip(Label.innerText, onSuccess, onFailed);

            positionX = event.clientX;
            positionY = event.clientY;
            document.getElementById(‘tooltipDiv’).style.left = positionX;
            document.getElementById(‘tooltipDiv’).style.top = positionY;
            document.getElementById(‘tooltipDiv’).style.display = ‘block’;
        }
      
    </script>

    <style type=“text/css”>
        .style1
        {
            border: 1px solid #96C2F1;
            background-color: #EFF7FF;
            position: absolute;
            display: none;
            filter: alpha(opacity=80);
            opacity: 0.80;
        }
    </style>
    <title>Untitled Page</title>
</head>
<body style=“font-family: Calibri; font-size: 15px;”>
    <form id=“form1″ runat=“server”>
    <asp:ScriptManager ID=“ScriptManager1″ runat=“server” EnablePageMethods=“true”>
    </asp:ScriptManager>
    <div id=“tooltipDiv” class=“style1″>
        <img src=“loading.gif” />
    </div>
    <div>
        <asp:Label ID=“Label1″ runat=“server” Text=“http://forums.asp.net/Themes/FAN/style/i/logo.png”
            onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label>
        <br />
        <br />
        <br />
        <br />
        <asp:Label ID=“Label2″ runat=“server” Text=“http://forums.asp.net/Themes/fan/images/roleicons/a874d69e-0ac8-4b80-acc7-512767e281f6.gif”
            onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

[ScriptService]
public partial class tooltiptest2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetTooltip(string imagename)
    {
        System.Threading.Thread.Sleep(1000);
        return @”this is just a demo: <br><img src=’” + imagename + “‘/>”;
    }
}

January 12, 2009 Posted by Lance Zhang | ASP.NET, ASP.NET AJAX, ASP.NET AJAX Advance Tips & Tricks, Code and Solution, JavaScript | , , | 5 Comments

Detect OS and Browser by JavaScript

/*
* Check the Browser and OS
* Author:Nicholas C. Zakas
*/
/*
* Check the Browser
*/

//Save the user-agent string
var sUserAgent = window.navigator.userAgent;
//Save the Browser’s version
var fAppVersion = parseFloat(window.navigator.appVersion) ;

/*
* Compare the browser version
*/
function compareVersions(sVersion1,sVersion2)
{
    var aVersion1 = sVersion1.split(“.”);
    var aVersion2 = sVersion2.split(“.”);
   
    if(aVersion1.length < aVersion2.length)
    {
        for(var i=0;i<aVersion2.length-aVersion1.length;i++)
           aVersion1.push(“0″);
    }else if(aVersion2.length < aVersion1.length)
    {
        for(var i=0;i<aVersion1.length-aVersion2.length;i++)
           aVersion2.push(“0″);
    }
    for(var i=0;i<aVersion1.length;i++)
    {
        var iVal1 = parseInt(aVersion1[i],10);
        var iVal2 = parseInt(aVersion2[i],10);
       
        if(iVal1<iVal2)
           return -1;
        else if(iVal1>iVal2)
           return 1;
    }
    return 0;
}

/*
* Opera
*/
var isOpera = sUserAgent.indexOf(“Opera”)>-1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;
if(isOpera)
{
    var fOperaVersion;
    if(window.navigator.appName==“Opera”)
    {
        fOperaVersion = fAppVersion;
    }else
    {
        var reOperaVersion = new RegExp(“Opera (\\d+\\.\\d+)”);
        reOperaVersion.test(sUserAgent);
        fOperaVersion = parseFloat(RegExp["$1"]);
    }
   
    isMinOpera4 = fOperaVersion>=4;
    isMinOpera5 = fOperaVersion>=5;
    isMinOpera6 = fOperaVersion>=6;
    isMinOpera7 = fOperaVersion>=7;
    isMinOpera7_5 = fOperaVersion>=7.5;
}

/*
* Konqueror/Safari
*/

var isKHTML = sUserAgent.indexOf(“KHTML”)>-1
              ||sUserAgent.indexOf(“Konqueror”)>-1
              ||sUserAgent.indexOf(“AppleWebKit”)>-1;

if(isKHTML)
{
    isSafari = sUserAgent.indexOf(“AppleWebKit”)>-1;
    isKonq = sUserAgent.indexOf(“Konqueror”)>-1;
    var isMinSafari1 = isMinSafari1_2 = false;
    var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;
   
    if(isSafari)
    {
        var reAppleWebKit = new RegExp(“AppleWebKit\\/(\\d+(?:\\.\\d*)?)”);
        reAppleWebKit.test(sUserAgent);
        var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
       
        isMinSafari1 = fAppleWebKitVersion>=85;
        isMinSafari1_2 = fAppleWebKitVersion>=124;
    }
   
    else if(isKonq)
    {
        var reKonq = new RegExp(“Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)”);
        reKonq.test(sUserAgent);
        isMinKonq2_2 = compareVersions(RegExp["$1"],“2.2″)>=0;
        isMinKonq3 = compareVersions(RegExp["$1"],“3.0″)>=0;
        isMinKonq3_1 = compareVersions(RegExp["$1"],“3.1″)>=0;
        isMinKonq3_2 = compareVersions(RegExp["$1"],“3.2″);
    }
}

/*
* IE
*/
var isIE = sUserAgent.indexOf(“compatible”)>-1
            && sUserAgent.indexOf(“MSIE”)>-1
            && !isOpera;
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;

if(isIE)
{
    var reIE = new RegExp(“MSIE (\\d+\\.\\d+);”);
    reIE.test(sUserAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
   
    isMinIE4 = fIEVersion>=4;
    isMinIE5 = fIEVersion>=5;
    isMinIE5_5 = fIEVersion>=5.5;
    isMinIE6 = fIEVersion>=6.0;
}

/*
* Mozilla
*/
var isMoz = sUserAgent.indexOf(“Gecko”)>-1 && !isKHTML;
var isMinMoz1 = isMinMoz1_4 = isMinMoz1_5 = false;

if(isMoz)
{
    var reMoz = new RegExp(“rv:(\\d+\\.\\d+(?:\\.\\d+)?)”);
    reMoz.test(sUserAgent);
    isMinMoz1 = compareVersions(RegExp["$1"],“1.0″)>=0;
    isMinMoz1_4 = compareVersions(RegExp["$1"],“1.4″)>=0;
    isMinMoz1_5 = compareVersions(RegExp["$1"],“1.5″)>=0;
}

/*
* Netscape Communicator 4.x
*/
var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf(“Mozilla”)==0) && (navigator.appName == “Netscape”) && (fAppVersion>=4.0 && fAppVersion<5.0);

var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;

if(isNS4)
{
    isNS4 = true;
    isMinNS4_5 = fAppVersion>=4.5;
    isMinNS4_7 = fAppVersion>=4.7;
    isMinNS4_8 = fAppVersion>=4.8;
}

/*
* Check the OS
* Windows,Macintosh and Unix
*/
var isWin = (window.navigator.platform ==“Win32″)||(window.navigator.platform==“Windows”);
var isMac = (window.navigator.platform ==“Mac68K”)||(window.navigator.platform == “MacPPC”);
var isUnix = (window.navigator.platform == “X11″) && !isWin && !isMac;

var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
if(isWin)
{
    isWin95 = sUserAgent.indexOf(“Win95″)>-1 || sUserAgent.indexOf(“Windows 95″)>-1;
    isWin98 = sUserAgent.indexOf(“Win98″)>-1 || sUserAgent.indexOf(“Windows 98″)>-1;
    isWinME = sUserAgent.indexOf(“Win 9x 4.90″)>-1 || sUserAgent.indexOf(“Windows ME”)>-1;
    isWin2K = sUserAgent.indexOf(“Windows NT 5.0″)>-1 || sUserAgent.indexOf(“Windows 2000″)>-1;
    isWinXP = sUserAgent.indexOf(“Windows NT 5.1″)>-1 || sUserAgent.indexOf(“Windows XP”)>-1;
    isWinNT4 = sUserAgent.indexOf(“WinNT”)>-1 || sUserAgent.indexOf(“Windows NT”)>-1 || sUserAgent.indexOf(“WinNT4.0″)>-1 || sUserAgent.indexOf(“Windows NT 4.0″)>-1 && (!isWinME && !isWin2K && !isWinXP);
}

var isMac68K = isMacPPC = false;
if(isMac)
{
    isMac68K = sUserAgent.indexOf(“Mac_68000″)>-1 || sUserAgent.indexOf(“68K”)>-1;
    isMacPPC = sUserAgent.indexOf(“Mac_PowerPC”)>-1 || sUserAgent.indexOf(“PPC”)>-1;
}

/*
* Unix
*/
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;
if(isUnix)
{
    isSunOS = sUserAgent.indexOf(“SunOS”)>-1;
    if(isSunOS)
    {
        var reSunOS = new RegExp(“SunOS (\\d+\\.\\d+(?:\\.\\d+)?)”);
        reSunOS.test(sUserAgent);
        isMinSunOS4 = compareVersions(RegExp["$1"],“4.0″)>=0;
        isMinSunOS5 = compareVersions(RegExp["$1"],“5.0″)>=0;
        isMinSunOS5_5 = compareVersions(RegExp["$1"],“5.5″)>=0;
    }
}

November 6, 2008 Posted by Lance Zhang | JavaScript | | No Comments Yet