分类目录归档:未分类

浮动div被覆盖问题的查找思路

1.浮动div的样式如下:

position: absolute;
z-index: 1;
top: 0;
left: -1px;
border: 1px solid #abadb3;
background-color: #fff;
height: 300px;

刚开始以为z-index设的太小了,改大了也不行。

2.逐层向上查找,发现外层有一层的样式是这么写的:

width: 768px;
margin-bottom: 10px;
overflow: hidden;

问题就出在overflow:hidden上。

新版回到顶部,兼容各种浏览器

直接上代码

/**
 * 在页面上产生个gotop按钮。 用纯粹的JS实现,无须额外的CSS和HTML支持,兼容所有浏览器。
 * 
 * @param int
 *            width 网页的主体宽度,以下三种取值 - 0 按钮靠浏览器左 - -1 按钮靠流利器右 - 其它正数 按钮靠网页内容右侧
 * @return void
 */
function goto_top(width)
{
    //var gotop = document.querySelector('#goto-top');
    var gotop = document.getElementById('goto-top');
 
    gotop.style.visibility = (document.body.scrollTop + document.documentElement.scrollTop > 10) ? 'visible' : 'hidden';
    if(0 == width)
    { 
        gotop.style.left = '0em';  
    }
    else if(-1 == width)
    { 
        gotop.style.right = '0em';  }
    else
    {
        var resize = function()
        {
            var left = (document.documentElement.clientWidth - width) / 2 + width + 10;
              
              if(!left){
                left = 0;
            }
            if((left - gotop.clientWidth) < width)
            {
                gotop.style.right='0em';
                gotop.style.left = null;  // 设定了right属性,则需要取消left属性。
            }
            else
            {
                if(window.navigator.userAgent.indexOf("IE") == -1 || parseInt(navigator.appVersion.match(/MSIE ([\d]+)./i)[1])>=9){
                    gotop.style.left = left + 'px';
                }else{
                    gotop.style.left = left;
                }
                gotop.style.right = null;
            }
        };
        resize();
        if(window.navigator.userAgent.indexOf("IE") == -1 || parseInt(navigator.appVersion.match(/MSIE ([\d]+)./i)[1])>=9){
            window.addEventListener('resize', function() { resize(); }, false);
        }else{
            window.attachEvent('resize', function() { resize(); }, false);
        }
    }
 
    if(window.navigator.userAgent.indexOf("IE") == -1|| parseInt(navigator.appVersion.match(/MSIE ([\d]+)./i)[1])>=9){
        gotop.addEventListener('click', function()
        {
            // IE9和opera下body.scrollTop为0,chrome下documentElement.scrollTop为0
            // 两者始终有一个为0
            var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置
            var t = window.setInterval(function()
                    {
                        window.scrollTo(0,h -= 100); // 每次上移100像素
                        if(h <= 0)
                        { window.clearInterval(t);  }
                    }, 5);
        }, false);
         
        /* 通过window.onscroll事件确定按钮是否需要显示 */
        window.addEventListener('scroll', function()
        {
            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
            gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';
        }, false);
    }else{
        if(gotop.attachEvent){
            gotop.attachEvent('onclick', function()
            {
                // IE9和opera下body.scrollTop为0,chrome下documentElement.scrollTop为0
                // 两者始终有一个为0
                var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置
                var t = window.setInterval(function()
                        {
                            window.scrollTo(0,h -= 100); // 每次上移100像素
                            if(h <= 0)
                            { window.clearInterval(t);  }
                        }, 5);
            }, false);
        }
         
        /* 通过window.onscroll事件确定按钮是否需要显示 */
        if(window.attachEvent){
            window.attachEvent('onscroll', function()
            {
                var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
                gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';
            }, false);
        }
    }
}

关于ueditor复制粘贴

首先在生成编辑器时配置开启过滤

<script type="text/javascript">
    UE.getEditor('{$name}',{
            {$content_css}
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[{$theme_config}],
            //focus时自动清空初始化时的内容
            autoClearinitialContent:false,
            //关闭字数统计
            wordCount:false,
            //自动粘贴为纯文本
            pasteplain:true,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:300
            //更多其他参数,请参考ueditor.config.js中的配置项
    });
