I have noticed myself to use a few different code snippets on a daily basis so I thought some of you might find them useful. So here we go.

 
1.    
        
   Centering a website (or other elements)   
   The HTML
   view plaincopy to clipboardprint?

   1. <DIV class=wrap>  
   2. </DIV><!-- end wrap -->  

       
   
       
       <!-- end wrap -->
       

   The CSS

    

   view plaincopy to clipboardprint?

   1. .wrap { width:960px; margin:0 auto;}   

     .wrap { width:960px; margin:0 auto;}
       

    

   This is an oldie, but apperantly it is not as obvious as you would think.

    

 

2. 
      
   

      
   Sticky Footer (make footer always be on bottom without absolute positioning)

    
   The HTML

    

   view plaincopy to clipboardprint?

   1. <DIV id=wrap>  
   2.   
   3. <DIV id=main class=clearfix>  
   4.   
   5. </DIV>  
   6.   
   7. </DIV>  
   8.   
   9. <DIV id=footer>  
   10.   
   11. </DIV>  

   The CSS

    

   view plaincopy to clipboardprint?

   1. * { margin:0; padding:0; }    
   2.   
   3. html, body, #wrap { height: 100%; }   
   4.   
   5. body > #wrap {height: auto; min-height: 100%;}   
   6.   
   7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
   8.   
   9. #footer {   
   10.         position: relative;   
   11.  margin-top: -150px; /* negative value of footer height */  
   12.  height: 150px;   
   13.  clear:both;}    
   14.   
   15. /* CLEAR FIX*/  
   16. .clearfix:after {content: ".";   
   17.  display: block;   
   18.  height: 0;   
   19.  clear: both;   
   20.  visibility: hidden;}   
   21. .clearfix {display: inline-block;}   
   22. /* Hides from IE-mac */  
   23. * html .clearfix { height: 1%;}   
   24. .clearfix {display: block;}   
   25. /* End hide from IE-mac */  

     * { margin:0; padding:0; }
       html, body, #wrap { height: 100%; }
       body > #wrap {height: auto; min-height: 100%;}
       #main { padding-bottom: 150px; }  /* must be same height as the footer */
       #footer {
       position: relative;
       margin-top: -150px; /* negative value of footer height */
       height: 150px;
       clear:both;}
       /* CLEAR FIX*/
       .clearfix:after {content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;}
       .clearfix {display: inline-block;}
       /* Hides from IE-mac */
       * html .clearfix { height: 1%;}
       .clearfix {display: block;}
       /* End hide from IE-mac */
       

    

   As of recently i have had to use this over 50 times… i think this is one of the most important tricks you will learn today.

    

 

3. 
      
   

      
   Cross-Browser Min Height

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .element { min-height:600px; height:auto !important; height:600px; }   

     .element { min-height:600px; height:auto !important; height:600px; }
       

    

   You can replace the min-height and heigth with 12em or another value that works for you.

    

 

4. 
      
   

      
   Box Shadow (CSS3)

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }   

     .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }
       

    

   As you can see since this is a CSS3 property you will need all the three commands to make it cross browser(except for ie of course). The first 2 measurements are for horizontal offset and the vertical offset. The third number is for the blur radius. And the last is the color of the shadow.

    

 

5. 
      
   

      
   Text Shadow (CSS3) with IE hack

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }   

     .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
       

    

   This technique is great for all modern browsers, the IE fix works but it is not amazing quality.

    

 

6. 
      
   

      
   Cross Browser CSS Opacity

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .transparent {   
   2.      
   3.   /* Modern Browsers */ opacity: 0.7;   
   4.   
   5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";   
   6.   
   7.   /* IE 5-7 */ filter: alpha(opacity=70);   
   8.   
   9.   /* Netscape */ -moz-opacity: 0.7;   
   10.   
   11.   /* Safari 1 */ -khtml-opacity: 0.7;   
   12.      
   13. }   

     .transparent {
       /* Modern Browsers */ opacity: 0.7;
       /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
       /* IE 5-7 */ filter: alpha(opacity=70);
       /* Netscape */ -moz-opacity: 0.7;
       /* Safari 1 */ -khtml-opacity: 0.7;
       }
       

    

   Opacity can be used for plenty of elements, it adds a certain new age style we all strive for. Notice that in some browsers transperancy is inherited by all child elements!

    

 

