自定义firefox菜单右键的扩展

2012年12月11日 没有评论

firefox下有用的扩展很多,但是某些有用的扩展会自动添加到右键菜单中,使得右键菜单变得很长,可能突然在已有的右键菜单增加了一个新的项目会让人感到很不习惯,但firefox默认似乎没有地方让用户自己定义右键菜单的内容。那要想去掉怎么办呢?扩展的事就让扩展去解决吧。有一款名为Menu Editor的扩展就能解决这个问题,扩展的安装地址为:https://addons.mozilla.org/en-us/firefox/addon/menu-editor/

百分百纯js实现回到顶部按钮

2012年12月10日 2 条评论

目前很多网站的页面上在右下角都提供了一个“回到顶部”的按钮。今天无事决定自己写一个,代码其实很简单,经过几次修改后,效果还算满意。重要的是全部使用js来实现,不需要在html、css中增加任何内容,甚至都不需要图片,只要引用js即可。而且全面兼容IE6。由于考虑兼容性问题,如何获取滚动条的高度和按钮停留在右下角是难点。这两个问题可以参考:js如何获取滚动条的高度,兼容各个浏览器的右下角提示框代码

代码如下:

(function() {
    var btnId = '__gotop';
    var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;

    function $() {
        return document.getElementById(arguments[0]);
    }

    function getScrollTop() {
        return ('pageYOffset' in window) ? window.pageYOffset
            : document.compatMode === "BackCompat"
            && document.body.scrollTop
            || document.documentElement.scrollTop ;
    }    

    function bindEvent(event, func) {
        if (window.addEventListener) {
            window.addEventListener(event, func, false);
        } else if (window.attachEvent) {
            window.attachEvent('on' + event, func);
        }
    }

    bindEvent('load',
        function() {
            var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';

            if (isIE && isIE < 7) {
                css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';
                var style = document.createStyleSheet();
                style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
            }

            var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';
            var el = document.createElement('DIV');
            el.id = btnId;
            el.style.cssText = css;
            el.innerHTML = html;
            document.body.appendChild(el);

            el.onclick = function() {
                (function() {
                    var top = getScrollTop();
                    if (top > 0) {
                        window.scrollTo(0, top / 1.2)
                        setTimeout(arguments.callee, 10);
                    }
                })();
            };

            el.onmouseover = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #ddd';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
            };

            el.onmouseout = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #fff';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
            };
        }
    );

    bindEvent('scroll',
        function() {
            var top = getScrollTop(), display = 'none';

            if (top > 0) {
                display = 'block';
            }

            if ($(btnId)) $(btnId).style.display = display;
        });
})();

效果见本blog。

css实现方法向箭头

2012年12月9日 没有评论

方向箭头大部分都是使用图片来实现的,其实还有一种选择,就是使用纯css来实现。原理是借助dom对象的border属性,border属性可以细分为border-left、border-top、border-right和border-bottom。先观察下述css代码和对应的显示效果。

#box1 {
    height: 0;
    width: 0;
    border-left: 50px solid gray;
    border-right: 50px solid yellow;
    border-top: 50px solid green;
    border-bottom: 50px solid blue;
}

#box2 {
    height: 0;
    width: 0;
    border-left: 50px solid gray;
    border-right: 50px solid yellow;
    border-top: 50px solid green;
    border-bottom: 0 none;
}

#box3 {
    height: 0;
    width: 0;
    border-left: 50px solid gray;
    border-right: 0 none;
    border-top: 50px solid green;
    border-bottom: 50px solid blue;
}

效果图如下:

通过观察box1,可以看到某一个细分border都是相对于中心点的一个三角;box2和box3则可以看到,如果当设置为0时,就会去掉从中心到对应边的部分。假设需要获取一个向下的方向键,那么可以在box2上进行改造了,只需要去掉去掉左右的两个小三角即可。如何去掉呢?很简单,只需要设置他们的颜色和背景颜色一致即可。例如:

