A Data Driven Switch Menu On CodeProject.com

Wednesday, December 20, 2006

Yesterday, I write a article on how to make a switch menu with javascript. Today I read a article on codeproject.com named How To Implement a NavigationPanel Using AJAX. The author do a really good work to make a Ajax data driven navigation panel by asp.net and SQL Server. With the source code of the article we can move data source to XML files and so on. 

I decorated the code in my last article. Unfortunately, if you use Firefox to browse it, the style of code looks ugly. I used the open source code coloried tool wriiten by javascript dp.SyntaxHighlighter. I am tring to modify it to satify my requirement better the whole day but with little result.

what a bad day!



Switch Menu In Javascript

Tuesday, December 19, 2006

I formerly choose Accordion Control in Microsoft Ajax Control toolkit in my application. I like menu with such switching  style. The control is well in it's appearance. For example, we can set frames per second of switching animation and fading transition effect.

However, I encountered the problem when I set  AsyncPostBackTrigger of updatepanel to the LinkButton inside the accordion. If do this, there will be a error at runtime said that  LinkButton1 is not exist. I found a lot of developer have the same confusion at the official forum of asp.net but I can't get answer of it. I think this is may be control name changed when it is in a panel.

I tried another way to solve this problem is to put accordion in a updatapanel. Unfortunately, It still din not work due to LinkButton can't raised event.

Because I can't get the solution of it. I decided to write a switch menu in such style although the self-made one will be simple without any animation or fading effect.

We know we can use CSS style.display attribute to display or hide the div, control and so on. So it's not difficult to make a simple switch menu in Javascript. At first we made menu in html

<ul id="nav-secondary">
<li id="Menu1"><a href="#" onclick="SwitchMenu('Menu1','nav-secondary')">Menu 1</a>
<ul style="display: none;">
<li><a href="#" id="A1">Sub Menu 1.1</a></li>
<li><a href="#" id="A6">Sub Menu 1.2</a></li>
<li id="Menu2"><a href="#" onclick="SwitchMenu('Menu2','nav-secondary')">Menu 2</a>
<ul style="display: none;">
<li><a href="#" id="A5">Sub Menu 2.1</a></li>
<li><a href="#" id="A7">Sub Menu 2.2</a></li>
<li id="Menu3"><a href="#" onclick="SwitchMenu('Menu3','nav-secondary')">Menu 3</a>
<ul style="display: none;">
<li><a href="#" id="A2">Sub Menu 3.1</a></li>
<li><a href="#" id="A3">Sub Menu 3.2</a></li>
<li><a href="#" id="A4">Sub Menu 3.3</a></li>

SwitchMenu is defined in the Javascript to display or hide the sub menu. note is added. the statement used to set CSS class is optional