7. 
      
   

      
   The Famous Meyer Reset

    
   The CSS

    

   view plaincopy to clipboardprint?

   1.   html, body, div, span, applet, object, iframe,   
   2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,   
   3. a, abbr, acronym, address, big, cite, code,   
   4. del, dfn, em, font, img, ins, kbd, q, s, samp,   
   5. small, strike, strong, sub, sup, tt, var,   
   6. dl, dt, dd, ol, ul, li,   
   7. fieldset, form, label, legend,   
   8. table, caption, tbody, tfoot, thead, tr, th, td {   
   9.  margin: 0;   
   10.  padding: 0;   
   11.  border: 0;   
   12.  outline: 0;   
   13.  font-weight: inherit;   
   14.  font-style: inherit;   
   15.  font-size: 100%;   
   16.  font-family: inherit;   
   17.  vertical-align: baseline;   
   18. }   
   19. /* remember to define focus styles! */  
   20. :focus {   
   21.  outline: 0;   
   22. }   
   23. body {   
   24.  line-height: 1;   
   25.  color: black;   
   26.  background: white;   
   27. }   
   28. ol, ul {   
   29.  list-style: none;   
   30. }   
   31. /* tables still need 'cellspacing="0"' in the markup */  
   32. table {   
   33.  border-collapse: separate;   
   34.  border-spacing: 0;   
   35. }   
   36. caption, th, td {   
   37.  text-align: left;   
   38.  font-weight: normal;   
   39. }   
   40. blockquote:before, blockquote:after,   
   41. q:before, q:after {   
   42.  content: "";   
   43. }   
   44. blockquote, q {   
   45.  quotes: "" "";   
   46. }   
   47.    

     html, body, div, span, applet, object, iframe,
       h1, h2, h3, h4, h5, h6, p, blockquote, pre,
       a, abbr, acronym, address, big, cite, code,
       del, dfn, em, font, img, ins, kbd, q, s, samp,
       small, strike, strong, sub, sup, tt, var,
       dl, dt, dd, ol, ul, li,
       fieldset, form, label, legend,
       table, caption, tbody, tfoot, thead, tr, th, td {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-weight: inherit;
       font-style: inherit;
       font-size: 100%;
       font-family: inherit;
       vertical-align: baseline;
       }
       /* remember to define focus styles! */
       :focus {
       outline: 0;
       }
       body {
       line-height: 1;
       color: black;
       background: white;
       }
       ol, ul {
       list-style: none;
       }
       /* tables still need 'cellspacing="0"' in the markup */
       table {
       border-collapse: separate;
       border-spacing: 0;
       }
       caption, th, td {
       text-align: left;
       font-weight: normal;
       }
       blockquote:before, blockquote:after,
       q:before, q:after {
       content: "";
       }
       blockquote, q {
       quotes: "" "";
       }
       

    

   This is the most useful css reset out there, i use it for almost everything I work on (even the 52framework, coming soon).

    

 

8. 
      
   

      
   Removing the dotted outlines

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. a, a:active { outline: none; }   

     a, a:active { outline: none; }
       

    

   I find myself getting very annoyed with the dotted outline (especially for text-indented elements that are off the page).

    

 

9. 
      
   

      
   Rounded Corners (non ie)

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .element {   
   2.  -moz-border-radius: 5px;   
   3.  -webkit-border-radius: 5px;   
   4.  border-radius: 5px; /* future proofing */  
   5. }   
   6. .element-top-left-corner {   
   7.  -moz-border-radius-topleft: 5px;   
   8.  -webkit-border-top-left-radius: 5px;   
   9. }   

     .element {
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px; /* future proofing */
       }
       .element-top-left-corner {
       -moz-border-radius-topleft: 5px;
       -webkit-border-top-left-radius: 5px;
       }
       

    

   Love rounded corners? Don’t want to slave over images and elements to get the effect? This is your solution, and elements still look fine in ie.

    

 