#box2_1 {
    height: 0;
    width: 0;
    border-left: 50px solid #ffffff;
    border-right: 50px solid #ffffff;
    border-top: 50px solid green;
    border-bottom: 0 none;
}
或
#box2_1 {
    height: 0;
    width: 0;
    border:50px solid #ffffff;
    border-top: 50px solid green;
    border-bottom: 0 none;
}

可以参考上面实现来打造出另外几个方向箭头。颜色可以根据实际情况来设定。

js如何获取滚动条的高度

2012年12月7日 没有评论

由于市面上浏览器的种类众多,但是浏览器没有一个通用的方法来获取该值,想做到每个浏览器都兼容还是要下一些功夫的。

目前主流浏览器除IE外对浏览器标准支持都比较好,例如chrome、firefox以及safari等。对应后者,可以通过window对象的pageYOffset属性来取到当前滚动条到页面顶部的高度。对于万恶的IE来说就比较麻烦一点,它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode,页面声明了DOCTYPE时为Standards Mode,反之为Quirks Mode。可以使用document.compatMode来获取,该方法也同时支持其他浏览器,其返回值为BackCompat或CSS1Compat,含义如下:

BackCompat Standards-compliant mode is not switched on. (Quirks Mode) 

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

由于IE对盒模型的渲染跟文档类型有很大关系,所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode,获取方式为:document.documentElement.scrollTop,而Quirks Mode时则为:document.body.scrollTop。

理解上面的所提到的差异后,用代码实现就很容易了,具体实现的代码如下:

function getScrollTop1() {
    if ('pageYOffset' in window) {
        return window.pageYOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollTop;
    } else {
        return document.documentElement.scrollTop;
    }
}

甚至可以修改上述代码,使用一行代码搞定,但是可读性没有上面好,代码如下:

function getScrollTop() {
    return !('pageYOffset' in window)
                ? (document.compatMode === "BackCompat")
                ? document.body.scrollTop
                : document.documentElement.scrollTop
                : window.pageYOffset;
}
或
function getScrollTop() {
    return ('pageYOffset' in window) ? window.pageYOffset
        : document.compatMode === "BackCompat"
        && document.body.scrollTop
        || document.documentElement.scrollTop ;
}

另外除了上述document.compatMode的方式来获取文档类型外,还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性。参考地址:https://developer.mozilla.org/en-US/docs/DOM/document.defaultView。

分类: web前端 标签:

nginx proxy 配置不当导致500错误

2012年12月6日 没有评论

访问网站提示500错误,通过查看日志,获得错误信息为:

2012/12/06 16:10:52 [alert] 11679#0: *9189 1024 
worker_connections are not enough while connecting to upstream, 
client: 127.0.0.1, server: xxx.netingcn.com, 
request: "GET / HTTP/1.0", upstream: "http://127.0.0.1:80/", host: "xxx.netingcn.com"

对于上述错误网上很多人提到,大部分情况是在生产环境中由于并发太多造成的。解决办法就是修改配置文件中的worker_connections值,将其调大。但是今天在本机的nginx中配置一个proxy,完全没有外界的访问的情况也提示上述错误,试着修改worker_connections也没有解决问题。proxy配置大致如下:

server {
    listen       80;
    server_name  yyy.netingcn.com;

    location / {
        root   /var/www/netingcn.com;
        index  index.html index.php;
    }
}

server {
    listen       80;
    server_name  xxx.netingcn.com;

    location / {
        proxy_pass              http://yyy.netingcn.com/;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Host $http_host;
    }
}

原本的目的是想把所有请求xxx.netingcn.com代理到yyy.netingcn.com,也许你会纳闷,干嘛要这么麻烦,直接在第一个的server_name中添加xxx.netingcn.com不就完事。这里只是一个举例,由于正式环境下有特殊情况,不能那么配置,所有才会想到用proxy的方式。

上述配置造成的500错误可以肯定排除是worker_connections太小的原因,仔细配置,发现“proxy_set_header Host $http_host;”这个才是罪魁祸首,因为它造成死循环了,当请求xxx时,由于proxy到yyy,本来nginx是交给server yyy,来处理的,但是header里面的host还是xxx,nginx根据配置里面的server_name,找到 xxx,因此就显示了死循环,也就会报前面提到的那个错了。问题已经定位到了,解决就很简单,直接去掉proxy_set_header Host $http_host;这行配置就行了。

