没有比人更高的山

彩色标签云的生成方法0

发现欧必杰(http://www.ooobj.com/blog)的标签远远比我多,用li列表显示已经不可容忍,所以我决定花点时间把标签的显示更新一下,最新的效果如http://zhlwish.appspot.com左侧的标签云。

思路很简单,就是为每个标签随机生成一种颜色(当然要考虑到如果生成的背景色,就需要再生成一次),然后根据引用这个标签的日志数按比例生成12-15号之间的字体。具体的代码如下:

这里偷了个懒,我这里的标签云是白色背景,就直接硬编码了,最好是作为列表参数传入。

这里遇到了一个问题就是python的除法问题,python有两种除法,即所谓的true除法和floor除法,有兴趣的朋友google一下啦。我就不重复占用网络资源了。

import random

def rand_color():
    hex_char = ('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f')
    color = "#"
    for i in range(6):
        color += random.choice(hex_char)
   
    if color == "#ffffff":
        return rand_color()
    else:
        return color

 

tags = Tag.all()                                     #返回所有的标签
tag_weighing = [len(tag.diaries) for tag in tags]
max_w = max(tag_weighing)
min_w = min(tag_weighing)
weighing = float(3/((max_w - min_w) + 1))            #计算权重
tag_strs = [];
for tag in tags:
    font_size = str(weighing * len(tag.diaries) + 12) + "px";
    color = rand_color()
    tag_strs.append("<a href='/blog/tag/" + str(tag.key()) + "/' style='color:" + color + ";font-size:" + font_size + ";'>" + tag.name + "</a>&nbsp;&nbsp;")

 

VN:F [1.7.5_995]
Rating: 0.0/10 (0 votes cast)
VN:F [1.7.5_995]
Rating: 0 (from 0 votes)

Thickbox在IE8下不垂直居中的解决办法0

这个问题应该是ie8和ie7都有同样的问题,http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positioning-bug/,这篇文章做了很详细的说明,而且提供了补丁,但是这个补丁在ie8下面依然有问题,出现这个问题应该是因为在ie8下,thickbox仍然当作ie6来处理,我在开头加了一个判断,如下:

$.browser.msie6 = $.browser.msie
        && /MSIE 6\.0/i.test(window.navigator.userAgent)
        && !/MSIE 7\.0/i.test(window.navigator.userAgent)
        && !/MSIE 8\.0/i.test(window.navigator.userAgent);

修正后的补丁下载:jquery.thickbox.js

VN:F [1.7.5_995]
Rating: 0.0/10 (0 votes cast)
VN:F [1.7.5_995]
Rating: 0 (from 0 votes)

jquery truncate插件生成日志概要的中文问题0

以前的系统采用自己写的一个trancate的django filter,简单的对html标签进行了匹配处理,效果很是不理想,而且有时因为部分标签没有结束符导致整个页面的布局混乱,很费脑筋。

今天偶然逛到一个叫做 帕蓝映像 的网站,看到有个jquery插件叫做truncate,居然可以生成日志概要,立即下载试用了一把,果然不错(现在我的网站已经采用了这种做法,读者可以使用一下),而且使用非常简单。

 jquery插件truncate网址

不过,在对于短文本生成概要的时候,遇到一个问题,js会进入一个无穷循环,调试很痛苦,因为一不小心浏览器就死掉了,在断点调试之后发现应该是“中文”的正则表达式匹配的问题,解决代码如下:

$(”.comment_summary”).truncate(10, {
    chars: /[^x00-xff]/,
    trail: [ "...<a href='#' class='truncate_show'>(more)</a>", "<a href='#' class='truncate_hide'>(hide)</a>" ]
});

另外,还有一个很有用的网址也附上 常用的JavaScript验证正则表达式

VN:F [1.7.5_995]
Rating: 0.0/10 (0 votes cast)
VN:F [1.7.5_995]
Rating: 0 (from 0 votes)

DIV与SPAN垂直居中对齐0

    水平居中很简单,设置text-align:center就可以了,但是垂直居中一直都不得其解!

以前总是尝试着调padding-top,但是有的时候好使,更多的时候不行,今天同样,当height值不大时,增加padding-top就会增加了整个DIV或者SPAN的高度,很恼火!

正在想理论上vertical-align的默认值应该是baseline啊,不会顶对齐啊,突然想起字体有个line-height属性,于是很显然其默认值就是一个字那么高,于是将line-height值改得和DIV或者SPAN的height相同! 于是,DIV和SPAN中的文字垂直居中对齐了!

后来在百度里面一搜,耐着性子多翻了几页,终于在一个不大论坛里面发现了同样的方法!要是以前能耐心一点不早就搞定这个问题了么,何必还浪费这么多时间?让人又想起了贝尔发明电话的老故事…sigh…不想了!

VN:F [1.7.5_995]
Rating: 10.0/10 (1 vote cast)
VN:F [1.7.5_995]
Rating: 0 (from 0 votes)