TextArea Resizer
* Added live demo page (url at bottom of page)
This project allows the user to extend the textarea element/area within the web page whenever they feel.
I noticed this functionality when adding a plugin to this website, I guess it's not used that often on other websites.
It is part of the Drupal code, although I haven't much experience with Drupal.
I found it useful and could see an immediate use for it on one of the web applications that I use (Tridion).
Anyway, I decide to spend a few minutes (it was a quick conversion) and turn the functionality in to a jQuery plugin (I couldn't see it in the repository).
To use it you'll need to add the usual jQuery javascript and the plugin to your web page HEAD section:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.textarearesizer.compressed.js"></script>
And then add a little style sheet information:
<style type="text/css">
div.grippie {
background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
border-color:#DDDDDD;
border-style:solid;
border-width:0pt 1px 1px;
cursor:s-resize;
height:9px;
overflow:hidden;
}
.resizable-textarea textarea {
display:block;
margin-bottom:0pt;
width:95%;
height: 20%;
}
</style>
Finally, it's a simple case of activating it against a given element set:
<script type="text/javascript">
/* jQuery textarea resizer plugin usage */
$(document).ready(function() {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
</script>
An example is included in the release.
* Please note that it also uses a tiny 'png' image, although it's entirely optional as this is part of the example style sheet (as seen in the Drupal version).
Enjoy!
My other projects include:
Bounce - http://plugins.jquery.com/project/Bounce
Hover Image Text - http://plugins.jquery.com/project/HoverImageText
-
点击打开链接 CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。 而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea的默认显示，text
-
CSS3自定义滚动条样式 自定义滚动条实现 此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-we
-
1.聚焦高亮 屏蔽聚焦高亮方法 屏蔽input聚焦高亮效果的样式： input {outline: none;} textarea {outline: none;} 2.textarea的自动缩放 屏蔽自动缩放 /*css2.0*/ textarea {width: 400px;max-width: 400px;height: 400px;max-height: 400