</script>

然后设置过滤规则:

        //,pasteplain:false  //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
        //纯文本粘贴模式下的过滤规则
        ,'filterTxtRules' : function(){
            function transP(node){
                node.tagName = 'p';
                node.setStyle();
            }
            return {
                //直接删除及其字节点内容
                '-' : 'script style object iframe embed input select',
                'p': {},
//                'br':{$:{}},
                'br':{},
                'div':{},
//                'div':{'$':{}},
                'li':{'$':{}},
                'img':{},
                'center':{},
                'span':{},
                'strong':{},
//                'caption':transP,
                'table': {$:{}},
                'th':{},
                'tr':{$:{}},
                'h1':{},'h2':{},'h3':{},'h4':{},'h5':{},'h6':{},
                'td':{}
//                  function(node){
                    //没有内容的td直接删掉
//                  alert(node.innerHtml());
//                    var txt = !!node.innerText();
//                    if(txt){
//                        node.parentNode.insertAfter(UE.uNode.createText(' &nbsp; &nbsp;'),node);
//                    }
//                    node.parentNode.removeChild(node,node.innerText())
//                }
            }
        }()

注:chrome复制的内容默认按class的设置加上了style属性,其它浏览器没发现这中情况。

在html中设置

功能

首先看一下这个插件的大致功能:

  1. 当网页向下移动时,按钮在固定位置出现。

  2. 点击按钮,网页返回顶部。

  3. 返回顶部后,按钮消失。

需要考虑的问题

按钮的定位

按钮定位需要考虑如下几个问题:

  1. 当浏览器宽度大于页面内容宽度时,如何处理。

  2. 当浏览器宽度小于页面内容宽度时,如何处理。

  3. 当浏览过程中,调整了窗口宽度时,如何处理。

如何返回顶部

看到这个问题,很多人第一个想到的就是:

  • <a id="goto-top" href="#">TOP</a>

但是这会有一个小BUG:当网页在head中指定了base时:

  • <head>

  • <base href="http://830725.com" />

  • </head>

此时,点击链接就会跳转到base所指页面的顶部,即http://830725.com/#,而不是当前页面的顶部。
所以我们这里采用windowscrollTo函数返回顶部,同时还加了个小小的动态效果:每次向上滚动100个像素,直到到顶。

  • var h = document.body.scrollTop + document.documentElement.scrollTop;

  • var t = window.setInterval(function()

  • {

  •  window.scrollTo(0,h -= 100);

  •  if(h <= 0)

  •  { window.clearInterval(t);  }

  • }, 5);

  • }, false);

实现代码

