分类
日志

JavaScript:遇 IE6 自动重定向

我承认我太野蛮了,详情看看这里页面 http://ygs.im/ie6 ,所以改用 JS 代替 PHP 来把 IE6 用户转到特定页面,主要是担心影响到搜索引擎收录,只要停用 JS 就能访问本站所有页面,谢谢。

var theUrl=window.location.href; //读取URL
if($.browser.version=="6.0" && theUrl!="http://ygs.im/ie6" ){
	window.location="http://ygs.im/ie6";
}

想看看 PHP 版?在这里

分类
其他

简单的页面加载 Loading 效果

如果服务器置于国外,国内访问可能比较慢,这时友好的页面加载提示就非常有用。当然,通过繁杂的 Ajax 等技术,可以很好的实现。我比较适合使用简单的 HTML + CSS + JavaScript,此方法没有多少技术含量,领会精神!

假设需要在加载过程中,页面左上角显示红色的“正在加载中…”提示信息。原理很简单,HTML 代码的 <body> 部分加载前插入此提示信息,加载完成后隐藏它即可。

首先,在 <body> 标记后插入:

<div id="loadingpage">努力加载中...</div>

你可以自由定义 loading 这个 id 的样式。例如将其设置为红色背景,白色文字:

#loading{
color:#fff;background:#FF0000;position:absolute;top:0;left:0;padding:2px 10px;
}

最后,用 JavaScript 代码输出样式,将代码放在</body>标记前:

<script type="text/javascript">
document.write(‘<style>#loading{display:none;}</style>’);
</script>

最终效果就是本博一样的~

分类
其他

几个 JavaScript 库的背景知识

Prototype
概览
– 2005年早期由Sam Stephenson开始
– 随着Ruby on Rails的流行迅速流行
– 由37 Signals支持开发

专注
– 改善JavaScript语言的可用性
– 着重在添加JavaScript”遗忘”的特性
– 清楚的结构、清楚的对象和”类”

细节
– 代码质量非常高
– 所有的动画(和交互)都放在Scriptaculous中
– 更新频繁

分类
其他

JavaScript 的 Cookie 控制

这是当年看着书学习修改的代码,用来控制banner的显示与否。

原理:正常情况下显示 banner,当点击关闭按钮时,通过 turnoff(obj); 函数添加一条cookie: guide_status=guide_close ,并设置 CSS display 为 none。通过 readcookie(the_info); 函数读取 cookie ,判断 guide_status=guide_close 是否存在,存在即设置 CSS display 为 none。

函数:

turnoff(obj);
function turnoff(obj){
//设置cookie过期时间,这里设为2012发生日
var the_date=new Date("December 21, 2012");
var the_cookie_date=the_date.toUTCString();
//写入cookie+过期时间
document.cookie="guide_status=guide_close;expires="+the_cookie_date;
//隐藏banner
document.getElementById(obj).style.display="none";
}

该函数以 onclick 事件插入到关闭按钮中: onclick=”javascript:turnoff(‘guidebar’)” ,guidebar 为 banner ID。

分类
日志

在 WordPress 中整合 Google 自定义搜索引擎

虽然 WordPress 自带有一个站内搜索引擎,但是性能比较低下,而且还会占用服务器资源。所以还不如利用 Google 提供的自定义搜索引擎,将其集成到我们的博客中来。

第一步:注册 Google 自定义搜索引擎
首先,我们需要到Google上面去注册一个自己的搜索引擎。访问http://www.google.com/cse/,用你的 Google 账户登录之后,创建新的搜索引擎。创建完毕后进入”外观”面板,这里选择”全宽”布局。保存后进入”获取代码”,获得如下代码:

<?php
/*
Template Name: search
*/
?>
<?php get_header(); ?>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load(‘search’, ’1′, {language : ‘zh-CN’});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl(’005173058427090287855:djmrkortfdw’);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw(‘cse’, options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<?php get_footer(); ?>
分类
其他

jQuery:使用 JavaScript 让 WordPress 边栏滚动起来

见于淘宝彩票投注页面,搜一下,有三种方法实现类似的效果,这里贴出 JavaScript(jQuery) 方法,也是本站所使用的方法,CSS方法请看原文http://css-tricks.com/scrollfollow-sidebar/

步骤很简单,代码也很简洁:

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});