10. 
       
    

       
    Override Inline Styles

     
    The CSS

     

    view plaincopy to clipboardprint?

    1. .override {   
    2.  font-size: 14px !important;   
    3. }   

      .override {
        font-size: 14px !important;
        }
        

     

    This comes in handy plenty of times, I personally use it way too much everytime something doesn’t work I test if its just not being applied because of some other style.

 ul.demolayout {
 list-style-type: none;
 float: left;
 margin:0px;
 padding:0px;
 }

 ul.demolayout li {
 margin: 0 0 0 0;
 float: left;
 border-bottom:1px solid #515151;
 }
 .tab{
 padding:0 0 2px 0;
 height: 160px;
 text-align:left;
 }
 ul.demolayout a {
 float: left;
 display: block;
 padding: 5px 25px;
 border-bottom: 0;
 color: #515151;
 text-decoration: none;
 font-size:14px;
 font-weight: bold;
 }

 ul.demolayout a:hover {
 background: #eee;
 }

 ul.demolayout a.active {
 background: #515151;
 padding-bottom: 5px;
 cursor: default;
 color:white;
 }

 .tabs-container {
 clear: left;
 padding:0px;
 }
 p.more_details{
  padding:2px 2px 2px 2px;
  font-size:11px;
 }
  </style>
 </HEAD>

 <BODY>
  <div id="demo" class="demolayout">

                <ul id="demo-nav" class="demolayout">
                 <li><a class="active" href="#tab1" id="1">活动资讯</a></li>
                 <li><a class="" href="#tab2" id="2">业态分布</a></li>
                 <li><a class="" href="#tab3" id="3">商家推荐</a></li>
                </ul>
             <div class="tabs-container">
                     <div style="display: block;" class="tab" id="tab1">
                          <p class="more_details">
        活动资讯内容信息
                          </p>
                                                 
                     </div> 
                    
                     <div style="display: none; " class="tab" id="tab2">
        <p class="more_details">
        业态分布内容信息
                          </p>
                     </div> 
                     <div style="display: none; " class="tab" id="tab3">
        <p id="comment" class="more_details">
        商家推荐内容信息
                          </p>
                     </div> 
             </div>
   </div>
 </BODY>
