计算滚动条的宽度

在做一个图片放大功能,给html加上overflow:hidden之后发现网页会跳动

原因是hidden之后,滚动条消失,body的宽度就会增加。

看了一下知乎的实现,大概就是先计算出滚动条的宽度,当htmloverflow:hidden的时候,让html本身向右偏移,偏移的像素就是滚动条的宽度。同理,滚动条出现的时候,取消偏移。

滚动条宽度 = 窗口宽度 - 内容宽度

width = window.innerWidth - document.body.scrollWidth

移动端滚动穿透问题新解

今天遇到一个问题,就是在一个弹出层里面有一个可滚动的列表,当列表弹出层列表滚动的时候,原来的页面也跟着滚动了,体验相当不好。

在PC还好,可以给body一个overflow:hidden完事,在移动端却不管用啊

查了一下,这个叫移动端滚动穿透,一个大神给出了解决方案:点这里,感觉还是太麻烦了

然后自己琢磨了一番,想到了一个简单的处理方法。

既然滚动是因为内容超出了父级容器,那么就好办了,直接让内容不超出就好了。

直接让内容脱离文档流,使用position:fixed,当弹出层弹出的时候直接在body上加绝对定位position:fixed,当弹出层消失的时候,把原来页面的定位去掉。嗯,就这么简单。

看代码

- 阅读剩余部分 -

typecho图片上传失败解决办法

最近发现typecho上传图片一直失败,开始以为是uploads文件夹权限问题,后来权限改为777,根本没用啊,内心是崩溃的。

额,我又要水一篇了,后来查了一下,大致原因是开发版的typecho存在的一些bug,其中某个函数在检查是否在app engine上运行,获取环境变量的时候错了。

- 阅读剩余部分 -

有关http请求的拦截

function addXMLRequestCallback() {
    var oldSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function () {
        this.addEventListener('load', function () {
             console.log('request completed!');
             //will always be 4 (ajax is completed successfully)
             console.log(this.readyState); 
             console.log(this.responseText); 
            });
                oldSend.apply(this, arguments);
            }
        }
        addXMLRequestCallback();

js获取指定时间转换时间戳问题

前几天写了一个活动的倒计时,在chrome测试正常之后就没管了,今天打开手机发现NaN

测试了几台手机,发现安卓手机正常,IOS和IE有问题,那问题应该是出现在时间转换上面。

new Date("2017-07-12 00:00:00")这一句在IOS下面返回了NaN

然后尝试改变字符串的传入方式new Date("2017/07/12 00:00:00")

发现正常,IOS不支持用-拼接的字符串

时间是后端返回的,要用正则替换一下原来的-

 var startTime = '2017-07-12 00:00:00';
 startTime = startTime.replace(/\-/g, '/');
 startTime = new Date(startTime).getTime();

参考:http://dygraphs.com/date-formats.html

记一个Nginx配置文件目录

今天想改一下Nginx的配置文件,发现忘了在哪个目录了

可以运行nginx -t

这个命令是检查nginx配置文件的语法是否正确,同时会输出nginx配置文件的路径,会看到这样:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

get

typecho输出标签云

接上一篇,右边侧边栏上展示所有文章的标签,typecho有提供相应的Widget

直接进入 后台>外观>编辑当前外观>sidebar.php

在你想要展示标签的位置插入代码:


<?php if (!empty($this->options->sidebarBlock)): ?>
    <section class="widget">
    <h3 class="widget-title">
          <?php _e('标签列表'); ?>
    </h3>    
    <ul class="widget-list">
          <?php $this->widget('Widget_Metas_Tag_Cloud')->to($taglist); ?><?php while($taglist>next()): ?>
          <li class="tags">
              <a href="<?php $taglist->permalink(); ?>" ><?php $taglist->name(); ?>
              </a>
           </li>
          <?php endwhile; ?>
     </ul>
    </section>
<?php endif; ?>

然后在style.css中加上样式.tags{display: inline-block; padding: 0 2px;}

参考: http://docs.typecho.org/themes/tag-cloud

统计typecho文章分类下的文章数量

typecho默认主题侧边栏下的分类展示是没有具体的文章数量,平时看起来很不方便,于是改了一下默认的模板。

找到\var\Widget\Metas\Category目录下的list.php

在分类回调函数treeViewCategoriesCallback中找到这一句:

echo '"><a href="' . $this->permalink . '">' . $this->name . '</a>';

把它修改为


echo '"><a href="' . $this->permalink . '">' . $this->name . '</a><span>('. $this->count . ')</span>';