分类: nginx 标签:

编译安装libmemcached 1.0.14 出错

2012年12月5日 没有评论

最近升级php memcached扩展到2.1.0,由于依赖libmemcached库,先前安装的版本是1.0.2,编译时候出错,需要更高版本的libmemcached,所以重新下载最新版本的libmemcached编译安装。不幸的时编译libmemcached 1.0.14时候保存,大致错误信息为:

libmemcached/auto.cc: In function 'memcached_return_t text_incr_decr(memcached_server_st*, bool, const char*, size_t, uint64_t, bool)':
libmemcached/auto.cc:73: error: expected `)' before 'PRIu64'
In file included from ./libmemcached/common.h:72,
                 from ./libmemcached/csl/common.h:40,
                 from libmemcached/csl/context.cc:38:

google查询了一下,原因是GCC的版本低了,所以只好升级GCC了,好在有yum,一条命令就搞定,命令如下:

yum install gcc44 gcc44-c++ libstdc++44-devel

把下面内容加入到/etc/bashrc中
export CC=/usr/bin/gcc44
export CXX=/usr/bin/g++44

退出终端然后重新登陆,编译、安装都通过了,同时也顺利升级memcached扩展。

分类: Linux 标签:

php 字符串和数字比较问题

2012年12月4日 没有评论

今天遇到一个问题,调用对方接口,按照接口说明,返回为数字0,1,2等等,其中0标示成功,其他表示不同的错误代码。程序通过 if ($ret == 0) 进行判断,开始程序是好的,今天出现问题了,由于对方接口修改,直接返回字母字符串作为错误信息提示,然后我这边就悲剧了,上述判断永远都为TRUE。

原因在于php是弱类型语言,所以可以对两个不同类型的变量进行比较操作,但最终进行比较前,php会把某一方转换称另一方一样的类型,这点很重要。如果是字符串和数字进行比较,那么php会把字符串强制转换称数字,对于纯字母的字符串,那么转换后就是0了,所以if ($ret == 0) 成了。

附PHP官方介绍:http://php.net/manual/zh/language.operators.comparison.php

分类: PHP 标签:

php is_dir函数

2012年12月2日 没有评论

php提供内置函数is_dir来检查传入的路径参数是否为目录,如果是目录则返回true。也就是说传入的参数是文件或者不存在都为false,因此当前参数不能说不是文件夹就是文件。另外需要注意的是参数支持相对路径和绝对路径。如果是绝对路径,那么就直接判断其是否为文件夹,但是相对路径就不一样了,参数指定的路径是相对当前工作目录的。例如传入的参数为“test”,那么他实际检查的是脚本所在的路径下是否有名为test的目录。由于当前工作目录不是很明晰的,为了避免犯错,最好是使用绝对路径。

分类: PHP 标签:

form 提交action中参数无效

2012年12月1日 没有评论

页面通过表单(form)想服务器提交数据的时候有两种形式,一个是POST,另一个是GET。两种的一个区别是GET会直接把数据附加在url的后面,而POST发送的数据放置在http包中。form的action属性就是提交数据的url地址,method属性可以指定是GET或POST。

需要注意的是如果采用GET方式,那么action url中参数都会被丢弃,提交时候只会把form中的数据拼接在url向服务器提交;但是POST的方式则不会这样,它会按照action指定的url进行提交数据,包含url后面跟着的参数和参数值。

分类: web前端 标签:

Mysql设置自增长主键的初始值

2012年11月23日 没有评论

Mysql可以使用AUTO_INCREMENT来设定主键的值为自增长的,其默认值是1,如果想把它的初始值设置为1000,比较笨的办法是先插入一条记录并指定主键的值为999,然后delete改行记录,例如:

insert into test(pk) values(999);
delete from test where pk = 999;

更好的方法是使用alter的方法来直接修改,例如:

alter table test AUTO_INCREMENT = 200;

无觅相关文章插件,快速提升流量