Display a "Loading.." message when page is loading

Tuesday, October 28, 2008 by Lance Zhang


<html>
<head>
<title></title>
<script type="text/javascript">
var url = 'http://www.google.co.uk/search?hl=en&q=asp.net&meta='; //the Next page you want to display
</script>
<style>
</style>
<div id="loading">
<div class="loading-indicator">
Page Loading
</div>
</div>
</head> .loading-indicator {
font-size:8pt;
background-image:url(../images/loading/loading.gif);
background-repeat: no-repeat;
background-position:top left;
padding-left:20px;
height:18px;
text-align:left;
}

#loading{
position:absolute;
left:45%;
top:40%;
border:3px solid #B2D0F7;
background:white url(../images/loading/block-bg.gif) repeat-x;
padding:10px;
font:bold 14px verdana,tahoma,helvetica;
color:#003366;
width:180px;
text-align:center;
}

<body onload="location.href = url;" style="overflow:hidden;overflow-y:hidden">
</body>
<script>
if(document.layers) {
document.write('<Layer src="' + url + '" visibility="hide"></Layer>');
}
else if(document.all document.getElementById) {
document.write('<iframe src="' + url + '" style="visibility:hidden;"></iframe>');
}
else {
location.href = url;
}
</script>
</html>

0 comments

 

Magnifying Glass by JavaScript compatible with IE/FF/OP

by Lance Zhang ,

Save the following code as .htm file, open it you will see the effect.

<script language="JavaScript">
<!--
var smallX = 200; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){
head.innerHTML="图片已载入";
isIE=window.event?1:0;
if (srcX==-1 && srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX;
viewX=bigX/srcX*smallX; //预览范围
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //缩小比例
smallpic.width=smallX;
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE;
smallbox.style.height=smallpic.offsetHeight+border*2*isIE;
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e;
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2;
vY+=-viewY/2;
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl;
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
//-->
</style>
<div id="head">image loading</div>
<div id="smallbox"><img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"><div id="bigpico"><img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0"></div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div>

0 comments

 

Make your own E-Map by Silverlight 2+Deep Zoom in 3-mins

by Lance Zhang

Hi All

If you has been use Google earth or Baidu Map, you know that their E-Map is support Drag by mouse, Zoom In/Out, very splendid.

Now, we can make our own E-map by Deep Zoom Composer Tool (may be in the next version of Microsoft Expression Blend) and Silverlight 2.


Download Deep Zoom Composer the file is small, need Sliverlight on client-side.

Ok, here we go:

1.Create a new project by Deep Zoom Composer


2. Click the "ADD Image" to add a big image:



3. If you need more images, just click "add image" again to add them, and then, click the "Compose" button to the next step

4. Drag and Drop our images to the center, and adjust their size and position. you can also click the "Layer View" to adjust the z-index of images


4. After that, let's click the "Export" button to export the Silverlight project:



Click the "Preview in browser" you can see the E-Map in the browser.



If you see the Sliverlight project folder, you can see the tool has create about 10 layers image pieces for us:

And the Silverlight project file:

Click to download the solution:

http://files.cnblogs.com/blodfox777/DeepZoomProjectWeb.part1.rar

http://files.cnblogs.com/blodfox777/DeepZoomProjectWeb.part2.rar

http://files.cnblogs.com/blodfox777/DeepZoomProjectWeb.part3.rar

http://files.cnblogs.com/blodfox777/DeepZoomProject.rar

0 comments

 

Three ways to make a full screen page

by Lance Zhang

The easiest way is use window.open to open a full screen page:

<script>
<!--
function fullwin(){
window.open("bigpage.html","bfs","fullscreen,scrollbars")
}
//-->
</script>
<center>
<form>
<input type="button" onClick="fullwin()" value="Open Full Screen Window">
</form>
</center>

However, if you want to make a page which is already opened to full screen, please try the following code:

A. Use ActiveX
<html>
<head>
<title>test</title>
<script language="JavaScript">
function Fkey(){
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
</script>
</head>
<body>
<a href="javascript:Fkey()">to full</a>
</body>
</html>

B. Use window.open to open the current page

<SCRIPT language="JavaScript">
function toFull(){
if(window.name=="fullscreen")return;
var a =window.open("","fullscreen","fullscreen=yes")
a.location = window.location.href
window.opener=null
window.close()
}
</SCRIPT>
<html>
<body>
<input type=button value="full" onclick=toFull()>
</body>
</html>

0 comments

 

Set Home page by JavaScript (IE/FF)

by Lance Zhang

In Internet Explorer, we can set the current page as clients' home page by the following code easily:


<a class="chlnk" style="cursor:hand;font-weight:bold;color:#004080;font-family:Verdana" HREF onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.java-scripts.net');">Click here to make Java-scripts.net your default homepage!</a>

However, it is not work under the Firefox circumstances

To use Script set the Firefox's home page, first of all, we need make sure the browser settings allow us to do that:

1.Type" about:config" to the Firefox's address bar, and press enter;
2.Find the key which names :signed.applets.codebase_principal_support
3.Set its value to true

Then, we can use the following script to achieve the facing goal:

<script language="javascript">
function setHomepage()
{
if (document.all)
{
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.asp.net/130.aspx');
}
else if (window.sidebar)
{
if(window.netscape)
{
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch(e)
{
alert("this action was aviod by your browser，if you want to enable，please enter about:config in your address line,and change the value of signed.applets.codebase_principal_support to true");
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage','http://www.asp.net/130.aspx');
}
}
</script>
<input type="button" value="set home page" onclick="setHomepage();" />

0 comments