var currentMenu;                             //Global variable: current menu
//Parameter obj is the menu you clicked, container is the container layer of menu
function SwitchMenu(obj,container){         
if (currentMenu!=null) {
            //Clear css style of current menu
        //Get the target menu you clicked     
var targetMenu = document.getElementById(obj);      
        //Get sub-menu of target menu        
var secondaryMenutargetMenu.getElementsByTagName("UL")[0];    
var secondaryMenus = document.getElementById(container).getElementsByTagName("UL")//get all submenus   
if (secondaryMenu==null) {                                  //No sub menu                                 
for (var i=0i<secondaryMenus.lengthi++){    
                 //Hide all sub menu                       
            //Set target menu css class
}else{                                                                               //Sub menu Exist
            //Click the  menu which sub-menu is hide
if(secondaryMenu.style.display == "none"){                             
for (var i=0i<secondaryMenus.lengthi++){                            
"none";       //Hide all sub menu                     
"block";              //Display sub-menu u clicked             
targetMenu.className="active";                            //Set target menu css class         
}else{                                                  //Click the  menu which sub-menu is displayed   
secondaryMenu.style.display "none";               //Hide it    
= document.getElementById(obj);     //Set current menu (global variable)

Ok, run it in your browser. it works fine, right?

Maybe additional css make appearance better

/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
#nav-secondary a:link {color:#000} 
#nav-secondary a:visited {color:#000} 
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}
#nav-secondary li.active li.active a:link, 
#nav-secondary li.active li.active a:visited, 
#nav-secondary li.active li.active a:hover, 
#nav-secondary li.active li.active a:active {font-weight:bold}

These are the final snap in my FireFox2 and IE7




Some Tips From Atlas To Microsoft Ajax RC1

Monday, December 18, 2006

These days I am busy on move a old atlas application to newer Microsoft Ajax RC1. During This process I encountered some problem and get some tips.

1. Trigger.ControlEventName in UpdatePanel are modified to Trigger.AsyncPostBackTrigger. I think this is more meanningful. it also add  PostBackTrigger propery to force control refresh in updatepanel.

2. $ changed to $get which is short of Document.GetElementByID in order to conflict to other ajax library such as prototype. Add shortcut $addHandler to listen event of control in client script

3. Page.RegisterStarupScript is moved to System.Web.UI.ScriptManager.RegisterStartupScript. The function add a paremeter of Control.

4. The biggest change affected me is PageMothods which I used to communicate between javascript and server code. Now It must be public and static. In former application I use lot' of un-static method in it. I could not change all of these function to static. so I use RegisterStarupScript  instead of it to pass server data to javascript.



Auto-Activate ActiveX Controls in The Web Page

Friday, December 8, 2006

Microsoft has made changes to the way that newest Internet Explorer handles some content in Web pages due to security reason. When Internet Explorer encounters a page with ActiveX controls (such as a page using PI-ActiveView to show .pdi file), the control may require a single click to activate. (the newest Internet Explorer represent If user installed security update 912812)

Let us take PI-ActiveView as a example.When you open the page embed .pdi, a tooltip will appear to prompt you that the control should be clicked to first activate before it can interact.


When a control is inactive, the following effects occur

  • Dynamic HTML events related to user interaction, such as onblur and onclick, are blocked.

  • The control does not respond to window messages generated by the keyboard or mouse, such as WM_CLICK and WM_KEYPRESS, and so on.

  • An overlay window, created on the control's OLE site, prevents keyboard and mouse messages from reaching the inactive control.

This requirement to click to activate will happen each time you refresh or visit the Web page. This is a annoying to user. Fortunately, developers can rewrite web pages so that users are never presented with a tooltip when they visit the page acording the artilcel on MSDN.

The article's keystone is using script(jscript or vbscript) to load controls from external script files, Then web pages will load interactive controls that respond immediately to user input. Be careful that the script written inline programmatically, for example with the writeln function, the loaded control will behave as if it was loaded by the HTML document itself and will require activation.

The detail way is stated clearly in the above article. I need not to copy them here. ^-^


PS: I have a question. The requirement to click to activate ActiveX controls is due to security reason. will this solution make us go back to un-secure time we do not install update and need not to click to activate !



LYC Anniversary 4

Lyc is not short for china new star but the  abbreviation for my girlfriend' name and mine. Today is 4 anniversary of us. I still remember 4 years ago what  a nervous man I am when I went along with her. Although we had displeasure ever, now we are harmonious and deeply love each other.

No more word I express and want to express. Congratulation and wish we be more and more better!



Install Software Do Not Support Your Windows Edition

Thursday, December 7, 2006

Today I need install Adobe Premiere Pro 2 that does only support windows XP. Need I change my OS just to use it, no I do not want to do it. I went to the Internet to fetch some information. At first I just want to see if there is some mod to force it work on windows 2003. A method that replaced 1033.mst is recommend. this is the simplest way to install the software.

However another article attracted me more than simplest way is to modify the install package using  Orca.exe. It is a database table editor for creating and editing Windows Installer packages and merge modules provided by Microsoft. The tool provides a graphical interface for validation, highlighting the particular entries where validation errors or warnings occur. More information and the way how to get it in Orca.exe or Windows Installer Development Tools.

Orca.exe is a good tool. Under the help of it we can install software do not support your windows edition if the install file of  it is in .msi format  such as Adobe Premiere Pro 2. After you finished install Orca.exe, do follow instruction to hack it.

1. Using Orca.exe to open Adobe Premiere Pro 2.0.msi (NOTE: not the setup.exe, this is just a encapsulation of msi file)

2. Find "LaunchCondition"  node in the left Column. this is the setup launch condition that can be seen from the name.

3. Modify
((VersionNT>500) AND (ServicePackLevel>=2)) OR ((VersionNT64) AND (ServicePackLevel>=1))
(1==1) OR ((VersionNT>500) AND (ServicePackLevel>=2)) OR ((VersionNT64) AND (ServicePackLevel>=1))
just add 1==1 to make this condition always is true to let the setup run.

There are other condition under "LaunchCondition" ,  such as adminUser, Screen....., We can change them if need, But we need not in installing Adobe Premiere Pro 2.

Remember this is just a hack to install software do not support your windows edition. Maybe you can't use the soft even finish install.  ^-^ Below is VersionNT value in Windows Sedation. windows98 and 98 is not NT edition of windows series. VersionNT value of Vista seem to be 600.

Product                     Version                  VersionNT value
Windows NT             4 4.0                       400
Windows 2000       5.0                           500
Windows XP             5.1                            501
Windows 2003       5.2                            502



Tip On Distributing PI-ActiveView Automated ActiveX Installation

Wednesday, December 6, 2006

In previous environment, I always use PI-ActiveView in the machines which has already installed PI-ActiveView and PI-ProcessBook, So I had never care distributing problem until I want to navigate the website use PI-ActiveView to see PDI files embed in it. the result is web page can not display it.

I remember someone ever told that this problem can be solved by automated ActiveX installation because of in the fact it's a ActiveX Control. Open the document of it is my choice and select the setting up automated web installation. Follow the instruction of it. so easy, isn't it?

Open the IE (not firefox for using ActiveX) and modify the security option about "unsigned ActiveX control" to "prompt" because ActiveX file we made has not signed. this is a temporary solution. I suggest u modify it back to prevent malicious ie plugin. This Time I got the ActiveX installation prompt, However when I click sure to install it, there is no response just displaying nothing.

All process seems right following the document. Finally I spent 2 hours to fix the problem and this is the tip what I want to give. Because I placed .cab files in the sub-directory of home directory,  Pay attention to this procedure of cabwizard


Remember to add sub-folder that your cab file placed in to the Full path. What caused me waste 2 hours is here.  In fact, the notion above is clear but I do not carefully read it.



PlaySC.com Is Shutdown

Maybe this is a old news but I just got it when I can't open the website. I found the reason and knew that it is shutdown at May from Internet. It makes me a little frustrated because this is my favorite website when I in the grade 4 at university, I was a enthusiastic Starcraft fan that time and played it everyday. Logging in to PlaySC.com is as usual as eating, sleeping. PlaySC is a new comer and small that time and I am the first round member of it , We discuss sc tactics and knew some sc gamer. Although I left the game because I think I should not concentrate on games to influence my study and life, I pay attention to it like I do in Starcraft. I knew the website become more and more popular in china sc area. I am happy for seeing it.

As PlaySC.com is shutdown, I also be depressed to feel I am not young, the game like starcraft, diablo I played is replaced by Warcraft, Wow; the entertainment star such as Jacky, Maggie has less influence than Jay and a lot who I can't call their name.

It also makes me remember that I saw a TV programs called Old Song Recommendation not long ago. every song is popular when I am young and I still feel they are euphonious but nowadays they are out of date in younger's thinking.

How time flies! My childhood has gone and I had to take more responsibility to myself and society. Hope I have prepared it.




Tuesday, December 5, 2006

今天因为需要,计算了一下燃气轮机的过量空气系数(excess air coefficient),得出的结论让我有一点惊讶,达到了13左右。而我对过量空气系数的印象一直停留在1.2左右。看了一下计算过程和单位换算,应该没有错,于是查了一下一本燃气轮机教程,上面写到过量空气系数的范围是30-80. 虽然书的历史长了一点,但是数值估计还是茶不错的,所以那么我计算的13应该是在可以接受的范围内,1.2是锅炉燃烧的的过量空气系数。我们先看看为什么锅炉的过量空气会取得比较小呢?

1. 减小排烟热损失:排烟热损失是锅炉热损失中最主要的一项。为了保护设备,锅炉的排烟温度一般高于空气的露点,如果过量空气系数太大会造成排烟量太大。所以比较小的过量空气系数能够降低该项损失。

2. 降低NOX的生成和排放:因为燃烧过程中的温度比较高,如果空气系数比较大,那么会造成空气中多余的氮和氧结合生成NOX。



1. 在燃烧室注入一定比例的水或蒸汽,虽然对效率有影响,但是降低燃烧火焰温度可以有效的降低Nox的排放,N0X的排放可自140~220ppm降低至25~42ppm。

2. 使用低氮燃烧的方法,先使用一定量的空气与燃气混合燃烧,接着燃烧后的燃气再于空气混合。

3. GE提出的贫油预混燃烧的燃烧室可以有效的将Nox排放降低。

4. 炉内脱硝还可以使用选择性催化还原法(SCR),但是这个造价很高,只应用排放要求十分严格的场合。



参考文献: 【1】国内外燃气轮机发电现况和21世纪展望 《面向21世纪电机工程科技发展战略研讨会论文集 》



Add In-Site Search To Your Blogger Beta

In my blogger beta default template, there is no in-site search function in my blog and I can not find it in widgets supported. So I am surprised and frustrated that blogger beta has not such normal function. I am not sure whether other default themes has it.

Today I navigated a blog which give lot's of blogger beta hack skills and found a mount of useful information there. However this function is not mentioned in it, is this is a special to me? Fortunately I saw a "search this blog" button in it, then I open the source of the website. I got the search code below.

<form id="searchthis" action="http://sunr.blogspot.com/search" style="display: inline;" method="get"> <input id="b-query" name="q" type="text"/> <p><input id="b-searchbtn" alt="Search This Blog" src="http://sunrrr.googlepages.com/btn_search_this.gif" title="Search this blog" type="image"/> </p> </form>

ok this is the code we want, just change the red code above with your blog address. then add a widget of HTML in template and copy them into it.

Try it!



A Normal Problem In China -- Train Delay

Monday, December 4, 2006

I do not know whether train delay in other country than china is a normal thing, but it's quite ordinary in china although the railway department has improved their service now. 

Today I take train from Shanghai to Hangzhou. A tour should take one and half a hour from 5:30 - 7:00 PM. I got to the South Shanghai Railway station at 4:40 on time, but when I waiting in the room,   unfortunately a moment later screen displayed that the train will delay, I am familiar with it as frequently train taker. but a little surprised to me the delay time is unsure. This is unacceptable to be because I can't go out for supper if I do not know when would train come. I don't think the delay time is totally unknown to railway workers. Although there is not accurate time, but must be a range. It is a monopoly mentality that just say sorry from broadcast and have not any practical action include their responsibility to forecast delay time. Finally after waiting in the room for almost one hour I got up the train at 6:20 and the train leave Shanghai at 6:40 which time I had arrived the destination if on time. when I arrived at Hangzhou, It's 8:20. the train delayed 1 hour and 20 minutes  to a trip just 1 hour 30 minutes. this is not a special case, I encounter this condition about 2 month ago in the same train.

I search some compensation for train delay from Internet. In Sweden, they passed a law to ensure this. Euro are prepare for it. I understand there is lot's of reason for train delay,  but the behavior such irresponsible like not giving any practical action include their responsibility to forecast delay time is makes me frustrated and angry.

China had developed a lot and fast in hardware however, there is a great delay in software like service. Hope it can be better! 



Two Simple Hack Tips on Blogger Beta

Friday, December 1, 2006

Because I am a freshman to Blogger Beta. I found two tips to make my new blog better.

The fisrt one is to hide navbar. you can add code below

#navbar-iframe { height: 0px; visibility: hidden; display: none }

to head--<b:skin> section in your HTML. the HTML is under template settings.

The second one is to open new window in Link List widget. By default there is not option that you can config it. so links in Link List widget will open in current window. However this is also could be solved it HTML code.

At first, remember to check the option Expand Widget Templates . Then find the section

<b:widget id='LinkList1' locked='false' title='Blog Links' type='LinkList'>

change links

<li><a expr:href='data:link.target' ><data:link.name/></a></li>


<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

Finnally, Open your blog and try it.

Hope these two simple hack tips is useful to you!



Wikipedia CD 1.0 (含BT下载链接)











CD中大概有130页在一个小公告栏中增加了内容,增加的内容关注于SOS儿童(例如 在条目Africa中,增加了内容“SOS已经在大约123个国家开展工作”,见下图。这些提示遵循不影响选择的文章的内容的原则。



自动运行拼写检查。 BT下载链接 Wikipedia CD 1.0

PS: 除开Wikipedia CD,这里还有一个Wikipedia的选择叫做Encyclopodia, SF上的一个开源工程Wikipedia on your iPod。可惜我没有iPod要不一定试一下。