Subscribe to 木瓜Blog日志FeedSubscribe to 木瓜Blog评论Feed

Browse : Home »

iframe 自适应高度

九月 9, 2007 by admin  
类别:生活匣子

抢个沙发先

    好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家要是觉得有用，欢迎使用
源代码如下

<script type="text/javascript">
 //** iframe自动适应页面 **//

 //输入你希望根据页面高度自动调整高度的iframe的名称的列表
 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。

 //定义iframe的ID
 var iframeids=["test"]

 //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
 var iframehide="yes"

 function dyniframesize()
 {
  var dyniframe=new Array()
  for (i=0; i<iframeids.length; i++)
  {
   if (document.getElementById)
   {
    //自动调整iframe高度
    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
    if (dyniframe[i] && !window.opera)
    {
     dyniframe[i].style.display="block"
     if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
      dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
     else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
      dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
    }
   }
   //根据设定的参数来处理不支持iframe的浏览器的显示问题
   if ((document.all || document.getElementById) && iframehide=="no")
   {
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
   }
  }
 }

 if (window.addEventListener)
 window.addEventListener("load", dyniframesize, false)
 else if (window.attachEvent)
 window.attachEvent("onload", dyniframesize)
 else
 window.onload=dyniframesize
</script>

使用的时候只要贴在<head></head>里面就可以了

标签:

javascript弹出窗口问题总结

八月 15, 2007 by admin  
类别:WEB技术

抢个沙发先

1.无提示刷新网页
大家有没有发现，有些网页，刷新的时候，会弹出一个提示窗口，点“确定”才会刷新。
而有的页面不会提示，不弹出提示窗口，直接就刷新了.
如果页面没有form,
则不会弹出提示窗口
如果页面有form表单，
a)<form  method=”post” …>
会弹出提示窗口
b)<form  method=”get” …>
不会弹出

2  javascript刷新页面的方法

window.location.reload();

使用window.open()弹出的弹出窗口，刷新父窗口
window.opener.location.reload()
使用window.showDialog弹出的模式窗口
window.dialogArguments.location.reload();
3.javascript弹出窗口代码
下面给两个弹出屏幕居中窗口的例子
window.open()方式
function ShowDialog(url) {
var iWidth=300; //窗口宽度
var iHeight=200;//窗口高度
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.open(url,”Detail”,”Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
Width=”+iWidth+” ,Height=”+iHeight+”,top=”+iTop+”,left=”+iLeft);
}

window.showModalDialog方式
function ShowDialog(url) {
var iWidth=300; //窗口宽度
var iHeight=200;//窗口高度
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.showModalDialog(url,window,”dialogHeight: “+iHeight+”px; dialogWidth: “+iWidth+”px;
dialogTop: “+iTop+”; dialogLeft: “+iLeft+”; resizable: no; status: no;scroll:no”);
}

注意这里的第二个参数，window

4.模式窗口数据不刷新（缓存）问题

在jsp页面加入如下语句

<%
response.setHeader(“Pragma”,”No-Cache”);
response.setHeader(“Cache-Control”,”No-Cache”);
response.setDateHeader(“Expires”, 0);
%>

5,模式窗口中，链接弹出新窗口问题

在</head>和<body>间加入<base target=”_self”>

6.无提示关闭页面的方法
function CloseWin(){
var ua = navigator.userAgent; var ie = navigator.appName==”Microsoft Internet Explorer”?true:false;
if(ie){
var IEversion = parseFloat(ua.substring(ua.indexOf(“MSIE “)+5,ua.indexOf(“;”,ua.indexOf(“MSIE “))));
if( IEversion< 5.5){
var str = ”;
document.body.insertAdjacentHTML(“beforeEnd”, str);
document.all.noTipClose.Click();
} else {
window.opener =null; window.close();
}
}else{
window.close()
}
}

标签:

网页RPG－《新剑侠情缘》

六月 14, 2007 by admin  
类别:WEB技术

1 评论

很多朋友还记得N年前的精典游戏－－《仙剑》，是不是很怀念？那让我们来看看新的《仙剑》吧。网页RPG－《新剑侠情缘》

大家可能很难相信这是用JS写的，但这是事实。

“游戏素材取自金山游戏公司推出的《剑侠》系列，然后经过自己修改为该程序所用，因此这些素材版权都为金山所有。本游戏采用了目前最流行的Ajax的方式进行客户端和服务器端的交互，实现异步无刷新的保存和载入数据。客户端不需要安装任何插件即可进行该游戏。本游戏将逐步开放接口,供广大的游戏爱好者共同开发/完善,共同完成一款由游戏爱好者共同完成的免费游戏。”

让我们一起来看看这游戏吧。