</HTML>

 b.rtop, b.rbottom{display:block; background: #FFF;}
 b.rtop b, b.rbottom b{display:block;height: 1px;
  overflow: hidden; background: #FF9E3E;}
 b.r1{margin: 0 5px}
 b.r2{margin: 0 3px}
 b.r3{margin: 0 2px}
 b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
 .prod_title{
  color:#804000;
  text-align:center;
  font-size:14px;
  font-weight: bold;
  padding: 5px 5px;
 }

 div.details{
  padding:2px;
  font-size:11px;
  text-align:left;
 }
 .box_center{
  width:200px;
  height:150px;
  padding: 2px;
 }

 a.more{
  font-style:italic;
  color:#804000;
  float:right;
  text-decoration:none;
  font-size:11px;
  padding:0px 15px 0 0;
 }
  </style>
 </HEAD>

 <BODY>
  <div id="box">
   <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <div class="box_center">
      <div class="prod_title">圆角测试</div>
      <div class="details">内容信息</div>
      <a href="#" class="more">- 详细信息 -</a>
      <div class="clear"></div>
    </div>
   <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
   </div>
 </BODY>
</HTML>

COMSHARP CMS 写道：在线编辑内容的时候，那些基于 JavaScript 的编辑器帮了我们大忙，这些所见即所得（WYSIWYG）编辑器，给我们提供了类似 Office 的操作体验。如今，任何网站内容管理系统（CMS）和博客系统都需要一个这样的编辑器。本文精选了10个基于 JavaScript  的编辑器，它们有的是基于 jQuery 框架，有点则不是。

MarkitUp - jQuery

Official Website | Demo

功能不是很多，但很轻量，很灵活。打包后只有6.5K大小。

jWYSIWYG - jQuery

Official Website | Demo

非常基本的编辑器，简单为本。打包后只有7K。

Lightweight RTE- jQuery

Official Website | Demo

简单到不能再简单，很容易自己修改。

HTMLBox - jQuery

Official Website | Demo

跨浏览器，开源，基于 jQuery。可以很容易同各种 CMS，论坛，留言本，博客等系统集成。

D Small Rich Text Editor - jQuery

Official Website | Demo

基于 iframe 对象。

WYMEditor - jQuery

Official Website | Demo

TinyMCE - non-jQuery

Official Website | Demo

最经典的基于 JavaScript 的编辑器，COMSHARP CMS 默认的编辑器就是这个。

fckeditor - Non-jQuery

Official Website | Demo

功能非常强大。

Yahoo YUI Rich Text Editor - Non-jQuery

Official Website | Demo

基于 Yahoo YUI，简单，但很可靠。

Xinha - Non-jQuery

Official Website | Demo

自由的基于  BSD 许可编辑器，功能完善，很适合同各种系统集成。

本文原文来源：http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

package com.founder.web.ext;

import Java.util.Date;
import Java.util.HashMap;
import Java.util.Map;

import org.jmesa.core.filter.DateFilterMatcher;
import org.jmesa.core.filter.FilterMatcher;
import org.jmesa.core.filter.FilterMatcherMap;
import org.jmesa.core.filter.MatcherKey;

public class DateFilterMatcherMap implements FilterMatcherMap {

 public Map<MatcherKey, FilterMatcher> getFilterMatchers() {
  Map<MatcherKey, FilterMatcher> filterMatcherMap = new HashMap<MatcherKey, FilterMatcher>();
  filterMatcherMap.put(new MatcherKey(Date.class, "born"), new DateFilterMatcher("MM/dd/yyyy"));
  return filterMatcherMap;
 }

}

现在需要修改tableFacade标签为

<jmesa:tableFacade

    id="tag" 

    filterMatcherMap="com.founder.web.ext.DateFilterMatcherMap"

<br>
<br>
textarea宽度固定，自动增高<br>

<textarea  type="text"  style="width:260;overflow-y:visible;"></textarea>

 <BODY>
 <p>Move your mouser over the red square.</p>
 <div id="div1" style="background-color:red; height:50px; width:50px" onmouseover="showTip(event);" onmouseout="hideTip(event);"><div>
 <div id="divTip1" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">
  <span style="font-weight:bold">Custom Tooltip</span><br/>
 </div>
 </BODY>
</HTML>

 <BODY>
 <div style ="background-color:blue; color:white; font-weight:bold; padding:10px; cursor:pointer" onclick="toggle('divContent1');">Click Here</div>
 <div style="border:3px solid blue; height:100px;padding:10px" id="divContent1">
  This is some content to show and hide.
 </div>
 <div style ="background-color:blue; color:white; font-weight:bold; padding:10px; cursor:pointer" onclick="toggle('divContent2');">Click Here</div>
 <div style="border:3px solid blue; height:100px;padding:10px" id="divContent2">
  This is some content to show and hide.
 </div>
 </BODY>
</HTML>

具体使用办法，
到snap网站可以申请到一段类似以下形式的代码：

<script defer id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&amp;key=739080a127808f9856fa43a8c91c4d21&amp;sb=1&amp;domain=dimlau.com"></script>

下面说说代码的修改：

1、使用默认的代码，鼠标移动到链接上时显示的效果是带搜索框的，但是可以通过修改代码来去掉搜索框，先看效果对比：

修改方法是，将获得代码中的sb=1改成sb=0

2、默认代码效果是页面中的所有链接都有鼠标划过时显示缩略图效果。如果你想对某个特定链接禁用缩略图效果，可以对该链接加上一个分类来标识；
例如链接

<a href="xxxx">xxx</a>

<a href="xxxx" class="snap_nopreview">xxx</a>

通常，一个页面里大部分链接我们都不想加入缩略图的，所以上述办法有点烦琐了。
其实可以通过修改代码中的ap=1为ap=0来使页面的所有链接在默认情况下不显示缩略图，这时只有链接写成以下格式的情况下才会有缩略图显示：

<a class="snap_preview" href="XXX">XXX</a>

对于上述各种情况，如果链接本身已经有了某个class分类，比如已经分类为class="123",可以用空格来分隔，并赋予多个class分类，比如
class="123 snap_nopreview"或者class="123 snap_preview"

以上为本人的一点小小心得，希望对各位看官有点帮助。
--------------------------------------------------------------------------------------------------------

对于我使用的MT，可以对模版中的评论者网站链接形式加入一个class="snap_preview"来实现对评论者网站界面的初步预览，我觉得是个不错的小工具。
当然其他程序，也可以做相应的修改实现该效果。我就不再多说了。

Copy code

body {background-color:red;}

第二个是背景为绿色的CSS文件（green.css）CSS中的内容为： 

Copy code

body {background-color:green;}

第三个是背景为黄色的CSS文件（yellow.css）CSS中的内容为：

Copy code

body {background-color:yellow;}

然后在xthml文件中加入这三个CSS的链接

Copy code

<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>

这三个中除了title不一样外还有一个地方有所不同，那就是REL。第一个与第三个都是alternate stylesheet只有第二个是stylesheet。这第二个就是当然样式。

在链接下面再导入一个JS文件，用来控制这个样式切换

Copy code

function setActiveStyleSheet(title) {
  var i, a, main;
  if (title) {
  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
  a.disabled = true;
  if(a.getAttribute('title') == title) a.disabled = false;
  }
  }
  }
  }
  function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');
  }
  return null;
}

在合适的地方加入三个切换按钮

Copy code

<a href="javascript :void()" onclick="setActiveStyleSheet('red'); return false;" title="红色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('green'); return false;" title="绿色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('yellow'); return false;" title="黄色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('none'); return false;" title="没有样式"></a>

好了发布试试点那三个切换链接！是不是已经切换了样式？


补遗：带有记忆功能的JS文档

Copy code

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+";
path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return
c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);