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

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

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

//神奇代码
WebSettings webSettings = m_WebView.getSettings(); 
webSettings.setSupportZoom(false);

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

选择性使用网站背景图片

最近的一篇文章主题【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看看是啥
第一个

$(".comments-link")[0].childNodes[0]
#text
attributes: null
baseURI: "http://localhost:56964/"
childNodes: NodeList[0]
data: "↵	 "
firstChild: null
lastChild: null
length: 5
localName: null
namespaceURI: null
nextSibling: a
nodeName: "#text"
nodeType: 3
nodeValue: "↵	 "
ownerDocument: #document
parentElement: div.comments-link
parentNode: div.comments-link
prefix: null
previousSibling: null
textContent: "↵	 "
wholeText: "↵	 "
__proto__: Text

然后是第二个

$(".comments-link")[0].childNodes[2]
#text
attributes: null
baseURI: "http://localhost:56964/"
childNodes: NodeList[0]
data: "			"
firstChild: null
lastChild: null
length: 3
localName: null
namespaceURI: null
nextSibling: null
nodeName: "#text"
nodeType: 3
nodeValue: "			"
ownerDocument: #document
parentElement: div.comments-link
parentNode: div.comments-link
prefix: null
previousSibling: a
textContent: "			"
wholeText: "			"
__proto__: Text

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

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

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

QQ空间日志同步测试

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

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

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

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

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

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

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

本博加上了loading大菊花

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

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

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

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

接下来是正文.

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

首先是html里的内容,

<html>
  
  <head>
    <script src="../js/jquery.js"></script>
    <style>div#waitallload { position: fixed; height: 100%; width: 100%; background-color: rgba(204,204,204,0.5); } div.huaban { position: absolute; background-color: #000; opacity: 0.4; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .caozuodingweidiancenter { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } div#loadingall { position: relative; height: 28px; width: 28px; display: block; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); margin: 0 auto; opacity: 0.5; top: 50%; }</style></head>
  
  <body>
    <div id="waitallload">
      <div id="loadingall" class="caozuodingweidiancenter">
        <div class="huaban" id="huaban1" style="top:0px;left:12px;width:4px;height:8px;"></div>
        <div class="huaban" id="huaban2" style="right:3px;top:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban3" style="right:0px;top:12px;width:8px;height:4px;"></div>
        <div class="huaban" id="huaban4" style="right:5px;bottom:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban5" style="bottom:0px;left:12px;width:4px;height:8px;"></div>
        <div class="huaban" id="huaban6" style="left:3px;bottom:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban7" style="left:0px;top:12px;width:8px;height:4px;"></div>
        <div class="huaban" id="huaban8" style="left:5px;top:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
      </div>
    </div>
  </body>
  <script>huaban = 1;
    function huabanblack() {
      $("#huaban" + huaban).fadeTo(0, 1);
    }
    function huabanwhite() {
      var xiaoshi = 0;
      if (huaban < 8) {
        huaban = huaban + 1;
      } else {
        huaban = 1;
      }
      if (huaban == 1) {
        xiaoshi = 8;
      } else {
        xiaoshi = huaban - 1;
      }
      $("#huaban" + xiaoshi).fadeTo(600, 0.4);
    }
    /*等待菊花*/
    var juhua1haohei, juhua1haobai;
    function loadingstart() {
      juhua1haohei = setInterval('huabanblack()', 90);
      juhua1haobai = setInterval('huabanwhite()', 90);
    }
    loadingstart();</script>

</html>

然后在header里加入html的iframe

<iframe src="<?php echo get_template_directory_uri();?>/framepage/wait.html" style="z-index:-2;display:none;" id='waitiframe' class="bgiframe"></pre>

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

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

$("#waitiframe").ready(function(e) {      //iframe加载好时进行操作,防止出现元素不存在的错误
	var waitiframe = $("#waitiframe");//获取这个iframe
	waitiframe.fadeIn(500,         //500毫秒(0.5秒)飘进
	function() {                            
		function loadingstop() {      //停止加载状态的函数
			waitiframe.fadeOut(500,//菊花iframe飘出去
			function() {
				waitiframe.remove();    //删掉这个iframe【这样就可以省去启动和停止菊花转动的代码了~~】
			});
		}
		$(window).load(function(e) { // 当完全加载好的时候
			loadingstop();    //停止载入动画
		})
	});
});

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

var checkwaitiframetimeout;         //延时变量
function checkwaitiframe(){      //检测加载状态的函数[叫这个名字是因为原本它是用来检测iframe是否还在的函数,后来就没改]
	if(document.readyState =="complete"){            //加载状态
		clearTimeout(checkwaitiframetimeout);     //清除延时
		$("#waitiframe").remove();               //清除iframe
	}	
}

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

checkwaitiframetimeout=setInterval("checkwaitiframe()",3000);//3秒检测一次载入状态

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

主题【3】的背景坎坷

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

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

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

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

background-image: url(图片地址);  /*加载背景图*/
background-size: cover;/*设置尺寸,这里是第一个重点,可以让浏览器把背景图铺满整个显示区*/
background-attachment: fixed;/*这里不是必须,但一般要用上面那功能的话也都会需要这个功能:把图片固定住不随滚动条滚动*/
background-position: center;/*这里是两个样式[background-position-x和background-position-y]的集合版,设置为center可以让背景图完全居中*/

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