为了简单起见,我们所有的代码都放到了JS中,而不是传统的方式:在html中放个标签,在CSS控制标签的外观,然后又在JS中控制标签的行为,为了这么个小功能,要兼顾三个地方,太让人蛋疼了:)

  1. /**

  2. * 在页面上产生个gotop按钮。

  3. * 用纯粹的JS实现,无须额外的CSS和HTML支持。

  4. *

  5. * @param int width 网页的主体宽度,以下三种取值

  6. * – 0 按钮靠浏览器左

  7. * – -1 按钮靠流利器右

  8. * – 其它正数 按钮靠网页内容右侧

  9. * @return void

  10. */

  11. function gotoTop(width)

  12. {

  13.  document.write('<a id="goto-top">^</a>');

  14.  var gotop = document.querySelector('#goto-top');

  15.  /* 默认情况下CSS属性的设置 */

  16.  gotop.style.visibility='hidden';

  17.  gotop.style.cursor='pointer';

  18.  gotop.style.position = 'fixed';

  19.  gotop.style.fontSize='2.5em';

  20.  gotop.style.fontWeight='900';

  21.  gotop.style.textAlign='center';

  22.  gotop.style.background = 'gray';

  23.  gotop.style.borderRadius = '0.2em';

  24.  gotop.style.width='1.4em';

  25.  gotop.style.height='1em';

  26.  gotop.style.top = (document.documentElement.clientHeight / 2) + 100 + 'px';

  27.  gotop.style.opacity='0.3';

  28.  gotop.style.visibility = (document.body.scrollTop +document.documentElement.scrollTop > 10) ? 'visible' : 'hidden';

  29.  if(0 == width)

  30.  { gotop.style.left = '0em';  }

  31.  else if(-1 == width)

  32.  { gotop.style.right = '0em';  }

  33.  else

  34.  {

  35.  var resize = function()

  36.  {

  37.  var left = (document.documentElement.clientWidth – width) / 2 + width + 10;

  38.  if((left – gotop.clientWidth) < width)

  39.  {

  40.  gotop.style.right='0em';

  41.  gotop.style.left = null;  // 设定了right属性,则需要取消left属性。

  42.  }

  43.  else

  44.  {

  45.  gotop.style.left = left + 'px';

  46.  gotop.style.right = null;

  47.  }

  48.  };

  49.  resize();

  50.  window.addEventListener('resize', function()

  51.  {

  52.  resize();

  53.  }, false);

  54.  }

  55.  gotop.addEventListener('mouseover', function()

  56.  {

  57.  this.style.opacity='0.8';

  58.  this.style.textDecoration='none';

  59.  }, false);

  60.  gotop.addEventListener('mouseout', function()

  61.  {

  62.  this.style.opacity='0.3';

  63.  }, false);

  64.  gotop.addEventListener('click', function()

  65.  {

  66.  // IE9和opera下body.scrollTop为0,chrome下documentElement.scrollTop为0

  67.  // 两者始终有一个为0

  68.  var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置

  69.  var t = window.setInterval(function()

  70.  {

  71.  window.scrollTo(0,h -= 100); // 每次上移100像素

  72.  if(h <= 0)

  73.  { window.clearInterval(t);  }

  74.  }, 5);

  75.  }, false);

  76.  /* 通过window.onscroll事件确定按钮是否需要显示 */

  77.  window.addEventListener('scroll', function()

  78.  {

  79.  var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;

  80.  gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';

  81.  }, false);

  82. };

svn提交时报重名错误的解决方法

Error: Commit failed (details follow):  
Error: Server sent unexpected return value (405 Method Not Allowed) in response to
Error: MKCOL request for '/project/test/!svn/externals/latest_news'

Finished!:  

解决方法:先上visualsvn将latest_news删除,然后在本地先在外层目录上执行resolved动作解决latest_news, 然后clean up, 再然后add,commit

编辑器自动粘贴为纯文本

$(".lwork_mes").on($.browser.msie?"beforepaste":"paste",function(e){
      var _this = $(this);
      $("#pasteTextarea").focus();      
      setTimeout(function(){
         _this.html(_this.html() + '<pre>' + $("#pasteTextarea").val()+ '/<pre>');  
         _this.focus();  
        $("#pasteTextarea").val('');
      },0);
});

安装nginx1.5.6+php5.5.5+mysql5.6

yum install wget
yum install pcre
yum install openssl*
yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2 bzip2-devel ncurses ncurses-devel curl curl-devel e2fsprogs e2fsprogs-devel krb5 krb5-devel libidn libidn-devel openssl openssl-devel openldap openldap-devel nss_ldap openldap-clients openldap-servers make
yum -y install gd gd2 gd-devel gd2-devel

groupadd www

useradd -g www www

ulimit -SHn 65535


tar zxvf pcre-8.30.tar.gz
cd pcre-8.30

./configure –prefix=/usr/local/pcre
make && make install


tar zxvf nginx-1.5.6.tar.gz

cd nginx-1.5.6/

./configure –user=www –group=www –prefix=/usr/local/nginx –with-http_stub_status_module –with-http_ssl_module –with-pcre=/app/src/pcre-8.32 –with-http_realip_module –with-http_image_filter_module

如果提示:./configure: error: the HTTP image filter module requires the GD library.说明gd-devel没有装,使用yum装就好了。