分类目录归档:悠哉博主的日常

主题更换记录:佳佳酱才是小黑呢【4】

又到了佳佳酱换主题的日子[其实只是突发奇想来换个主题。。]
本着每次换主题都要做个记录的精神,这次也来记录一下。

上一个主题:佳佳酱才是小黑呢【3】
本个主题:佳佳酱才是小黑呢【4】

旧主题view

新主题view

更新内容:
这次没做什么改进,只是换了个励志背景图,还合并了css里几个相同选择器的样式。

itisso.us

购买了域名itisso.us,既然挖了这个坑就一定要把它填起来(•̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩́ ˑ̫ •̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩̩)。
这次我记得买了是两年,以后再续费的说。
然后我先给它做个building页面告诉大家这里还在制做。
那么我就用有生之年来做它吧。(不知Glory君意下如何),大家也许会在有生之年看到这个作品。

PS:为什么买us呢?因为com和net被一个蛋疼的不知道干什么的还有多重页面跳转的网站占了[还特么是同一家!!!!にまあ!]

[更新:建设标识页已建成]

iframe元素操作

本文所有内容均未测试,只是看着参考写出来的笔记,不保证内容的准确性,如果发现了错误请指出谢谢。

在很久很久以前(其实是忘了时间。。。)我发现iframe内部的内容是可以在iframe外面操作的。

在这之前我曾经把Glory的blog做了iframe放在我的佳佳实验室里,然后他一脸黑线,现在我终于知道是为什么了~

接下来进入正文

访问iframe元素的关键就在于要知道连接到iframe的方法,看下面

[PS:不同方法在不同浏览器里可能不可用]

继续阅读iframe元素操作

博客已顺利搬家到4ove

上上周博客在openshift所在的ip被和谐以后,我就不再打算重开应用换ip了,因为总有那么一个时候还是会被和谐的。
于是我就把博客搬到了另一个空间。

本着免费使用的原则,还是要来提一下用的空间的。

这个空间名字叫4ove,看起来用的人不多,因为速度比较快,而且这个空间看起来非常不成熟。

广告没有发现,只是请求量略大就会出来服务器的提示。。。

另外这个空间可以自定义很多东西,比如默认的404和403页面[在此类文件不起作用时],邮件系统也没问题,还有自带的邮件服务器(虽然我没用它)。另外这个空间还有很多蛋疼的地方。

[PS:只有博客被搬到了这个空间来,www.luojia.me由于还没有被和谐就暂时懒得搬过来了]

[PS2:搬家的同时我启用了storage.luojia.me来存放博客里的资源外链了]

响应式布局练习

今天我稍微试了试响应式布局的操作方法来为iti做准备,于是就拿我的博客开刀了。
想了一想,这个博客的主题本身就是响应式的了,可以非常好的适应小屏幕,于是我就不再做小屏幕的响应了,于是我做了更大屏幕的响应。

级别[我做的]:800~1299,1300~1460,1461~1880,1881~+∞

由于只是练习,所以我就拿多说评论框做实验了。

目标:让多说评论框在宽度超过1300的屏幕上从文章底部跑到右边,文章靠到左边。
[请掠过代码先看下面]。 继续阅读响应式布局练习

阻止手机输入框得到输入焦点时缩放页面

[手机]有的时候网页上一个输入框,点他一下,这个框框就会被放大或缩小到适当大小,有的时候这种自动缩放会很蛋疼,就比如这个博客,缩放的时候旁边的边栏会露出来。而且我这个主题是从Twenty eleven主题改来的,Twenty eleven本身是响应式主题,无需缩放就可以清楚的看完整个页面的内容。

于是我就开始百度,找了好久找到了这样的代码

虽然我还没有理解,但是至少知道它有用。
如果读者有什么其他的方法或建议也可以留言。

选择性使用网站背景图片

最近的一篇文章主题【3】的背景坎坷里写到了背景图片的background-size: cover这个css对移动设备并不怎么友好,无法达到标准的显示效果,于是我一直在想办法使用img标签来填补这个bug,不过今天我又不想做了,所以找了个理由。[接下来就是理由]

如可以正常浏览本站的童鞋们所见,我的div背景大部分都是半透明的,寒假里了解openGL的时候感觉透明处理真心很费神啊[对计算机来说],所以我决定让移动设备就干脆不显示背景图了。这样不仅省去好多渲染步骤,看起来还清爽,顺便间接的帮我解决了移动设备上背景图的撑满问题。
继续阅读选择性使用网站背景图片

腾讯微博自带博客RSS发布功能

刚刚发现腾讯微博的设置项里自带了通过博客RSS获取博文并自动发布微博的功能,于是我就来试试了

这个功能在设置->隐私设置->同步设置里,如图

[更新]刚才发现主页无法识别是因为我的插件中屏蔽了head里的RSS才会这样,正常的博客应该直接输入自己的博客地址即可,输入RSS地址也可以。

设置的时候我发现填了自己的博客地址没用= =。。。出现以下提示

然后点’知道了’,回到面板会发现输入框后面多了点什么东西

于是我大脑小脑中枢神经外加所有细胞共同思考这个问题,于是瞬间得出答案,打开博客拉出侧边栏,滚到最下面,找到文章RSS,右键复制链接地址,粘贴到这里,最后它就这么神奇的好了。

写这篇文章前特意去渣浪找了找,暂时没发现这个功能。(/ □ \)

本博客加入了多说插件

本来其实是很不想用这个插件的,后来发现WP自带的评论确实太麻烦了。。。
在WP插件搜索的时候,输入’多说’竟然找不到这个插件!
然后输入’duoshuo’才找到了这个插件。
后来我发现这个插件似乎还是灰常好用的,它会在所有使用多说的页面上显示所有站点的评论回复。
而且支持自定义样式喵~[虽然暂时懒得去搞样式]
似乎没话说了。

关于元素子节点的奇怪事件

[前言]请注意这是一只新手写的文章,请高手不要吐槽,假如可以帮我解答或更正错误请在下面留言
今天想修掉本博客的主题【3】的母主题Twenty eleven在评论数显示上的bug
[对我来说是bug,在首页或其他的文章聚合页面,每篇文章右上都会有个评论数框,在没有评论时,它就是一个框在那,非常莫名奇妙。有评论时才会显示数字。]

在这个过程中,由于包含评论数的链接没有任何id或class类,所以决定使用它带有comments-link类的父标签来获取子节点。

于是我在浏览器里先试了一下是否可以成功获取,结果出现这样的情况

20130220-004827.jpg

[吐槽]我了个去啊!是我睁眼瞎还是浏览器故意的啊!

[恢复]
很明显可以看出,在chrome开发人员工具里,父标签中除了链接没有其它任何东西,那么获取子节点的结果中前后两个是啥?

我们先来单独获取每个#text看看是啥
第一个

然后是第二个

第一个的内容看似是回车的符号【难道是换行符?
第二个是一堆tab【在电脑上记事本中选中时是一长条,所以我认为它是TAB

现在我个人得出了结论:在父子节点间的所有内容会分别成为两个文本节点[前后两个](仅个人观点,欢迎修正)

最后我想说:搞什么灰机啊!

QQ空间日志同步测试

今天装了把博文同步到QQ空间的插件。
这个插件没用TX的API,是利用QQ空间的邮箱写日志功能实现的[找到这个插件的网站上这么说的]。大概看了一下,似乎没有后门(可能我水平不够,有也看不出来)。
整个插件就一个PHP文件,代码也不多。

[更新]
已经确认此插件有效,而且立刻就发送出去了。
效果

只不过这一次发表我收到了一个验证邮件,

希望这只是特例,以后不要再出现。
今后这里的博客日志和QQ空间日志就会同步发表。

[更新]
经检验,这里的日至更新不会同步到QQ空间。

[更新]日志更新会作为一篇新文章发布到QQ空间,得出上面的错误结论是因为上一次测试更新时又要填验证码但我没看见。

[最后一次更新]
不用这个苦逼的插件了。。。

本博加上了loading大菊花

[前言:由于种种原因,功能性的代码全放到一个单独页面去了]

大部分修改自无聊的等待状态一枚

今天因为?????,我给博客加上了一个菊花来表示页面还在加载,防止有些朋友因为我的博客加载时间过长(这是为什啊!)而以为我博客挂了.

做这个东西几乎用了我一天的时间..说明我的技术还是不足啊,加油!

接下来是正文.

本次修改用到了jquery(我是赖上它了么),原本是把所有代码都写在header里的,后来我发现这样并不好,这样每次加载这个载入画面也要废一些资源,于是我把它单独放在一个html文件里,这样也是有好处的(虽然对有些人来说这样做并不好),好处在于此页面会单独缓存,不用每次一起加载,就算强制刷新也不会牵涉到刷新iframe里的内容,这样可以更快速的加载。

首先是html里的内容,

然后在header里加入html的iframe

请无视php脚本,把它放在z-index的-2层上,以便显示在最下面,【z-index的-1层为太阳君和月亮酱】,先让他的显示为none,这样可以利用fadeIn淡入.接下来是就剩js的事了.

在head中的functions.js文件中进行了一下定义

但是使用$(window).load有时还是会失效,所以我在页面最底下的修bug的js文件中加入了

接着给下面的$(document).ready中加入

至于不用自带的状态改变事件是因为担心事件不被捕获。。毕竟连上面的load事件都会丢失,所以还是用这种方法了。

主题【3】的背景坎坷

[2013年2月17日更新]:此CSS在我的iPhone的浏览器上(chrome和safari)表现不同于电脑上的浏览器,它会使背景图片撑满整个page层(整个网页的大小而不是显示区的大小)。所以针对移动设备也许也需要进行js级的背景调整

正文:
在昨天还是前天记不清了,我终于做好了新主题【3】,最后在弄背景图片的时候废了很长时间。
一开始我以为css里没有可以控制背景图片大小的样式【css2里确实没有,但我忘了伟大的css3..】
于是乎我就用一个img标签来充当背景【曾经也有想用img做背景而被blackglory喷过。。。】,然后再用javascript控制img标签自适应大小[这里我做了很长时间,在获取元素的时候出了些问题,后来还是解决了]。

后来发现了css3里又可以控制背景图大小的样式了,我表情如这个

先说说要用css3实现图片填充背景该怎么做

接下来还是说说img的做法吧,毕竟花了这么长的时间才弄好的QAQ[这个方法现在用来兼容不支持css3的浏览器{到底可不可以兼容还没有测试过}]

先是一个div包一个img标签

现在已被注释处理了,低于IE9的版本[我也不清楚IE从哪个版本开始支持css3的,于是就大概IE9好了]才会使用这个img标签的背景
这段代码放在了body内第一位
这个img的id被我定义成backgroundimg。。,外面包围的div设置了固定定位[fixed]样式,而且没有宽高,在显示区正中间。
接着把这个img放在div里,初始就这么定位在了50%,50%的地方。接下来的工作全交给js来完成了。

这一句放在head里,同样也被区别注释了。用来载入兼容模式背景图。

里面放了这些东西

这样就可以让图片永远撑满窗口而且尽量显示全了。

实在不知该写什么了,这篇完结。