先是一个div包一个img标签

 
 

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

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

里面放了这些东西

 /*加载背景图*/

    bgimgjopj.ready(function(e) {     //背景图这个标签被解析时
        bgimg = document.getElementById('backgroundimg');//一个背景图的对象
        bgimg.style.display = 'none';//先让它隐藏
        bgimg.src = bgsrc;//bgsrc是config.js中的变量[配置]
        bgimgjopj.load(function() {//图片载入时
            bgimg.realwidth = bgwidth;
            bgimg.realheight = bgheight;//拿到宽高[宽高也是config.js中的变量]
            bgimg.w_h = bgimg.realwidth / bgimg.realheight;//计算宽高比
            bgimg.style.display = 'block';//这个其实不该放在这里的,应在最后才出现,但是由于那什么就懒得改了

            resetbgimg();//运行重设背景图函数
        });

        $(window).resize(function() {//窗口变动时
            windowwidth = window.innerWidth;
            windowheight = window.innerHeight;//得到窗口宽高
            resetbgimg();//运行重设背景图函数
        });

        function resetbgimg() {//重设背景图函数
            /*重设背景图*/
            var winw_h = windowwidth / windowheight;//计算窗口宽高比
            if (winw_h > bgimg.w_h) {//窗口宽高比大于图片宽高比时(这时情况是图片左右撑满,上下溢出窗口外)
                bgimgjopj.height('auto');
                bgimgjopj.width(windowwidth);

            } else {//窗口宽高比小于等于图片宽高比时(这时情况是图片上下撑满,左右溢出窗口外)
                bgimgjopj.width('auto');
                bgimgjopj.height(windowheight);
            }
            bgimgjopj.css({//让图片居中
                "margin-left": (bgimg.offsetWidth / -2),
                "margin-top": (bgimg.offsetHeight / -2)
            });
        }
    });

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

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

本站更换新域名啦

说到域名这个过程还是真心坎坷啊,主要原因就是家长不帮付钱,说什么好好学习,不要去搞其他东西【我可以说真是这样的人走出学校就是半个废物了么】
换个行。。
luojia.me这个域名也是我日思夜想想要换的了,这次得到这个域名还是我自己的努力。[本站被放在子域”blog.luojia.me上跑”,“www”始终是一个无法完成的工程]
付款这方面么,没有再去求他们【求了也没用】,于是我让同学转账进我的支付宝来付款(我怎么早没想到呢。。),然后开学以后再把钱还给她。
这次由于种种原因我只买了一年的luojia.me,不过也够了,一年里至少可以有机会续费的,共计$9.99【此时按汇率换算62.42冥币】(也没我想像中的那么贵嘛)。
结尾:好高兴吖!!!!!!!!!!
@好基友来庆祝
BlackGlory(顺便测试这里的@有没有用)
顺便道个歉,这次很早就回老家了又很晚回来,所以MC服里我只建了一只小黑,以后有空我还会去的喵!

[PS:原tk地址都已转向对应的me地址,所以tk依然有效]
[更新PS:我发现openshift可以绑定多域名,所以我恢复了tk域名的访问方向,也就是tk仍然可以像以前一样用[除了blog里有些已经定死的链接会让访问调到me域名]]

佳佳Blog新年祭

不知不觉这个博客也已经开了快4个月了(从正常运作开始),日志什么的也零零碎碎的写了64条了(不算这条),我希望这个blog可以一生陪着我(只要wordpress不倒),万一wordpress哪天倒了,我会自己作个blog出来。感谢在这一年里一直都活在我概念里的blackglory、blackfantasy、自由还有等等友爱的大家。
今天我要表演的节目是:没有节目。。。
然后是今年的工作进程:
iTi***模版:没做完;已耗时约6个月
luojia.tk:没做完;已耗时约6个月(雏形做好以后根本就没接着做吖啊喂!)
in-school_work:喵。。。
其它:我到底干了什么!
然后〜今年的新年祭就这样吧。接着做事情去咯!

突然不知为什么就去给我的bilibili空间改了个css

也许是我太耐得住寂寞了,也或者是太爱分心了,【iTi】工程一直都排在了复线程制作[根本就没怎么动吖啊喂!]
回到主题,简单地说就是我给自己的bilibili空间换了个样式,虽然没人去也没有什么日志[bilibili的空间真有人用么。。],但我还是傻了吧唧的熬夜改了下css
先上地址[就当个广告吧~]:http://space.bilibili.tv/589803/list.html
就目前情况来看这个在某些浏览器上看就会是个渣滓..

主题更换日志

旧主题view

新主题view

图片已被充分压缩。。花絮~{之前因为使用高清view图,导致数据库读取崩掉了。。}

现在开始改用主题【3】,更新日志如下

页面的载入速度似乎稍微变快了
评论框修改
背景图片自适应窗口尺寸【把浏览器的窗口宽高调整试试就知道我做了什么了】
更改背景图片
改掉原本模版【2】(从twentyeleven草率改过来的)中之前修改时的bug
回到顶部按钮改用datauri
使用js存放一些常用小图标的datauri码,减小请求次数
提交按钮使用datauri做背景图
内容显示部分适应小屏幕
修改一些样式
加上临时修bug的js
加上内容配置js
把head中的大部分js移入function.js

持续更新…