地址：http://www.script8.com/bbs/project/newsword/ 这地址有点长是吧。嘿嘿。。。小站为各位做了个跳转

跳转地址：http://game.ardy.cn (好记多了吧！ ：） )

还有一点，就是游戏好像只能在IE5.5以上版本  FF是不支持的。

100|101|102|103|104,400,300

标签: ,

ThickBox 2.0——JS展示脚本

四月 14, 2007 by admin  
类别:生活匣子

抢个沙发先

Cody Lindley 使用 jQuery 开发
译: croc 
阅读原文

 　　ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容.

查看实例演示

特性:

  • ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k.
  • ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k.
  • ThickBox 能重新调整大于浏览器窗口的图片.
  • ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).
    • 展示单一图片（single image）
    • 展示图片集（multiple images）
    • 展示内嵌内容（inline content）
    • 展示被iFrame的内容（iframed content）
    • 展示AJAX内容（AJAX content）
    • 其他：教程本身还自带了一个很酷的JS跳转脚本
  • ThickBox 能隐藏 Windows IE 6 里的元素.
  • ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox.
  • ThikkBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.

如佝实现 ThickBox :

1. ThickBox 要求使用 jQuery JavaScript 库; 正因如此, 你需要外调 jquery.js 文件在你的网页的 head 元素内, 接着还要外调 thickbox.js 文件 (注意: jquery.js 必须放在调用资源的第一位). 例子如下:

<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>

一旦你外调了 .js 文件, 打开 thickbox.js 并寻找加载图片的名字 (loadingAnimation.gif). 找到后, 根据它在你服务器上的位置

标签: ,

Web2.0图片特效脚本 lightbox 【推荐】

四月 12, 2007 by admin  
类别:WEB技术

2 评论

Lightbox JS 是一个简单方便的用来把图片覆盖在当前页面上的脚本,它能被快速安装并且运作于所有流行的浏览器.
最新更新 Version 2.0#
图片集: 分组相关的图片并且能轻松的导航它们
# 视觉特效: 奇特的自适应调整
# 向后兼容: yes!

点击下面查看效果

http://www.ardy.cn/lightbox/test.html

http://www.ardy.cn/lightbox/lightbox2.html

v2.03 Released 4/10/07
- Improved keyboard navigation. Animation off toggle.
Hides Flash movies under overlay. Imagemap support. Valid CSS.
官方地址(演示+最新2.03版本下载):
http://www.huddletogether.com/projects/lightbox2/

建议新手先下载蓝色理想汉化版,有中文说明(版本非最新2.03,而是2.02)
http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip

如何使用:

步骤 1 – 安装

  1. Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. 
    <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script>
  2. 外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中). 
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3. 检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 – 激活

  1. 添加 rel=”lightbox” 属性到任何一个链接标签去激活lightbox. 例如: 
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    可选择项: 使用 title 属性加上说明.

  2. 如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如: 
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

    没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！

有什么不明白的可以和我留言！

标签: ,

设为首页 收藏夹常用代码

四月 3, 2007 by admin  
类别:生活匣子

抢个沙发先

    今天要用到设为首页、加入收藏夹代，突然找不到了，只好Baidu一下。写出来和大家一起分享。

    加入收藏夹,设为首页代码
    把以下代码<Body>相应位置
<a href="javascript:window.external.addFavorite('http://www.ardy.cn','木瓜'S Blog');">加入收藏夹</a>
<a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.ardy.cn');>设为首页</a>

    鼠标指向时提示设为首页
    将下列代码插入<body>区中：
<A href=http://www.ardy.cn onmouseover="this.style.behavior='url(#default#homepage)';this.setHomePage(http://www.ardy.cn&#39 ;) ;" target="_blank">设为首页</A>

    打开页面时自动弹出窗口询问是否设为首页
    将下面代码加入<body>内：
onMouseOver="if (style.behavior==''){style.behavior='url(#default#homepage)';setHomePage('http://www.ardy.cn')}"

即：<body onMouseOver="if (style.behavior==''){style.behavior='url(#default#homepage)';setHomePage('http://www.ardy.cn')}">

    离开时自动提示设为首页
    <body onunload="BASEBody.style.behavior='url(#default#homepage)';if(!(BASEBody.isHomePage('http://www.ardy.cn&#39;)))BASEBody.setHomePage('&#39;);">

    强行设为首页代码
<object data='http://www1.7169.com/homepage/set.asp?url=http://你的网址;width='0' height='0'
   提示：各位站长朋友，请最好别用此条，想要人家设为首页应该从站点自身内容做起，站点有价值，人家自然会收藏。“强来的瓜不甜”反而会事得其反，让别人更讨厌……

标签: